More Web Design Tutorials

Styling Lists with CSS

March 22, 2011

We’ve already discussed navigation lists and list bullet images, but sometimes, a list is just a list. There are two types – the ordered list and the unordered list. The ordered list counts the items; the unordered list marks the individual items with bullets or other markers. The HTML is simple.

<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
 
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

And, without any styling applied at all, that looks Like This.

We can affect the list item markers with some simple CSS and the list-style-property controls those. For unordered lists, we can chose between ul styles: disc, square, circle, or none – which looks like this, or between ol styles: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, upper-greek, lower-latin, upper-latin, armenian, or georgian, which looks like that.

Other than that, we can style the ul tag and the li tag. Anything added to the ul tag, affects the entire list, where properties applied to the li tag will affect the individual list items. So this CSS

ul {
	background: #ffe566;
	padding: 25px;
}
 
ol {
	background: #828772;
	padding: 15px;
}
 
ul li {
	background: #fc6;
	margin: 5px;
}
 
ol li {
	background: #9cc;
	padding: 10px;
        margin-left: 35px;
}

will create that.

(Note that I had to add the ‘ul’ or ‘ol’ in front of the ‘li’ so I could target specifically either list’s items. Had I just used ‘li’, any styling would have affected all of them regardless.) … example: adding a larger font size to ‘just li’.