EchoEcho.Com Homepage
Web Hosting - As Reliable As It Gets!
   Home > Tutorials > CSS > Attributes


 Tutorials 
 D-Zine Articles 
 Online Tools 
 Free Resources 
 References 
 Quiz 
 Hosting 

















  CSS TUTORIAL :
CSS Lists








CSS allows you to customize the lists that can be made
with HTML.

The good news is that there are many powerful properties for doing so.

The bad news is that Netscape and Internet Explorer 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. However, most things won't ruin anything if the browser doesn't support it - it just shows as a normal list - so it will be okay to define lists that only work for the most widely used browser.

LIST PROPERTIES

PropertyValuesNSIE
list-style typedisc
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

As mentioned in the above table, we have 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 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>
<br>
<br>
<ul>
<li class="list2"><span class="blacktext">This is one black line</span>
<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.

</ul>

</body>
</html>


The lists from the above example would look like this:

  • This is one black line
  • 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.

  • This is one black line
  • 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.






 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!
FACT:
Pages may align fine in one screen resolution while it's a mess when viewed on another.
TIP:
Use our Screen Resolution Tool to check your own pages.

It even shows bigger resolutions than your screen can handle!





     "Better Than Books - As Easy As It Gets!"


On EchoEcho: D-Zine Articles | Tutorials | Online Tools | Free Resources | References | Quiz | HostingAbout EchoEcho