HTML and CSS Reference
In-Depth Information
Creating an External Style Sheet
With the home page complete, the next step is to create an external style sheet that is
linked to all pages in the Web site. You already added the link statement into the HTML
code in the tahanna.html file on line 8. This statement tells the browser to link to the
external (linked) style sheet named stylesch5.css. If there is no stylesch5.css file avail-
able, as is the case at this time, then the styles used are the default styles, as shown in
Figure 5-32a. Once you create the stylesch5.css external style sheet, your Web page looks
like that shown in Figure 5-32b.
navigation
bar without
style sheet
(a)
navigation bar with style sheet;
display inline (straight across
vs. down) and list-style-type of
none (no bullets)
(b)
Figure 5-32
To create an external style sheet, you first have to start a new file in Notepad++.
Remember from Chapter 4 that an external style sheet does not need the initial HTML
DOCTYPE tags that you use for all Web pages. The external style sheet contains only the
code for the various styles that you want to use across a Web site.
To Create an External Style Sheet
Table 5-9 contains the CSS code for the external style sheet that is used in all Web pages. Lines 1 and 2
define the font-family and font-size for the Web page. Lines 4 and 5 set the right and left margins to 5 points.
That will give 5 points of space from the edge of the Web page to the start of the text in a paragraph. Lines 7 and
8 create a paragraph class named “boldword” that will be used to format text with a navy blue color and a bolder
font-weight. Line 10 puts a transparent border around all images so that there is no border. Lines 12 and 13 create
a list class named navlist (navigation list) that is used to display each list item inline (horizontally) without a bullet
type. This is a good technique to use for navigation menus. Lines 15 through 19 are styles that you have used in
past projects. In these lines, you set the style of a link color with no text-decoration (no underline). You also use the
pseudoclass hover to set the background and text color for hovered links.
