HTML and CSS Reference
In-Depth Information
To move the navigation list to the left:
◗
1.
Return to the
sa_styles.css
file in your text editor.
◗
2.
Within the style rule for the navigation list, insert the following style value, as
shown in Figure 3-48:
padding-left: 0.5em;
Figure 3-48
Setting the padding space within a list
adds space to the
left of the list items
◗
3.
Save your changes to the file and then reload the
home.htm
file in your Web
browser. Verify that the entries in the navigation list have been shifted to the left,
aligned roughly with the left edge of the Sunny Acres logo.
To complete the design style for the navigation list, Tammy wants to change the
background color of the list to sky blue, and to increase the space between the items by
increasing the line height to 3.5em. Also, while browsers underline hypertext by default,
the current Web design standard is to not underline the links in a navigation list; thus,
Tammy also wants to change the text color of the navigation links to white and remove
the underlining. You'll add these styles to the style sheet now.
To reformat the navigation list:
◗
1.
Return to the
sa_styles.css
file in your text editor.
◗
2.
Add the following style properties to the
nav ul
style rule
background-color: rgb(125, 186, 240);
line-height: 3.5em;
◗
3.
Directly below the
nav ul
style rule, add the following rule for navigation hyper-
text links (see Figure 3-49):
nav ul li a {
color: white;
text-decoration: none;
}
Figure 3-49
Formatting the navigation list
displays hypertext in
the navigation lis
t in
white with no
underlining
displays th
e
unordered
list with a s
k
y blue
backgroun
d
and a line
height of 3.5em
◗
4.
Save your changes to the file and then reload the
home.htm
file in your Web
browser. Figure 3-50 shows the revised appearance of the navigation sidebar.
