Lists are an important element of a web page. They help to structure information and present it in a user-friendly way. In addition, menus and navigation bars are often designed as lists. The CSS list-style property group allows you to control the position and appearance of the marking element .
List Types
Distinguish between ordered and unordered lists. In the first, any character that does not change from point to point can serve as a marker, and secondly, each element of the list has its own marker, which determines its location among the others.
Ordered lists usually use numbers or letters from different systems and alphabets for marking.
Depending on the degree of nesting, one-level and multi-level lists are distinguished . Each level often has its own marking element.
The use of lists when creating menus or navigation panels is encouraged by the latest version of the HTML standard, since this element has important semantic meaning.
CSS rendering
Each item is a block container with a special display type: display-list-item. By default, this value is set for li elements located inside the ul and ol containers and ensures that the marker is displayed in front of the block.
If necessary, this type of display can be set for any HTML container. The appeared marking element is styled using the CSS list-style property group.
p { display: list-item; list-style-type: decimal; }
All three of the following properties are inherited by children with display: list-item and, if necessary, require explicit redefinition.
List Marker Position
The first property of the group is list-style-position. It determines whether the marker remains in the block of text or is moved beyond it.
The property takes one of two values:
The difference between them is especially noticeable at multi-line points.
.list1 { list-style-position: outside; } .list2 { list-style-position: inside; }
By default, outside is set, and the list marker is moved out of the block boundary.
Marker appearance
The second property, list-style-type, controls the type of the marking element and can take more than fifteen values.
By default, Arabic numbers are used for a numbered list, and periods are used for a bulleted list. But the CSS list-style properties allow you to change these settings and even remove bullets altogether.
Unordered list markers:
- disc - ordinary dot, filled with the color of the text;
- circle - an empty circle with a stroke in the color of the text;
- square - the filled square.
For ordered lists of options, there is much more:
| List-style-type property value | Description |
| decimal | standard Arabic numbering, from 1 onwards: 1, 2, ..., 10, ... |
| decimal-leading-zero | uses Arabic digits, values consisting of one character are complemented by an insignificant zero on the left: 01, 02, ..., 10, ... |
lower alpha lower-latin | lowercase latin letters: a, b, ..., e, ... |
upper alpha upper latin | latin capital letters : A, B, ..., E, ... |
| lower-greek | greek alphabet, lowercase characters |
| lower-roman | Roman numerals denoted by lowercase characters: i, ii, ..., vi, ... |
| upper roman | Roman numerals marked with uppercase characters: I, II, ..., VI, ... |
| armenian | armenian numbering style |
| georgian | georgian numbering style |
| hebrew | jewish numbering style |
hiragana hiragana-iroha | various japanese numbering styles, lowercase characters |
katakana katakana-iroha | various japanese numbering styles, uppercase characters |
| cjk-ideographic | eastern ideographic numbering |
Some values duplicate each other, such as lower-alpha and lower-latin, while others are not supported by a number of browsers and fonts.
If necessary, bullets of an ordered type can be applied to unordered ul lists and vice versa.
Separately, select the value none, which hides the markers from the list of any type. It is especially useful when creating navigation bars when you want to preserve the semantics of the list, but the marking elements do not fit into the design. Also, the property is often used for custom styling.
.list { list-style-type: none; }
Custom marker
Instead of certain CSS types of marking elements, you can use any image. To do this, pass the link to it to the list-style-image property.
You can even use images in gif format - the animation will be saved. It’s important to remember that CSS list-style displays a full-size image.
.list { list-style-image: url(image.jpg); line-height: 25px; }
For instance:
In addition to image files, you can use the CSS functions of radial or linear gradients:
.list { list-style-image: radial-gradient(lightblue, aqua, blue); }
The shape of the marker remains square.
Combined syntax
All the properties that determine the display of the list marker can be combined in one - CSS list-style.
list-style: list-style-type list-style-position list-style-image
Specific properties are listed with a space, you cannot violate their order, but any of them can be omitted:
.list1 { list-style: none; } .list2 { list-style: upper-roman inside; } .list3 { list-style: inside url(/images/img1.png); }
To reset styles to the initial parameters, there is an initial value that can be passed to any of the four listed properties.
Using the list-style CSS group of properties in combination with hover effects, you can create beautiful, unique lists that attract the user's attention.