Styling Lists with CSS

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 LikeThis.

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 – whichlooks 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, whichlooks 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; }

willcreate 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.)

- See more at: http://www.websitecodemaker.com/

All css and css3 for css tools and css3 tools with css code generator and css3 code generator. All css generator and css3 generator for css button gerator and css3 button generator, css gradient generator and css3 gradient generator, css menu maker and css menu maker, css button maker and css3 button maker other help css editor and css3 editor.