CSS Styling HTML Lists
We often see webpages with navigation menus, providing links to other pages in a dropdown fashion, or as a horizontal menu (See the Studytonight Website Navbar above). These menus are structurally lists but are styled to look differently.
Lists are also used to represent related data information, which again can be styled to look better.
In HTML, there are two types of lists:
- Ordered Lists
<ol>: Items marked with numbers or letters.
- Unordered Lists
<ul>: Items marked with bullets.
With CSS, you can use your own images as bullets in a list. The CSS list properties allows you to:
- Set different list item markers for ordered lists.
- Set different list item markers for unordered lists.
- Set an image as the list item marker.
The type of list item marker can be set by using the list-style-type property.
Example:
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}
Live Example →
The following keywords work with the list-style-type property:
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-latin
- upper-latin
- armenian
- georgian
- lower-alpha
- upper-alpha
- none - removes the bullets
NOTE: Non-keyword values have been included in CSS3, but there is hardly any support for them.
The list-style-type property applies to all lists, and to any element that is set to display: list-item. The color of the list marker will be whatever the color of the element is (set via the color property).
Positioning the List Item Markers
Next, you need to know how you can position your list. The list-style-position property lets you set the position of your list on your webpage. It accepts two values, inside & outside. The default value is outside.
Example:
ul{
list-style-position: inside;
}
Live Example →
Image as the List Item Marker
As we mentioned earlier, it is possible to use an image as a bullet marker on your webpage. This can be done by using the list-style-image property. You can either set it to none, or you can provide a url to some image.
ul{
list-style-image: url('images/bullet.png');
}
Live Example →
Styling List into Navigation Bar
We can style list to look more than just a simple list. For example: The navigation bar that you see on the top of the current webpage is a styled list.
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
We will learn how to style list into different types of Navigation bars, once we are done with other basic styling properties.
