3.4 KiB

Raw Blame History

title
Lists

Lists

Lists are used to display items. There are 3 types of lists: ordered lists, unordered lists, and description lists.

Ordered lists

An ordered list is used to describe an ordered collection of data. Browsers usually display an ordered list as a numbered list. Create an ordered list using the <ol> tag.

Unordered lists

An unordered list is used to describe an unordered collection of data. Browsers usually display an unordered list as a bulleted list. Create an unordered list using the <ul> tag.

List items

The direct children of ordered and unordered lists must be list items. Each list item is wrapped in an <li> tag. A list item tag can contain flow content.

Examples

An ordered list is written as

<ol>
  <li>January</li>
  <li>February</li>
  <li>March</li>
</ol>

and is displayed as:

January
February
March

An unordered list is written as

<ul>
  <li>Macintosh</li>
  <li>Fuji</li>
  <li>Gala</li>
</ul>

and is displayed as:

Macintosh
Fuji
Gala

Styling Lists

Ordered and unordered lists can have different list item markers. The default numbering system in ordered list can be changed to lowercase or uppercase roman numerals, as well as lowercase or uppercase alphabetical. The start of the list can be changed from the default value of 1. In an unordered list, different list markers can be used like the disc, circle, square etc.

Styling Ordered List:

ol {
  list-style-type: upper-roman; 
  }

Styling Unordered List:

ul {
  list-style-type: square; 
  }

Styling Bulletpoints

An ordered list can be used for a variety of functions and in a number of styles. Since changing the encompassing tag colors doesn't change the color of the bullets themselves, you can style them by first removing the traditional black bullets and inserting your own:

Remove bullets:

ul {
  list-style: none; 
  }

Insert your own:

ul li::before {
  content: "\2022";
  color: orange;
  display: inline-block;
  width: 1em;
  }

The content style adds a new bulletpoint while display and width style create a space between the bullet and the word. Regular font styles can apply here if you would like to make the bullet larger or bolder. Images can also be used as list item markers.

Images as list item markers:

ul {
    list-style-image: url('rock.png');
  }

Description lists

A description list is a list of terms, with a description of each term. A description list is made using the <dl> tag. Each item in the list is made up of two tags: a term <dt>, and a description of that term <dd>. They are called definition lists in HTML 4.

Here is an example of a description list:

<dl>
  <dt>Programming</dt>
  <dd>The process of writing computer programs.</dd>
  <dt>freeCodeCamp</dt>
  <dd>An awesome non-profit organization teaching people how to code.</dd>
</dl>

which would end up looking like:

Programming: The process of writing computer programs.
freeCodeCamp: An awesome non-profit organization teaching people how to code.

More Information:

HTML lists on w3schools

3.4 KiB Raw Blame History