HTML and CSS Reference
In-Depth Information
What if you want a custom marker?
Do you really think Tony would want anything less than his
own custom marker? Well, luckily CSS has a property called
list-style-image
that lets you set an image to be the
marker for a list. Let's give it a try on Tony's list:
Here's
the list-
style-ima
ge prope
rty,
which w
e're sett
ing to a
URL.
Th
e image “
backpack
.gif” is a
sm
all versio
n of this
backpac
k.
Se
ems fitt
ing, doesn
't it? An
d
in
Tony's sig
nature c
olor, too
.
li {
list-style-image: url(images/backpack.gif);
padding-top: 5px;
margin-left: 20px;
}
We're add
ing some
margin t
o add
space on
the left
of the l
ist items,
and also
a little t
op paddi
ng to give
each list
item a b
it of hea
droom.
And, the final test drive…
This is it: your last change to Tony's
site. Add the rule for the list item to your
CSS and then reload.
