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;}