Skip to main content

A Beginner's Guide to CSS | Part Thirteen - CSS and Lists

Submitted by helen on Tuesday, September 14, 2010 - 22:17; Modified on Wednesday, August 24, 2016 - 11:07

Welcome to part thirteen of the Beginner's Guide to CSS series — CSS and Lists, which is all about creating and styling lists. This installment doesn't deal with adding images as bullet points or specifying background images for a list, as I felt these topics were beyond the scope of this tutorial. If you want to accomplish those tasks, please see Styling list items with CSS.

This tutorial is split up into twelve sections:

Lists

In HTML and XHTML, there are three list elements, which are as follows:

The Unordered List

The unordered list is represented by the ul element and is used to denote a list with no specific order. In other words, the items in an unordered list can be rearranged any which way, and the list will not lose its meaning (unlike an ordered list, which we will get to below).

The items in an unordered list are placed inside opening and closing li tags, which, in turn, must go between the opening and closing ul tags that comprise the unordered list.

(X)HTML Code:


<ul>
    <li>Metal</li>
    <li>Plastic</li>
    <li>Rubber</li>
</ul>

Result:

  • Metal
  • Plastic
  • Rubber
This is just a random list. It doesn't matter which order it is in.

The Ordered List

The ordered list is represented by the ol element and is used to denote a list whose items only make sense in a certain order — for instance, the index of a book, the order to add ingredients to a recipe, directions, etc. The items of an ordered lists are numbered cardinally, starting from 1, although you can hide or change the style of the numbered marker, as it is known.

Like the unordered list, the items in an ordered list are placed inside opening and closing li tags, which, in turn, must go between the opening and closing ol tags that make up the ordered list.

(X)HTML Code:


<ol>
  <li>Straight on</li>
  <li>First exit on the roundabout</li>
  <li>Turn left</li>
</ol>

Result:

  1. Straight on
  2. First exit on the roundabout
  3. Turn left
These are directions. It matters which order they are in, otherwise you will get lost!

The Definition List

Represented by the dl element, the definition list is used to create a list of values and their corresponding attributes. In other words, a definition list contains the title of something and then the description of that thing, denoted by the dt and dd elements, respectively (definition title, and definition description).

(X)HTML Code:


<dl>
  <dt>Fermions</dt>
  <dd>Subatomic particles that can't occupy the same quantum state; have half integer spin.</dd>
  <dt>Bosons</dt>
  <dd>Subatomic particles that can occupy the same quantum state; have integer spin.</dd>
  <dt>Graviton</dt>
  <dd>The boson that mediates gravity. Will be discovered any day now!</dd>
</dl>

Result:

Fermions
Subatomic particles that can't occupy the same quantum state; have half integer spin.
Bosons
Subatomic particles that can occupy the same quantum state; have integer spin.
Graviton
The boson that mediates gravity. Will be discovered any day now!
The two distinct classes of particles, as well as the hypothetical particle the graviton.

CSS list properties

There are several CSS properties specific to the unordered and ordered lists. They are as follows:

list-style-image

Specifies an image to use as a bullet point.

CSS Code:


/* Set the bullet points to an image called image.jpg. */
list-style-image:url(images/image.jpg);

Note — it is not possible to position images using list-style-image. If you wish to do so, you will need to apply your image as a background image instead. Please see, CSS and Lists for more information.

list-style-position

Specifies the position of the bullet points, either inside the list or outside the list. This property takes two values: inside — which places bullet points inside the list and outside — which places bullet points outside the list.

CSS Code:


/* Position the bullet points inside the list. */
list-style-position:inside;

list-style-type

Specifies which type of bullet point to use.

CSS Code:


/* Specify the bullet points to be decimal numbers. */
list-style-type:decimal;

There are several values to chose from:

circle
A hollow circle.
box
This is a CSS3 value only, whose rendering may vary depending on the browser.
disc
A filled in circle; this is the default value if no list-style-type is specified.
decimal
A decimal number, 1., 2., 3., etc.
decimal-leading-zero
A decimal with a leading zero, 0.1., 0.2., 0.3. etc.
lower-alpha
Lowercase alphanumeric letters, a., b., c. etc.
lower-greek
Lowercase Greek letters, α., β., γ. etc
lower-roman
Lowercase Roman numerals.
square
A filled in square
upper-alpha
Uppercase alphanumeric letters, A., B., C. etc.
upper-roman
Uppercase Roman numerals.

list-style

This is a CSS shorthand property used to specify three (or less) properties at one: a bullet point, the position of the bullet point, and an image.

CSS Code:


/* Specify a circle as the bullet point, position it, and set the bullet point to an image called myimage.jpg */
list-style:circle inside url(images/myimage.jpg);

