Styling Unordered Lists with CSS

I always seem to forget the steps I take in order to style unordered lists with CSS so I’m outlining the process below so I’ll always have it to check back on for future use. And maybe you’ll find it useful, too.

(Note: I ALWAYS use a “reset.css” stylesheet to strip out all of the browser-default styles. Doing so means that I won’t have to reset those styles in the declarations below.)

Style for UL

ul.class{
padding-left: 10px;
}

Style for individual listed items

ul.class li{
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
padding-left: 8px;
background-position: 0 12px;
line-height: 20px;
padding-top: 5px;
padding-bottom: 5px;
}

March 11, 2008 | CSS, Code Snippets, Usability

 

Comments

Leave a Reply