Introduction
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This unit explains all.
A simple list example
To begin with, let’s look at a simple example with lists. Throughout this unit, we’ll look at unordered, ordered, and description lists (all have styling features that are similar, and some that are particular to their type of list). The HTML for our example looks like so:
<h2>Shopping (unordered list)</h2> <ul> <li>Hummus</li> <li>Pita</li> <li>Green salad</li> <li>Halloumi</li> </ul> <h2>Recipe (ordered list)</h2> <ol> <li>Toast pita, leave to cool, then slice down the edge.</li> <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>Wash and chop the salad.</li> <li>Fill pita with salad, hummus, and fried halloumi.</li> </ol> <h2>Ingredients (description list)</h2> <dl> <dt>Hummus</dt> <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> <dt>Pita</dt> <dd>A soft, slightly leavened flatbread.</dd> <dt>Halloumi</dt> <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>Green salad</dt> <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> </dl>
The list elements probably will have the following styling defaults:
- The
<ul>and<ol>elements have a top and bottom margin of16px(1em) and a padding-left of40px(2.5em). - The list items (
<li>elements) have no set defaults for spacing. - The
<dl>element has a top and bottom margin of16px(1em), but no padding set. - The
<dd>elements have margin-left of40px(2.5em). - The
<p>elements we’ve included for reference have a top and bottom margin of16px(1em), the same as the different list types.
Proposed exercise: Lists with default styling
Create a web page with the list of the previous example, and check the result in your browser. It should be displayed with the default styling (no CSS must be used right now).
You should get something like this:
Handling list styling
When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other.
Some CSS for the text styling and spacing could be as follows:
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
}
h2 {
font-size: 2rem;
text-shadow: 1px 1px 5px orange;
}
ul, ol, dl {
font-size: 1.5rem;
}
li {
line-height: 1.5;
}
dd, dt {
line-height: 1.5;
}
dt {
font-weight: bold;
padding-left: 2rem;
}
- The first rule sets a sitewide font and a baseline font size of 10px. These are inherited by everything on the page.
- Rules 2 and 3 set relative font sizes for the headings, and different list types (the children of the list elements inherit these). This means that each list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent.
- Rule 4 sets the same line-height on list items, so that each individual list item will have the same spacing between lines. This will also help to keep the vertical rhythm consistent.
- Rules 5 and 6 apply to the description list. We set the same line-height on the description list terms and descriptions as we did with the list items. Again, consistency is good! We also make the description terms have bold font, so they visually stand out easier.
Proposed exercise: Lists with your own styles
Create a web page with the lists and styles of the previous example, and change or add any new styles you like. Now you have to create a CSS file and link it from the HTML code. Finally check the result in your browser and validate your code.
Your result may look now something like this:
List-specific styles
Now that we’ve looked at general spacing techniques for lists, let’s explore some list-specific properties. As seen in a previous unit, there are three properties you should know about to start with, which can be set on both <ul> or <ol> elements:
- list-style-type: Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.
- list-style-position: Sets whether the bullets appear inside the list items, or outside them before the start of each item.
- list-style-image: Allows you to use a custom image for the bullet, rather than a simple square or circle.
Bullet and number styles
As mentioned above, the list-style-type property allows you to set what type of bullet to use for the bullet points. In our example, we can set the ordered list to use uppercase roman numerals, with:
ol {
list-style-type: upper-roman;
}
Bullet position
The list-style-position property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is outside, which causes the bullets to sit outside the list items, as seen above.
If you set the value to inside, the bullets will sit inside the lines:
ol {
list-style-type: upper-roman;
list-style-position: inside;
}
Using a custom bullet image
The list-style-image property allows you to use a custom image for your bullet. The syntax is pretty simple:
ul {
list-style-image: url("https://mdn.github.io/learning-area/css/styling-text/styling-lists/star.svg");
}
However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the background family of properties, which you may also find in the Backgrounds and borders article.
In our example, we have styled the unordered list like so:
ul {
padding-left: 2rem;
list-style-type: none;
}
ul li {
padding-left: 2rem;
background-image: url("https://mdn.github.io/learning-area/css/styling-text/styling-lists/star.svg");
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
}
Here we’ve done the following:
- Set the padding-left of the
<ul>down from the default40pxto20px, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn’t do this, the background images would overlap with the list item text, which would look messy. - Set the list-style-type to
none, so that no bullet appears by default. We’re going to use background properties to handle the bullets instead. - Inserted a bullet onto each unordered list item. The relevant properties are as follows:
- background-image: This references the path to the image file you want to use as the bullet.
- background-position: This defines where in the background of the selected element the image will appear. In this case we are saying
0 0, which means the bullet will appear in the very top left of each list item. - background-size: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of
1.6rem(16px), which fits very nicely with the20pxpadding we’ve allowed for the bullet to sit inside (16px plus 4px of space between the bullet and the list item text works well). - background-repeat: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of
no-repeat.
Proposed exercise: Putting it all together
Using the code of the previous exercise, change the defaults bullets to use an image, and also change the default numbering, and any other styles you like. Finally check the result in your browser and do not forget to validate your code.
Your result may look now something like this:
List-style shorthand
It is also worth to know that we may set the three properties mentioned in the section above using a single shorthand property, list-style. For example, the following CSS:
ul {
list-style-type: disc;
list-style-image: url(example.png);
list-style-position: inside;
}
Could be replaced by this:
ul {
list-style: disc url(example.png) inside;
}
The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are disc, none, and outside). If both a type and an image are specified, the type is used as a fallback if the image can’t be loaded for some reason.
Quiz
Test your skills with this quiz about styling lists.