/* Specify a square as the bullet point and position it inside the list. */
list-style:square inside url;

Styling Lists

Just like any other elements, lists can be styled using the type selector that represents them, or by giving the list a class or an ID. If you use the type selector on its own, the styles you create will affect every other instance of that specific element — that's why it's a good idea to give your lists IDs, or reference them via the descendant selector of a parent or ancestor element. IDs are always a good thing because they describe the purpose of an element, which is useful when you have lines and lines of code and can't figure out what something does.

Styling the Unordered List

Here are some samples of how to style an unordered list.

Using the type selector

CSS Code:

ul {
  background-color:#CCC;
}

li {
  text-transform:uppercase; 
}

(X)HTML Code:

<ul>
  <li>Rubidium</li>
  <li>Caesium</li>
  <li>Francium</li>
</ul>

Result:
  • Rubidium
  • Caesium
  • Francium

Applying a class to an unordered list

CSS Code:

ul.simple { 
  background-color:#939;
}

ul.simple li {
  font-size:120%;
  color:white;
}

(X)HTML Code:

<ul class="simple">
  <li>Nickel</li>
  <li>Copper</li>
  <li>Zinc</li>
</ul>

Result:
  • Nickel
  • Copper
  • Zinc

Applying an ID to an unordered list

CSS Code:

ul#actinides {
  background-color:#9CF;
}

ul#actinides li {
  text-transform:lowercase; 
  list-style-type:square;
}

(X)HTML Code:

<ul id="actinides">
  <li>Uranium</li>
  <li>Neptunium</li>
  <li>Plutonium</li>
</ul>

Result:
  • Uranium
  • Neptunium
  • Plutonium

Styling the Ordered List

Here are some samples of how to style an ordered list.

Using the type selector

CSS Code:

ol {
  background-color:#9CC;
}

li {
  font-style:italic;
}

(X)HTML Code:

<ol>
  <li>Black hole</li>
  <li>White hole</li>
  <li>Wormhole</li>
</ol>

Result:
  1. Black hole
  2. White hole
  3. Wormhole

Applying a class to an ordered list

CSS Code:

ol.simple { 
  background-color:#C36;
}

ol.simple li {
  font-size:120%;
  color:white;
}

(X)HTML Code:

<ol class="simple">
  <li>Stellar</li>
  <li>Intermediate</li>
  <li>Supermassive</li>
</ol>

Result:
  1. Stellar
  2. Intermediate
  3. Supermassive

Applying an ID to an ordered list

CSS Code:

ol#functions {
  background-color:#FFC;
}

ol#functions li {
  font-weight:bold; 
}

(X)HTML Code:

<ol id="functions">
  <li>Continuous Function</li>
  <li>Holomorphic Function</li>
  <li>Complex Analytic Function</li>
</ol>

Result:
  1. Continuous Function
  2. Holomorphic Function
  3. Complex Analytic Function

Styling the Definition List

Here are some samples of how to style a definition list.

Using the type selector

CSS Code:

dl {
  background-color:#CF9;
}

dt {
  width:380px;
  background-color:#339;
  font-size:120%; 
  color:#fff; 
}

dd {
  margin-left:0;
  width:380px;
  background-color:#063;
  color:#fff;
}

(X)HTML Code:

<dl>
  <dt>Pentagon</dt>
  <dd>Five sides.</dd>
  <dt>Decahedron</dt>
  <dd>Ten sides.</dd>
  <dt>Pentadecagon</dt>
  <dd>Fifteen sides.</dd>
</dt>

Result:
Pentagon
Five sides.
Decahedron
Ten sides.
Pentadecagon
Fifteen sides.

Applying a class to a definition list

CSS Code:

dl.simple { 
  background-color:#F33;
  color:#fff;
}

dl.simple dt, dl.simple dd {
  padding:4px;
  color:#fff;
}

dl.simple dt {
  font-size:90%;
  background-color:#939;
  font-weight:bold;
}

dl.simple dd {
  font-size:120%; 
  padding:4px;
  margin:0; /* Remove gap on the left */
  width:380px;
}

(X)HTML Code:

<dl class="simple">
  <dt>substr</dt>
  <dd>Return a string within a string.</dd>
  <dt>array_push</dt>
  <dd>Add an element to the end of an array.</dd>
  <dt>html_special_chars</dt>
  <dd>Convert special characters to HTML entities.</dd>
</dl>

Result:
substr
Return a string within a string.
array_push
Add an element to the end of an array.
html_special_chars
Convert special characters to HTML entities.

Applying an ID to an ordered list

CSS Code:

dl#colours {
  overflow:auto;
}

