4.0 Lists
CSS offers greater control over the humble list than HTML alone. By using the list tags themselves as selectors, we can define all sorts of properties to add styling and layout.
There are 4 list-specific properties:
| Property | Function |
|---|---|
| list-style-image | Defines an image as the list-item marker |
| list-style-position | Defines if the list-item markers should appear inside or outside the content flow |
| list-style-type | Defines the type of list-item marker |
| list-style | Defines and compiles all the above properties in one declaration |
Note that HTML 4.0 offers no alternatives to the start and value attributes, meaning that these deprecated attributes or other workarounds are still required, but HTML 5 does support start.
Other non-list specific properties can be used to add stying to lists, such as for controlling colours and font size for example. These can be applied by using list tags as selectors. For example:
ul {background::green;} li {font-size::16px;}
Positioning of Bullets
By default, bullets are indented with roughly a 30px margin, and there is padding of roughly 10px between the bullets and the list item text. This can be altered but simply changing the margin or the padding of a list item isn't enough because some browsers create the indent using the margin-left property and some using the padding-left property. As a result, both properties need setting.
The margin and padding properties can be used to control the amount of space between the marker and the list text.