Lists
ul{
list-style-image:url(myMarker.gif);
list-style-type: circle;
}
list-style-image:url(myMarker.gif);
list-style-type: circle;
}
- The code above shows how you can add your own little images as markers. The URL is the path that points to the image file. As far as I know, there is no limit to the size the image can be or the file type as long as it's a standard web file type.
- The second definition in the code above is just in case there's a problem and your image can't be displayed. This way at least something will be.
Of course you can also have a value of "none" but why even bother with the image property for nothing. Again, this property doesn't work with a definition lists.
ol{
list-style-position:inside;
}
list-style-position:inside;
}
- Here you can see how the code above sets the list item marker just inside the indent of the text block.
ol{
list-style-position:outside;
}
list-style-position:outside;
}
- Here you can see how the code above sets the list item marker outside of the text block.
ol{
list-style:url(myMarker.gif) circle inside;
}
list-style:url(myMarker.gif) circle inside;
}
- This is the shortcut property for setting multiple properties in one definition. You don't have to set all three like I have it here. But if you set an image, set a type just in case the image isn't available.
As you can see, all of these styles deal with the markers of lists. Since definition lists have no markers none of these apply to them. Don't fret though, you still can add many other style to them and the other lists for that matter. List styles are pretty simple, huh?