Tuesday, November 4, 2008

CSS: Getting specific with lists

Cascading Style Sheets offer an opportunity to get specific with lists, and here is how:

To create a specific outcome solely for unordered list's (ul) items (li), as opposed to all list items (li) do the following

ul li { }

for all lists you would simply use

li { }

This can be applied specifically for your blogger account with the following markup:
example: from this website!
.post ul
{ margin:0; padding:0; }
.post ul li
{ line-height:1.5em; list-style:none; background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat $startSide .3em; vertical-align:top; padding-top: 0; padding-$endSide: 0; padding-bottom: .6em; padding-$startSide: 17px; margin:0; }

The Results of the above code:
  1. This is an ordered list
  2. This is a second item
  • This is an unordered list
  • This is a second item

This same thought process can be applied to any set of sequential markup tags. Enjoy and code safely ,-)

No comments: