HTML and CSS Reference
In-Depth Information
Examining the External Style Sheet
Because the CSS code for the external style sheet is complex, a review is necessary
to learn what it does. The CSS code that you entered, which is shown in Table 4-8 on
page HTML 180 defines a new style for five main elements on a Web page: body, para-
graphs, links, images, and tables. It is a good idea (but not a requirement) to insert your
styles in order in the external style sheet.
The first style statement on lines 1 and 2 is entered as:
body {font-family: Centaur, “Century Gothic”, Arial;
font-size: 14pt;}
to change the font-family and font-size for the text throughout the Web site. You use
the body element because you want these styles to apply to text across the Web site
(Figure 4-19). If you wanted to apply one font-family or font-size to paragraphs of text
and another font-family and font-size to the text in links, you would use the paragraph (p)
and link (a) elements rather than body to create those styles. This project uses three dif-
ferent font-family styles (Centaur, Century Gothic, and Arial) just in case the computer
on which the Web page is viewed does not have the first (Centaur) or second (Century
Gothic) font-family. If the computer does not have any of the three font-families, then the
normal (default browser) font-family is used.
The next styles are applied to the paragraph (p) element on lines 4 and 5:
p
{margin-left: 10pt;
margin-right: 10pt;}
With this style, you are adding right and left margins that are 10 points wide. This pulls
the paragraph text in 10 points both from the left and right. To see what that style state-
ment does to the look of the home page for this Web site, look at Figure 4-18 on page
HTML 176 compared to Figure 4-1a on page HTML 155.
Lines 7 and 8 define the styles for all links by using the link (a) element:
a
{text-decoration: none;
color: black;}
Colors
To find the exact color,
you can open the logo in
a graphic image editing
program and use one of
the tools (such as the eye
dropper tool) to click on
the logo itself. If you then
look at the color box, you
should see the six-digit
hexadecimal code for
that color.
This statement sets links to have no text-decoration (no underlines) and makes all link
states (normal, visited, and active) black in color. With a text-decoration setting of
none, the browser will not display lines under any links. Setting the link color to black
throughout eliminates the blue and purple (normal and visited) link colors that you
would normally have. The next statement, on line 10 in the external style sheet, sets the
border color of the image tag to transparent. With that setting, no border will display
around any images.
img {border-color: transparent;}
