Creating Lists

Unordered Lists

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li></ul>

Ordered Lists

<ol>
  <li>Head north on N Halsted St</li>
  <li>Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li></ol>

<ol start="30">
  <li>Head north on N Halsted St</li>
  <li>Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li></ol>

<ol>
  <li>Head north on N Halsted St</li>
  <li value="9">Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li></ol>

Description Lists

<dl>
  <dt>study</dt>
  <dd>The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books</dd>
  <dt>design</dt>
  <dd>A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd>
  <dd>Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object</dd>
  <dt>business</dt>
  <dt>work</dt>
  <dd>A person's regular occupation, profession, or trade</dd></dl>

Nesting Lists

<ol>
  <li>Walk the dog</li>
  <li>Fold laundry</li>
  <li>
    Go to the grocery and buy:    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </li>
  <li>Mow the lawn</li>
  <li>Make dinner</li></ol>

List Style Type Property

ul {
  list-style-type: square;}

Using an Image as a List Item Marker

li {
  background: url("arrow.png") 0 50% no-repeat;
  list-style-type: none;
  padding-left: 12px;}

List Style Position Property

ul {
  list-style-position: inside;}

Shorthand List Style Property

ul {
  list-style: circle inside;}ol {
  list-style: lower-roman;}

Horizontally Displaying List

Inline-Block Displaying List

li {
  display: inline-block;
  margin: 0 10px;}

Floating List

li {
  float: left;
  margin: 0 20px;}

Navigational List

<nav class="navigation">
  <ul>
    <li><a href="#">Profile</a></li><!--
    --><li><a href="#">Settings</a></li><!--
    --><li><a href="#">Notifications</a></li><!--
    --><li><a href="#">Logout</a></li>
  </ul></nav>

.navigation ul {
  font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-transform: uppercase;}
 
  .navigation li 
  {
      display: inline-block;
  }
  
  .navigation a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;}
  
  .navigation a:hover {
  background: #314b60;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);}
  
  .navigation li:first-child a {
  border-radius: 4px 0 0 4px;}
  
  .navigation li:last-child a {
  border-right: 0;
  border-radius: 0 4px 4px 0;}