HTML and CSS Reference
In-Depth Information
Because Tammy wants to remove the markers from the navigation list, you'll set the
list-style-type
value of that list to
none
. Because you don't want to remove the bul-
let markers from all lists on the Web site, you'll use a contextual selector that targets only
unordered lists nested within a
nav
element.
To remove the bullets from the navigation links:
◗
1.
Return to the
sa_styles.css
file in your text editor.
◗
2.
Directly below the style rule for the
h2
element, insert the following (see
Figure 3-44):
/* Navigation list styles */
nav ul {
list-style-type: none;
}
Figure 3-44
Removing bullet markers from navigation list items
◗
3.
Save your changes to the file and then reload the
home.htm
file in your Web
browser. Verify that the bullet markers have been removed from the items in the
navigation list.
Using Images for List Markers
You can supply your own graphic image for the list marker using the style
list-style-image: url(
url
);
where
url
is the URL of a graphic fi le containing the marker image. This is only done
for unordered lists, in which the marker is the same for every list item. For example, the
style rule
ul {list-style-image: url(redball.gif);}
displays items from unordered lists marked with the graphic image in the
redball.gif
fi le.
Tammy suggests that you display the list of hours and driving directions using a green
arrow graphic she created. Both of these unordered lists are immediately preceded by
an
h2
element and nested within a
section
element, so the style rule to change the list
marker is:
section h2+ul {
list-style-image: url(arrow.png);
}
You'll add this style rule to your style sheet.
