Lessons menu
CSS - intermediate - Lesson nr. 6
Formatting lists

What this lesson is about?
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).

New CSS properties in this lesson:
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.

1. Edit the index.html and toplangs.html files and remove the inline type from the unordered lists, which we set is the previous lessons, then in the style.css file set square shaped bullets for every unordered lists.
View the result
2. Edit the toplangs.html file, add a class name to the unordered list, then in the styles file, refer to that class and set the bullet.png from the images folder as the list’s bullet image.
View the result
3. Add the newly created and styled class from the previous exercise, in the index.html, to the unordered lists.
View the result
1. Which of the following CSS settings produces a list with lowercase letters?
2. Which of the following cannot be used as bullet style?
3. Which is the correct form of setting a picture as bullet for a list?
4. Related to the CSS settings below, which statement is true?
border-right: solid;
list-style-position: inside;
Supplementary information
You can read about links and you can exercise visiting the following links:
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept