CSS Lists
In this tutorial you will learn how to format HTML lists using CSS.
HTML Lists
❮ Previous Next ❯
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
- Item
- Item
- Item
- Item
An ordered HTML list:
- First item
- Second item
- Third item
- Fourth item
Styling lists
- Previous
- Overview: Styling text
- Next
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, as well as some best practices to consider. This article explains all.
Basic computer literacy, HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS), CSS text and font fundamentals. |
To become familiar with the best practices and properties related to styling lists. |
<ul>: The Unordered List element
The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.
Flow content, and if the <ul> element's children include at least one <li> element, palpable content. |
Zero or more <li>, <script> and <template> elements. |
None, both the starting and ending tag are mandatory. |
Any element that accepts flow content. |
list |
directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree |
HTMLUListElement |
How to Make Lists in HTML
In HTML, we can list items either in an ordered or unordered fashion.
An ordered list uses numbers or some sort of notation that indicates a series of items.
For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.
Here is an example of an ordered list with students' names and marks.
On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.
There is one more type of list called a description list that we will learn as well below.
Now let's get into a bit more detail and see how to create each type of list in HTML.
HTML Unordered List | HTML Bulleted List
HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
- disc
- circle
- square
- none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
Type "disc" | This is the default style. In this style, the list items are marked with bullets. |
Type "circle" | In this style, the list items are marked with circles. |
Type "square" | In this style, the list items are marked with squares. |
Type "none" | In this style, the list items are not marked . |
How To Format Bullet Lists (<ul>) Using CSS
Bullet lists in HTML come in two varieties: Ordered Lists (in which each line begins with a number or letter) and Unordered Lists (in which each line begins with the same bullet shape or image).
Ordered list | Unordered List | Unordered List with CSS Style | ||
|
|
|
On this page we will discuss how to format unordered lists so they have a bit more style. We'll also show you how to use an image for bullet lists.
CSS Styles
There are several ways to format the style of your lists but they all use the same basic set of instructions. These are CSS (Cascading Style Sheet) instructions and they look like this:
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 2em;
These are just a small sample of the styles which are available. The ones above are common CSS styles and can be used anywhere there is text. There are also styles specific to lists, such as:
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: square;
When formatting a list, you can choose as many of these styles as you like. If you only need to use an image for the bullets, then that's the only style you choose. For this page we will use the following requirements to illustrate the methods:
- Set the font face to Verdana
- Set the font size to 12 pixels
- Set the background colour to grey
- Create a 6 pixel padding around the entire list
More formatting options will follow later.
Method 1: Universal Style
The simplest way to format your lists is to define a style which applies to all lists in the page. In the head of your web page, add the following code:
<style type="text/css">
ul { list-style-image: url("/images/arrow.gif") }
</style>
Syntax: list-style-type: <value>
Possible Values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Default Value: disc
Applies to: Elements with display value list-item
Inherited: Yes
Specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off
Syntax: list-style-image: <value>
Possible Values: <url> | none
Default Value: one
Applies to: Elements with display value list-item
Inherited: Yes
Replaces the marker specified in the list-style-type property.
Syntax: list-style-position: <value>
Possible Values: inside | outside
Default Value: outside
Applies to: Elements with display value list-item
Inherited: Yes
Takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented.
Example
|
The example on the right is the result of the style below. Note that both a list-style-type and list-style-type are defined - the arrow image is used unless it cannot be found or the user has image display disabled, in which case the list uses square bullets.
<style type="text/css">
ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 2em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #00CC33;
text-decoration: none;
background-color: #CCCCCC;
text-indent: 5px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: square;
padding: 6px;
margin: 2px;
}
</style>