In HTML, there are two main types of lists:
The CSS list properties allow you to:
The list-style-type property
specifies the type of list item marker.
The following example shows some of the available list item markers:
The list-style-image
property specifies an image as the list item marker:
Here, we want to use a font named "Trirong" from Google Fonts:
The list-style-position property
specifies the position of the list-item markers (bullet points).
The list-style-type:none
property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0
and padding:0
to <ul> or <ol>:
We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ul> or <ol> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items: