Style html lists with css

Author: Mattias (mattias@999tutorials.com)
Categories: CSS
Html lists can be formated differently with very simple tricks. First you can use either bullets or numbers for your the lists. Secondly you can use images instead of bullets to make them better looking.
The tutorial:
Digg this, Post to del.icio.us,
Did you know that you can make some different styling and stuff for the standard lists in html?

The standard look is something like this:

  • yadda yadda
  • yadda yadda
  • yadda yadda

And you write the html like this:
<ul>
  <li>yadda yadda</li>
  <li>yadda yadda</li>
  <li>yadda yadda</li>
</ul> 

 

And if you want it numbered instead it looks like this:

  1. mumbo jumbo
  2. yadda kladda
  3. bingo berra

The html looks like this:
<ol>
  <li>mumbo jumbo</li>
  <li>yadda kladda</li>
  <li>bingo berra</li>
</ol>
 
The difference from the first style is that we use ol instead of ul. 

 

But you can also use other symbols instead of the standard bullets in the first example.

  • yadda yadda
  • yadda yadda
  • yadda yadda

And you write the html like this:
<ul style="list-style-type: circle">
  <li>yadda yadda</li>
  <li>yadda yadda</li>
  <li>yadda yadda</li>
</ul>

The different list-style-type for <ul>'s are circle, disc and square(standard). And you can only use one at the time :-)

 

Pretty similar you can use the ordered mode <ol> and style it differently. This is one example where I use roman numbers which can be pretty neat sometimes.

  • yadda yadda
  • yadda yadda
  • yadda yadda

And you write the html like this:
<ol style="list-style-type: upper-alpha">
  <li>yadda yadda</li>
  <li>yadda yadda</li>
  <li>yadda yadda</li>
</ol>

The different list-style-type for <ol>'s are upper-alpha, lower-alpha, upper-roman, lower-roman,and decimal (standard). And you can only use one at the time :-)



The lats trick is to use your own images for your lists. Can look pretty cool if you have some graphics for it. I use a stupid little guy that I used in my tutorial about using images in input fields, check it out!
  • yadda yadda
  • yadda yadda
  • yadda yadda

And you write the html like this:
<ul style="list-style-image: url(images/yourListIcon.gif)">
  <li>yadda yadda</li>
  <li>yadda yadda</li>
  <li>yadda yadda</li>
</ul>


Thats all for today. We have looked at different ways to style the standard html list with css.

Something to remember is to always use classes instead of writing the css attributes inside your html code like I did here. This was only to make it easier for you to read and follow the tutorial. It's always best to put all your css in a seperate css file and link it inside the html page. 


Digg this, Post to del.icio.us,
 


eXTReMe Tracker