XHTML and CSS - Styling Unordered Lists
Styling Unordered Lists
In this tutorial we're going to be looking at styling unordered list, first to do this we need a unordered list to style.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> </ul> </body> </html>
The first thing we're going to do is change our built points because there's a good chance you're going to want a list of items and not want to have built points. To do this we need to use the list-style-type property, this has a few different settings circle, square, upper-roman, lower-alpha and none, I'm going to be using none in this tutorial but you should have a look at each of them to see what they look like. You can also use the list-style-image property to set your built points to a image like this list-style-image:url('image.png').
<html> <head> <title> This is the title. </title> <style type="text/css"> ul { list-style-type: none; } </style> </head> <body> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> </ul> </body> </html>
Now you'll see that our list now has no built points, this is really useful in things like menu systems. You might of noticed that even though we don't have any built points that we have a space between the side of our page and our list, this is because by default there is padding there, you can get rid of this padding by setting the padding property to zero pixels;
<html> <head> <title> This is the title. </title> <style type="text/css"> ul { list-style-type: none; padding: 0px; } </style> </head> <body> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> </ul> </body> </html>
Now you'll see that our list is as far to the left of the page as it can be.

Page generated in 0.0056 seconds.