Types of HTML lists

1. Unordered list <ul> (bulleted)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

2. Ordered list <ol> (numbered)

Attributes: type (1, A, a, I, i), start, reversed.

<ol type="1">
  <li>Design</li>
  <li>Develop</li>
  <li>Deploy</li>
</ol>

3. Description (definition) list <dl>

<dt> is the term and <dd> is its description.

<dl>
  <dt>HTML</dt>
  <dd>Markup language for web pages</dd>
  <dt>CSS</dt>
  <dd>Language for styling pages</dd>
</dl>

Lists can also be nested by placing a <ul> or <ol> inside an <li>.

Applying CSS: colour, font size, list style

<!DOCTYPE html>
<html>
<head>
<style>
  /* unordered list */
  ul.tech {
    color: darkblue;            /* text colour */
    font-size: 18px;            /* font size */
    list-style-type: square;    /* bullet style */
  }

  /* ordered list */
  ol.steps {
    color: crimson;
    font-size: 20px;
    list-style-type: upper-roman;   /* I, II, III */
  }

  /* description list */
  dl dt { color: green; font-size: 19px; font-weight: bold; }
  dl dd { color: #555;  font-size: 16px; }

  /* no bullets, e.g. for menus */
  ul.plain { list-style-type: none; padding: 0; }
</style>
</head>
<body>
  <ul class="tech">
    <li>HTML</li><li>CSS</li><li>JavaScript</li>
  </ul>

  <ol class="steps">
    <li>Design</li><li>Develop</li><li>Deploy</li>
  </ol>

  <dl>
    <dt>HTML</dt><dd>Markup language</dd>
  </dl>
</body>
</html>

Useful list-style-type values

For	Values
ul	disc, circle, square, none
ol	decimal, lower-alpha, upper-alpha, lower-roman, upper-roman

Other helpers: list-style-image: url(icon.png) for custom bullets and list-style-position: inside | outside.