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!)

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: CSS Lists, < ul > and < li >

Chapter 7 part 2 (of 2)

There is one more individual property to the list that should be noted: it's called list-style-position. It's merely inside or outside, and sets whether the second, third, etc., lines of text should start under the list marker, or immediately right beneath the marker.

 <ul style="list-style-position: inside;">
  <li>This list has position set<br>
      to inside.
  <li>You can see how the text falls<br>
on the second line.
 </ul>
 <ul style="list-style-position: outside;">
  <li>This list has position set<br>
      to outside.
  <li>You can see how the text falls<br>
on the second line.
 </ul>

  • This list has position set
    to inside.
  • You can see how the text falls
    on the second line.
  • This list has position set
    to outside.
  • You can see how the text falls
    on the second line.

Finally, there is a combination list style property, called list-style. Its first value is the type of marker, the second value is either inside or outside, and the third marker is the url() of the image. If you want a list that defaults to a disc, shows text inside the marker, and uses an image marker.gif if available, it could look like this:

ul { list-style: disc inside url(marker.gif); }

Ready to test your skills? Make an unordered list with first a square marker, with a sub-list using a circle marker.

Click here if you get stuck or want to see how I did it.

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.