Working with images - HTML5 - page 80

The default stylings for the various link states apply to images as they do text. However, instead of
displaying blue text with an underline in the a:link state, a linked image has a blue border around
it. A great many designers find that the blue border does not it their design, so they'll include a CSS
rule that removes it for all linked images in their site:
a img {border: none;}
The compound selector in this CSS rule allows you to add a border to an image while making sure
there is none for any <img> tag within an <a> tag.
aLiGninG iMaGes
Images in HTML are inline elements — which means they can mix with text on the same line. It
also means that basic image alignment is controlled by the same CSS property as text, text-align .
Say you wanted to center an image that was on its own line, like this:
<p><img src=”bigco_logo.gif” width=”300” height=”200” alt=”BigCo, Home of the Big
Products”></p>
One approach would be to add a CSS class such as .centerPara to the <p> tag:
<p class=”centerPara”><img src=”bigco_logo.gif” width=”300” height=”200”
alt=”BigCo, Home of the Big Products”></p>
The corresponding CSS rule might read:
.centerPara { text-align: center; }
With images, the useful values for the text-align property are left , center ,
and right . The justify value is not meaningful for graphics.
One other ramification of the inline aspect of HTML images is that additional steps must be taken
to wrap text around any graphic. When an <img> is placed within a paragraph, the image is ren-
dered within the flow of the text, as shown in Figure 10-5. If the text-align property is set to left
or right for the paragraph, the entire paragraph — including the image — is aligned to the desig-
nated direction. To wrap text around the image, you need to use the CSS property float .
The float property can be set to left or right . If an image is floated to the right, all text appears to
its left and vice versa. Typically, CSS classes are created with the float property and applied as needed:
.imageLeft {
float: left;
padding-bottom: 15px;
padding-right: 15px;
}
.imageRight {
float: right;
padding-bottom: 15px;
padding-left: 15px;
}