{"id":38,"date":"2008-02-25T07:00:04","date_gmt":"2008-02-25T13:00:04","guid":{"rendered":"http:\/\/cssnewbie.com\/css-rules\/style-unordered-lists\/"},"modified":"2008-02-25T07:00:04","modified_gmt":"2008-02-25T13:00:04","slug":"style-unordered-lists","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/style-unordered-lists\/","title":{"rendered":"5 Ways to Set Your Unordered Lists Apart"},"content":{"rendered":"

Example of a styled unordered list<\/p>\n

Unordered lists are one of the most pervasive elements on the web, probably just behind paragraphs and hyperlinks in terms of their bunny-like abundance. And for good reason: bulleted (i.e., unordered) lists are a great way to convey a bunch of related information in a rather small space, which is often the preferred way to read on (and thus, write for) the internet.<\/p>\n

Last week, I showed you how to turn an ordinary, unassuming unordered list into a navigation bar.<\/a> And then we made that nav bar even cooler<\/a> with a bit of JavaScript. But sometimes, you just need a list to be a list. But that isn\u2019t to say it has to be a boring looking<\/em> list. Here are five different ways to style your unordered lists with CSS.<\/p>\n

1: Change your Bullets<\/h3>\n

Sometimes, all your list needs is a new set of bullets to set it apart from all the other lists out there. For that, you\u2019d turn to the list-style-type attribute, like so:<\/p>\n

ul {\n\tlist-style-type: circle; \n}<\/pre>\n
This sets your bullet type to a hollow circle, as shown in this example.<\/a> And there are other list-style-types out there, as well. \u201cDisc\u201d is the default style, but \u201csquare\u201d has a nice look, as well.<\/p>\n
2: Add Margins and Padding<\/h3>\n
If you really want your list to stand out, you could do worse than to literally set it apart with a bit of margin and padding:<\/p>\n
ul {\n\tmargin: 2em; \n}\nul li {\n\tpadding-left: 1em; \n\tmargin-bottom: .5em; \n}<\/pre>\n
As you can see in this example,<\/a> our first rule applies a 2 em margin to all four sides of our unordered list \u2013 moving it away from the surrounding paragraphs both vertically and horizontally. The left padding on the list item puts a little space between the bullet and the text, adding to the airy feel. The margin on the bottom of the list item opens a bit of space between the individual items in our list.<\/p>\n
3: Use an Image<\/h3>\n
One of the easiest ways to make your lists truly unique (and to ensure they mesh well with your site\u2019s design) is to use images instead of bullets. Here\u2019s how to do it:<\/p>\n
ul {\n\tlist-style-image: url(check.gif); \n}<\/pre>\n
Easy, no? Yet the effect is dramatic:<\/a> all of our list items now have a checked box next to them instead of a bullet. And it doesn\u2019t have to be a checkbox, either \u2013 it could be anything your creative little heart desires. One caveat to this technique is to remember that, unlike the default bullet types, these images won\u2019t grow and shrink with your items if your readers change the text size.<\/p>\n
4: Borders, Backgrounds and the Hover Class<\/h3>\n
For a unique list style that doesn\u2019t make use of images, you could always use borders, background colors, and the :hover pseudo-class to set your list apart:<\/p>\n
ul {\n\tlist-style: none;\n\tmargin: 1em 0;\n\tpadding: 0; \n}\nul li {\n\tfont-weight: bold;\n\tmargin: 0;\n\tpadding: 3px 10px 5px 20px;\n\tborder-bottom: 1px solid #ccc;\n\tcolor: #666; \n}\nul li:hover {\n\tcolor: #000;\n\tbackground-color: #ddd; \n}<\/pre>\n

\nIn this example,<\/a> we\u2019re turning off the bullets altogether with a list-style: none rule, then styling the list items by changing their color, giving them a bit of padding, making them boldface, and setting a border along the bottom. Then, when the user hovers their mouse over the list item, it darkens slightly and we apply a pale gray background color, which would help the reader keep their place in a long list more easily.<\/p>\n
Of course, IE6 doesn\u2019t recognize the :hover class on anything other than anchors, so if you needed this to show up in IE6, you\u2019d need to apply an anchor to your text\u2026 which is why this technique is usually reserved for sidebar links or lists of similar ilk.<\/p>\n
The Whole Shebang<\/h3>\n
Of course, why stop at just using one<\/em> of these techniques, when you could apply several at once? Here\u2019s our mega-styled list:<\/p>\n
ul {\n\tmargin: 1.5em; \n}\nul li {\n\tlist-style-image: url(uncheck.gif);\n\tborder-bottom: 1px solid #ccc;\n\tpadding: .2em 0 .2em .5em;\n\tfont-weight: bold;\n\tcolor: #666; \n}\nul li:hover {\n\tcursor: pointer;\n\tlist-style-image: url(check.gif);\n\tbackground-color: #f2f2f2;\n\tcolor: #000; \n}\n<\/pre>\n
In this attractive example,<\/a> we are:<\/p>\n