In this lesson we will try out some CSS setting for lists. We will move the setting of the list type from the HTML file to the CSS file and we will use pictures instead of standard bullets. We will see how does the bullet of a list looks inside or outside of the list item (its formatted zone).
list-style-type – this property is used to set the style of the list. It can be used instead of the type in the HTML, we previously tried. Some values we can use: square, circle, disc, decimal (default value for the unordered list), upper-roman (uppercase roman numbers), lower-roman (lowercase roman numbers), lower-alpha (lowercase letters ), upper-alpha (uppercase letters).
list-style-image – this property is used to replace bullets for unordered lists with pictures.
list-style-position – this property is used to define the position of the bullets/numbers. They can be outside of the list item or inside. The difference is visible using borders or background on list items: the bullet appears inside or outside of the formatted area. Possible values: inside, outside.
Example to show a picture as a bullet:
In the example above we used the picture x.png as bullet, it will appear instead of the default discs. The size of the picture can be set the easiest with image editors. In the CSS language there is no one property to solve sizing.
Example to place bullets:
On the picture above we applied border to list items. The border is placed by default between the bullet and the text.
If we would like to move the bullets inside the border, we set the value of the list-style-position to inside.
li{
https://www.w3schools.com/css/css_list.asp
