HTML and CSS Reference
In-Depth Information
saved. It helps to look at the code in one of those files (waterfall.html) to see how
the CSS code you will enter is used in the HTML file. The HTML code from
waterfall.html follows:
<div id=”sizes”>
<p><a>
<img class=”small” src=”waterfall1.jpg” width=”150”
height=”110” alt=”Waterfall 1” />
<img class=”large” src=”waterfall1.jpg” width=”150”
height=”110” alt=”Waterfall 1” />
</a></p>
<p><a>
<img class=”small” src=”waterfall2.jpg” width=”150”
height=”110” alt=”Waterfall 2” />
<img class=”large” src=”waterfall2.jpg” width=”150”
height=”110” alt=”Waterfall 2” />
</a></p>
<p><a>
<img class=”small” src=”waterfall3.jpg” width=”150”
height=”110” alt=”Waterfall 3” />
<img class=”large” src=”waterfall3.jpg” width=”150”
height=”110” alt=”Waterfall 3” />
</a></p>
</div>
There are two areas that need to be discussed to understand how the CSS code applies
to the HTML code. Table 7-7 contains the CSS code that you will input into an external
style sheet named stylesch7.css. The HTML code above from waterfall.html shows a
division with an id named sizes and two <img /> tags for each of the three images, as
shown in Figure 7-1b on page HTML 325.
Table 7-7 defines the styles for the id named “sizes” as used in the waterfall.
html code. Line 1 in Table 7-7 creates a class named “small” that is used with the image
element. Lines 4 and 7 identify a class named “large” that also will be used with the image
element as shown in the waterfall.html code above. Note that line 4 identifies the styles
for a link of an image for a class named large (an img.large), as used in the division with id
sizes. Line 4 also tells the browser to set the large image size to height of zero and width
of zero. The net effect of this is that the large image does not display at startup.
Line 7 targets the same elements (a and img) and the same class (large), but this
time it sets styles for the hover pseudoclass (a:hover). This style statement tells the
browser to enlarge the image with class name large when a user hovers over the small
image. The “large” version of the image is set to an absolute position 68 pixels from the
top of the browser window and 170 pixels from the left of the window. The height of the
image when enlarged is 389 pixels, while the width is 500 pixels. This CSS code enlarges
an image, but you can also display text or other elements using this same basic code
structure.
External Style Sheet
Validator
For the external style
sheet, be sure to use the
CSS validator found at the
w3.org validation service
at jigsaw.w3.org/
css-validator/#validate_
by_upload.