dl#colours dt, dl#colours dd {
  float:left;
  padding:6px;
}

dl#colours dt {
  width:80px; 
  clear:left;
  background-color:#CCF;
}

dl#colours dd {
  width:200px;
  background-color:#033;
  color:#fff;
  margin:0; 
}

(X)HTML Code:

<dl id="colours">
  <dt>Green</dt>
  <dd>Colour of grass.</dd> 
  <dt>Blue</dt>
  <dd>Colour of the sky.</dd>
  <dt>Orange</dt>
  <dd>Colour of a bad fake tan. </dd>
</dl>

Result:
Green
Colour of grass.
Blue
Colour of the sky.
Orange
Colour of a bad fake tan.

Useful stuff you might want to do

Here are some things you might want to do to your lists.

Remove the bullet points from a ul or ol

Removing the bullet points from a list is very simple, and involves setting the list-style-type to none. This can be added to either the li or the ul, but I tend to add it to the ul as the lis belong to the ul, and this seems like an appropriate place to put it, from my point of view.

If you are unclear on the list-style-type property, see the list-style-type section.


ul.noBullet { 
  background-color:#FC9; /* For demonstration purposes. */
  list-style-type:none; 
}

(X)HTML Code:


<ul class="noBullet">
  <li>background</li>
  <li>border</li>
  <li>font</li>
</ul>

Result:

  • background
  • border
  • font

Remove the margins and padding on a list

When you want to remove all margin and padding from a list, you set both values to zero. As you can see, this pushes the bullet points back, making them appear to be outside the list. If this isn't the effect you're after, check out the example below.

CSS Code:


ol.noMarginPadding {
  margin:0; 
  padding:0; 
  background-color:#9FF; /* For demonstration purposes. */
}

(X)HTML Code:


<ol class="noMarginPadding">
  <li>One</li>
  <li>Coopr</li>
  <li>Cooper S</li>
</ol>

Result:

  1. One
  2. Cooper
  3. Cooper S

Remove the margins and padding on a list but keep the bullet points inside the list

When you want to remove the gap to the left of a list, but keep the bullet points inside the list, you need to set list-style-position to inside. Click here for more on list-style-position.

CSS Code:


ol.inside {
  margin:0; 
  padding:0;
  list-style-position:inside; 
  background-color:#9FF; /* For demonstration purposes. */
}

(X)HTML Code:


<ol class="inside">
  <li>Waxing</li>
  <li>Full</li>
  <li>Waning</li>
</ol>


Result:

  1. Waxing
  2. Full
  3. Waning

Creating a colourful list

Occasionally you will want to go all out with your lists. Some interesting effects can be achieved simply by using borders, padding, margins and of course background colours...as we shall see.

CSS Code:


ul.colourful {
  background-color:#969;
  padding:6px;
  border:4px dashed #639;
  list-style-type:none;
}

ul.colourful li {
  background-color:#C99;  
  margin:0 0 4px 0;
  border:2px dotted #FC6;
}

ul.colourful li:last-child, ul.colourful .last {
  margin:0; 
}

(X)HTML Code:


<ul class="colours">
  <li>font-weight</li>
  <li>color</li>
  <li>text-transform</li>
</ul>

Result:

  • font-weight
  • color
  • text-transform

Floating the definition title and description next to each other

This technique was utilised in one of the examples above, but I'll explain how it works here. When you want your dts and dds to float together, you will need to give them a float:left. This will float everything next to each other and you will end up with your list items all on one line, or floated badly. To rectify this, and make sure that there is only one dt and dd on a line, you will need to apply a clear:left to your dts, and also an overflow:auto to your dl to stop the float from leaking out and affecting the rest of the page (this will happen, even if you clear your dts). If this sounds complicated, don't worry, all will be demonstrated below!

CSS Code:


dl#float {
  overflow:auto;
}

dl#float dt, dl#float dd {
  float:left;
  padding:4px; /* For demonstration purposes. */
}

dl#float dt {
  width:100px;
  clear:left;
  background-color:#9C6; /* For demonstration purposes. */
}

dl#float dd {
  width:200px;
  background-color:#033; /* For demonstration purposes. */
  color:#fff; /* For demonstration purposes. */
  margin:0; 
}

(X)HTML Code:


<dl id="float">
  <dt>Yesterday</dt>
  <dd>The day before today.</dd>
  <dt>Today</dt> 
  <dd>The current day.</dd>
  <dt>Tomorrow</dt>  
  <dd>The day after today.</dd>
</dl> 

Result:

Yesterday
The day before today.
Today
The current day.
Tomorrow
The day after today.

For more examples of things you can do to lists, check out Styling list items with CSS.