CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners


This course was developed in 2002. The CSS all still works, but I've added Web Design Basics for iPad (same Dave, much better course!)

CSS: CSS Lists, < ul > and < li >

Our Hosting Partners:
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:



Cascading Style Sheets: an Interactive Tutorial

CSS Lists, < ul > and < li >

Do you remember your old friends UL (unordered list) and OL (ordered list)? Cascading style sheets have a few enhancements for these lists.

Most people have wanted a way to use an image for each point of an unordered list. Cascading style sheets make this trick really easy to do. Make a small graphic (background transparent are preferred). Then you can link to it with a style similar to this:

ul { list-style-image: url(smallimage.gif); }

But what if you have a sub-list, that is, a UL within a UL. You don't want the second one to have the same image? You can define a special style for UL only within UL, similar to this:

ul ul { list-style-image: url(smallimage2.gif); }

If you use both styles in the same sheet, the points of the main list will be preceded by smallimage.gif, and the points in the sublist will be preceded by smallimage2.gif. You can continue on, adding more UL as you please. Just don't go too deep into sub-lists, you'll confuse your viewing audience!

Remember all those fun outlines you did in school (or maybe the one you did this morning on the job)? CSS gives you a way to auto-format your ordered lists to meet nearly any style. It's similar to the list-style-image used above, it's called the list-style-type property. It can be one of these values: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.

So, if you want the OL to have I, then A, then 1. then, a, then finally i., you could do this style sheet:

OL { list-style-type: upper-roman; }
OL OL { list-style-type: upper-alpha; }
OL OL OL { list-style-type: decimal; }
OL OL OL OL { list-style-type: lower-alpha; }
OL OL OL OL OL { list-style-type: lower-roman; }


<ol>
  <li>Web Design
  <ol>
   <li>HTML
   <li>CSS
    <ol>
     <li>Intro
     <li>Basics
      <ol>
         <li>Inline
         <ol>
           <li>You can include styles
               inline using style=""
         </ol>
      </ol>
    </ol>
   </ol>
</ol>

It looks like this:

  1. Web Design
    1. HTML
    2. CSS
      1. Intro
      2. Basics
        1. Inline
          1. You can include styles inline using style=""

Our Hosting Partners (Sponsored Ads):
  iPage Hosting $1.99/mo
  1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!


Copyright © Dave Kristula. All Rights reserved.