Using CSS when working with images

Applying CSS borders to images

Alternatively, you could set borders to be on by default, and override them in specific

areas of the website via a rule using grouped contextual selectors:

img {

border: 1px solid #000000;

}

#masthead img, #footer img, #sidebar img {

border: 0;

}

Finally, you could override a global border setting by creating a noBorder class and then

assigning it to relevant images. In CSS, you’d write the following:

.noBorder {

border: 0;

}

And in HTML, you’d add the noBorder class to any image that you didn’t want to have a

border:

<img class="noBorder" src="sunset.jpg" height="200" width="400"

å alt="A photo of a sunset" />

Clearly, this could be reversed (turning off borders by default and overriding this with, say,

an addBorder style that could be used to add borders to specific images). Obviously, you

should go for whichever system provides you with the greatest flexibility when it comes to

rapidly updating styles across the site and keeping things consistent when any changes

occur. Generally, the contextual method is superior for achieving this.

Although it’s most common to apply borders using the shorthand shown earlier, it’s possible

to define borders on a per-side basis, as demonstrated in the “Using classes and CSS

overrides to create an alternate pull quote” exercise in Chapter 3. If you wanted to style a

specific image to resemble a Polaroid photograph, you could set equal borders on the top,

left, and right, and a larger one on the bottom. In HTML, you would add a class attribute

to the relevant image:

<img class="photo" src="sunset.jpg" height="300" width="300"

å alt="Sunset photo" />

In CSS, you would write the following:

.photo {

border-width: 8px 8px 20px;

border-style: solid;

border-color: #ffffff;

}The results of this are shown in the image to the

right. (Obviously, the white border only shows if

you have a contrasting background—you wouldn’t

see a white border on a white background!)

Should you want to, you can also reduce the declaration’s

size by amalgamating the border-style

and border-color definitions:

.photo {

border: solid #ffffff;

border-width : 8px 8px 20px;

}

You may have noticed earlier that I didn’t mention the border attribute when working

through the img element. This is because the border attribute is deprecated; adding borders

to images is best achieved and controlled by using CSS. (Also, because of the flexibility

of CSS, this means that if you only want a simple surrounding border composed of flat

color, you no longer have to add borders directly to your image files.) Should you want to

add a border to every image on your website, you could do so with the following CSS:

img {

border: 1px solid #000000;

}

In this case, a 1-pixel solid border, colored black (#000000 in hex), would surround every

image on the site. Using contextual selectors, this can be further refined. For instance,

should you only want the images within a content area (marked up as a div with an id

value of content) to be displayed with a border, you could write the following CSS:

div#content img {

border: 1px solid #000000;

}