HTML and CSS Reference
In-Depth Information
To Create an External Style Sheet
To create an external style sheet, you will open a new text file and enter CSS code shown in Table 7-7. After
coding the style statements, you will save the file with the file extension .css to identify it as a CSS file.
Table 7-7 Code for an External Style Sheet
Line
CSS Code
1
img.small
{text-decoration: none;}
2
/* displays text decoration around images on the left */
3
4
div#sizes a img.large
{height: 0; width: 0; border-width: 0;}
5
/* hide the larger image by setting its height and width to zero */
6
7
div#sizes a:hover img.large
{position: absolute; top: 68px; left: 170px;
8
height: 389px; width: 500px;}
9
/* make the larger image appear on the right when a user hovers
10
over smaller image on the left */
11
12
p
{margin-bottom: 26px; margin-top: 26px; font-size: small;
13
font-family: Verdana, Arial; color: #100375;}
14
/* add bottom and top margins to p elements so they are aligned with the large image */
The following step creates an external style sheet to define Web page style.
1
•
If necessary, click the
Notepad++ button on
the taskbar. Click File
on the menu bar and
then click New.
style for image
class named small
•
Enter the CSS code
styles for image
class named large
as shown in
Table 7-7.
comment
lines
•
Save the file
styles set for
paragraphs of text
as stylesch7.css
(Figure 7-11).
•
Validate the CSS file
(at jigsaw.w3.org/css-
validator/#validate_
by_upload) and then
print it.
Figure 7-11
