CSS allows you to customize the appearance of any lists made
with HTML.
Note that Netscape and Internet Explorer
browsers often support these properties in different ways. Both browsers have limitations in their support of list styles.
Netscape browsers only let you add the list CSS to <li> tags - not just any tag.
Internet Explorer's support of CSS with relation to lists is only fully supported for browsers on the Windows platform.
In any case, be careful about using CSS for lists since it might not show the way you want it to on all browsers.
If the browser encounters any problem with the display of
the lists, the default is to show just a simple list.
LIST
PROPERTIES
|
Property |
Values |
NS |
IE |
| list-style type |
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none |
4+
4+
4+
4+
4+
4+
4+
4+
|
4W
4W
4W
4W
4W
4W
4W
4W
4W |
list-style image
|
none
url(<url>) |
|
4W
4W |
list-style position
|
outside
inside |
|
4W
4W |
list-style
|
<list-style type>
<list style position>
<list-style image> |
|
4W
4W
4w
|
|
4+:
Browser version 4 or newer.
4W: Browser version 4 or newer, windows only.
DEFINING STYLES FOR LINKS
CSS has four unique selectors with respect to lists. The fourth selector, list-style is an overall selector that let you define all list related styles at once.
The three basic selectors are:
list-style type
Defines the look of the bullets used in your list.
list-style image
Let's you use a custom graphic for bullets.
list-style position
Often the text in a list is longer than one line.
list-style position:outer lets the second line align with the first line. That is: the bullet is to the left of both lines.
list-style position:inner lets the second line align with the bullet.
Assigning several properties at once
Instead of using different selectors for each list-style you can specify them all at once using the list-style property.
For example:
<html>
<head>
<style type="text/css">
LI.list1 {list-style: circle outside; color:green;}
LI.list2 {list-style: square inside; color:blue}
.blacktext {color:black}
</style>
</head>
<body>
<ul>
<li class="list1">
<span class="blacktext">This is one black
line
</span></li>
<li class="list1">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.</ul>
</ul>
<br>
<br>
<ul>
<li class="list2">
<span class="blacktext">This is one black line
</span></li>
<li class="list2">
This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.</li>
</ul>
</body>
</html>
|
Click here to view
