CSS Lists

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 an 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 an image for list items instead of numbers or points. Colors can also be added to list items.

The following is an example showing lists,

Example of lists

Now, we will discuss the list styling properties provided by CSS such as:

  • CSS list-style property
  • CSS list-style-type Property
  • CSS list-style-position Property
  • CSS list-style-image Property

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, and set the 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 the 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 markers, such as circles, squares, etc. The list includes both ordered as well as unordered.

Output

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 the list-item marker instead of a square, circle, number, or other type.

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 the list item marker.

CSS list style image property

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

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

We work to create programming tutorials for all.

No Comments

Post A Comment








Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue Reading