CSS Lists

CSS Lists

In this article, we will learn how to style CSS lists. Lists as the name tells allow setting content in the form of list items such as ordered and unordered. Let’s see an example of ordered and unordered list,

Understanding lists in a web page

Styling Lists using CSS

With CSS, style list item markers for ordered and unordered lists. Set image for list items instead of numbers or points. Colors can also be added to list items.

Here’s an example showing lists,

Example of lists

Now, we will discuss the lists styling properties provided by CSS such as set image for list items, adding color to list item, etc.

Let’s start!

CSS list-style property

The CSS list-style property is a shorthand property to set individual properties for lists at once, such as list-style-type, list-style-position, list-style-image, etc. Add amazing lists, set list types, with this CSS property on your web page.

Let’s see an example,

The above HTML and CSS code will give you the following output, wherein we have set the list-style property.

CSS list style property

CSS list-style-type Property

Use the list-style-type property to set the style of list item marker. The style can be of the following types: square, circle, lower-alpha, upper-alpha, lower-roman, upper-roman, etc.

Let’s see an example,

The above HTML and CSS code will give you the following output, wherein we have set the list-style-type property to set the styles for item marker, such as circle, square, etc. The list includes both ordered as well as unordered.

CSS list style type property

CSS list-style-position Property

The list-style-position property allows you to set the position of the list-item marker. Set the position either inside or outside the box with content points.

Let’s see an example:

The above HTML and CSS code will give you the following output, wherein we have set the list-style-position property to set the position for list item marker.

CSS list-style-position Property

CSS list-style-image Property

The list-style-image property allows you to set an image for list-item marker instead of square, circle, number and other types.

Let’s see an example:

The above HTML and CSS code will give you the following output, wherein we have set the list-style-image property to set an image for list item marker.

CSS list style image property

In this lesson, we learned how to work with CSS lists to style lists, set list style, images to list item marker, etc.

CSS Outline
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment