Loading lesson path
In HTML, there are two main types of lists: <ul> - unordered lists (list items are marked with bullets) <ol> - ordered lists (list items are marked with numbers or letters) CSS has the following properties for styling HTML lists:
Formula
list - style - type
- Specifies the type of list - item marker list - style - image
- Specifies an image as the list - item marker list - style - position
- Specifies the position of the list - item markers list - styleFormula
list - style - type property specifies the type of list - item marker in a list.
The following example shows some of the available list - item markers:Example ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}ul.c
{list-style-type: square;}
ol.d {list-style-type: upper-roman;}ol.e
{list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}Some of the values are for unordered lists, and some for ordered lists.
Formula
list - style - image property is used to replace the list - item marker with an image.Always specify a list-style-type property in addition. This property is used if the image for some reason is unavailable.
Formula
Replace the list - item markers with an image:ul
{
list-style-image: url('sqpurple.gif');Formula
list - style - type:square;
}Formula
list - style - position property specifies the position of the list - item markers(bullet points).
list-style-position: outside;means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.
Formula
Coca - cola list - style - position: inside;means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}Formula
The list - style - type:none;
property is used to remove the list - item markers.Formula
A list has a default margin and padding. To remove this, add margin:0 and padding:0 to the < ul > or < ol > element:ul
{
list-style-type: none;
margin: 0;
padding: 0;
}Formula
The list - style property is a shorthand property. It is used to set all the list properties in one declaration.
When using the shorthand property, the order of the property values are:
list - style - type list - style - position list - style - image
If one of the property values above is missing, the default value for the missing property will be inserted.