ol – Ordered List – The lists which follows a sequence/order like numbers, alphabets
ul – Unordered List
There are 3 important style properties for Ordered List and Unordered List –
list-style-type – This sets the type of bullet points.
list-style-position – This sets the position of the bullet points
list-style-image – This sets a background image for the bullet list type
1. CSS List Style Type
The list-style-type decides the shape of the bullet list which is called the Item marker.
For Ordered list, the default style type is decimal.
Style Type
Example
decimal
1,2,3,…
decimal-leading-zero
01,02,03,…
lower-roman
I, ii, iii,iv,…
upper-roman
I, II, III,IV,…
lower-alpha
a, b, c, …
upper-alpha
A, B, C, D,…
lower-greek
α, β, γ, δ, ε,…
The Syntax of list style type for ordered list: list-style-type: decimal| decimal-leading-zero| lower-roman| upper-roman| lower-alpha| upper-alpha| lower-greek| hebrow ;
It is very important to note list-style-type: none and coding this is very important for Navigation bars.
At this stage, we are just showing how the output will look like if we code this. You will see the practical application of list-style-type: none in the Navigation bars article.
Remove the style from list using list-style-type:none
Along with list-style-type:none, if you code the float:left property, then it helps to create a Horizontal Navigation bar.
At this stage, we are just showing, how the output will look like if we code this. You will see the practical application of this in the Navigation bars.
Remove style by list-style-type: none and add float:left
You can set a background image(Icons) in place of the item marker using the list-style-imageproperty
The Syntax Style list image: list-style-image: url(‘path’) ;
Warning/Danger/Info/SuccessIdeally, the size of the image should be very small. The image size should be between 16*16px - 30*30px for the images to look good as item marker. This is not a standard rule but we recommend it based on our experience.