# Lists

Besides the inherited font and color styling, also the markers and position of lists can be further formatted:

property	example	description
`list-style-type`	`list-style-type: circle;`	specifies the marker of a list item
`list-style-image`	`list-style-image: url(sign.png);`	sets an image as the marker of a list item
`list-style-position`	`list-style-position: inside;`	specifies the position of the list item markers

# list-style-type

The list-style-type property sets the marker of a list item element
- Possible values: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none, any Unicode character (e.g. "★" or "\2605"), ...
- list-style-type: none is a common setting in lists that form the basis of navigation bars

ul {
    list-style-type: square;
}

ol {
    list-style-type: upper-alpha;
}

1
2
3
4
5
6
7

REMARKS

The list-style-type property can be set on li, ul and ol elements
In the example code above, the list-style-type property is set on the parent elements ul and ol. Because this is an inherited property, it is applied to all child/li elements of these (un)ordered lists.

EMMET instruction	result
`list` + `TAB`	`list-style-type: ;`
`list:n` + `TAB`	`list-style-type: none;`

The list-style-image property sets an image to be used as the marker of a list item element

ul {
    list-style-image: url(sign1.png);
}

1
2
3

REMARK

If the image is unavailable for some reason, the value specified for list-style-type will be used as list item marker

EMMET instruction	result
`lisi` + `TAB`	`list-style-image: ;`

The list-style-position property specifies the position of the list item markers (relative to the list item)
- Possible values: inside, outside (= default)

ul {
    list-style-position: inside;
}

1
2
3

EMMET instruction	result
`lisp` + `TAB`	`list-style-position: ;`
`lisp:i` + `TAB`	`list-style-position: inside;`

As we format several lists using only one style sheet style.css (for all webpages), we have to avoid conflicts
- We use a descendant selector nav ul to select only the list of the navigation bar
- We use descendant selectors #image li (and #image li li) to select the list items within the element with id="image" (and the list items within list items within the element with id="image")
- We use ul#inside (and ul#outside) to specifically select the list with id="inside" (and the list with id="outside")