CSS Basics Part 11: CSS Lists
In this tutorial we will talk about styling HTML lists with CSS and give some examples to demonstrate how to do that.
In this part of the CSS Basics series, I will talk about styling lists with CSS.
Using CSS is a great way to style lists. You can style both ordered and unordered lists using the same CSS list properties. I will give examples for each of them below.
List Style Type
list-style-type property sets the type of the list item marker. You don't need to have all your lists as discs, you can have a number of different marker styles. See the examples below:
list-style-type property can take the following values: circle, decimal, disc, georgian, lower-alpha, lower-latin, square, upper-alpha, upper-latin and none.
List Style Position
list-style-position property sets the position of the list item markers. They can be either inside or outside of the content.
This works more or less like indentation.
List Style Image
list-style-image property allows you to use an image instead of the regular list marker. This is a nice way to style your list.
Replace image.jpg with the path to the image file that you want to use. Know that it is a good practice to also set the list-style-type in case the images are not visible on the visitor's browser.
As in background, border and font, you can also use a shorthand property for styling lists. list-style sets the type, position and image of the list marker. See the code below.
list-style: disc inside;
list-style: circle outside url('/image.gif');
Apart from the list properties, you can style a list's position, color, background, etc. using the other CSS properties we have talked about up to now. See the example below that styles the list area (ul) and the list items (li) separately.
margin: 5px 0;
As you see, it is easy to style lists with CSS and make them look exactly the way you want. Make some practice until you feel comfortable styling lists. In the next part, I will continue with CSS tables.
More CSS Tips
CSS Basics Part 12: CSS Tables CSS Basics Part 10: CSS Links CSS Basics Part 9: CSS Borders CSS Basics Part 8: CSS Backgrounds CSS Basics Part 7: CSS Font Properties CSS Basics Part 6: CSS Text Properties CSS Basics Part 5: CSS Margins and Paddings CSS Basics Part 4: CSS Classes, IDs, Divisions and Spans CSS Basics Part 3: CSS Syntax Simple CSS Table Tutorial: Create a Colorful Table with CSSCSS Tips