In the last article, we learned about customising links on the web pages and even learn to convert a link into beautiful button without using any button element. Now in this article, we are going to customise lists in web pages with the help of CSS.
Let's begin...
Changing List Markers
The list-style-type property allows changing the type of list marker using CSS. We can do this same thing also using HTML syntax but it is always better to have our styling in CSS file so that we can change it easily.
Following values are available for unordered lists:
- disc
- square
- circle
- none
Following values are available for ordered lists:
- decimal
- decimal-leading-zero(decimal numbers padded by initial zeros)
- lower-roman
- upper-roman
- lower-greek
- lower-latin
- upper-latin
- lower-alpha
- upper-alpha
- none
An Image as List Item Marker
The list-style-image property specifies an image as the list item marker.
ul{
list-style-image: url('sample.png');
}
Position The List Item Marker
The list-style-position property specifies whether the list-item markers will be inside or outside content flow.
ul{
list-style-position: inside;
}
Shorthand
The list-style property is shorthand for setting the three list properties: list-style-type, list-style-position, list-style-image.
ul{
list-style: circle inside url('sample.png');
}
The order should be as above while writing shorthand.
Using Colors to Style
We can easily customise colors of list background and also of specific elements by selecting list elements such as ol and li.
Here is one example:
That's all for today. In the next article, we will learn about customising tables using CSS.
Till then #keepCoding.
Comments
Post a Comment