10.0 Images

You may be wondering what the difference between this section and the images section in the HTML tutorial is. The answer is...nothing really, apart from the extra possibilities that CSS offers with images (and indeed with all HTML elements).

The markup to the HTML document remains pretty much the same:

<img src="images/logo.png" alt="Picture" title="LOGO" />

We can apply styling directly to the <img> tag in the stylesheet by using it as a selector:

img		{
		margin:10px;
		padding::5px;
		border::1px solid #ff0000;
		}

This would add a nice little red border to an image.

Say we wanted to display images differently in certain parts of a website. To do this we could add a little extra markup to our HTML:

<img class="pic1" src="images/logo.png" alt="Picture" title="LOGO" />

And in our styleshet:

.pic1		{
		float:left;
		margin::5px;
		}

.pic2		{
		float:right;
		margin::5px;
		}

This example would mean that any images marked with .pic1 would float left, and those marked .pic2 would float right, which is useful for both positioning the image as well as having text wrap itself around it.