How to Style Lists with CSS
HTML lists can have a number of different styles applied using CSS. Here are some of the commonly used ones.
List Style Type
Determines what the bullet looks like. For info on the possible values see the list-style-type
page.
List Style Image
For more information on using images for your bullet points, see list-style-image
.
List Style Position
Determines whether the bullet is located inside the list's containing box or outside. For more info, see list-style-position
.
List Style
The list-style
property is shorthand for setting the list properties.
Unstyled Lists
By default, most browsers style lists in a certain way. For example, most lists have a bullet point or other list marker for each item. Lists also typically have padding and margin applied.
However, you might not always want lists to appear this way. In fact, it's very common for developers to use unstyled lists. Unstyled lists are those that have had any padding, margin, and list marker removed.
Unstyled lists are often used in website navigation, and other places where any list marker, padding, and margins, would just get in the way.
Here's an example of an unstyled list:
Inline Lists
You can take it a step further and turn the unstyled list into an inline list.
You can do this by setting display: inline-block;
against the li
elements.