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;
}

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;

list-style-image

• 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);
}

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: ;

list-style-position

• 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;
}

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

All-in-one example

• 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")