HTML and CSS Reference
In-Depth Information
font-size: 18px;
font-weight: bold;
padding: 5px 5px 6px 35px;
color: #900;
background-image: url(images/sprite.png);
background-repeat: no-repeat;
background-position: left top;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-position: left -90px;
color: #060;
}
The only significant difference from the previous examples is the addition of a background image. In the
normal state the image's
background-position
is
left top
, but in the hover state it changes to
left -90px
. This
moves the sprite
90px
up to reveal a green ball in place of the red one (see Figure
10-18
).
Figure 10-18.
You can use a CSS sprite to change the background on hover
This is only a very basic example to demonstrate the principle. I hope it inspires you to experiment with
designs of your own.
Summary
There are just three CSS properties and one shorthand property for styling lists. The
list-style-type
property
lets you change the symbol or number, or remove it completely. The symbols for unordered lists are limited to
disc
,
circle
, and
square
, but there's a much wider choice for ordered lists. Changing the type of number for
nested lists improves readability. The
list-style-position
property determines whether the symbol or number
should be outside the list item or tucked into the first line. And the
list-style-image
property lets you use a
custom image for unordered lists. Unfortunately, there's no way of fine-tuning the position of the image, so it's
sometimes preferable to use a background image instead.
It's become a common convention to convert an unordered list into a navigation menu by setting
list-style-type
to
none
to remove the bullets. The links inside the list items can be turned into clickable
buttons by setting their
display
property to
block
, and giving them a background color. To create a horizontal
