We use cookies. More

CSS Basics Part 11: CSS Lists

CSS
f t g+ in

In this tutorial we will talk about styling HTML lists with CSS and give some examples to demonstrate how to do that.

Advertisement

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:

ul.first-list {
list-style-type: circle;
}

ul.second-list {
list-style-type: square;
}

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.

ol.one {
list-style-position: inside;
}

ol.two {
list-style-position: outside;
}

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.

ul {
list-style-image: url('/image.gif');
}

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.

List Style

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.

ul.first-list {
list-style: disc inside;
}

ul.second-list {
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.

ul {
margin: 5px 0;
padding: 0;
background: white;
}

li {
padding: 5px;
color: #222;
background: #999
}

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.

Advertisement

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in