XHTML & CSS
Unordered lists

Unordered List - No Style

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>

How it looks in the browser
  • First Item
  • Second Item
  • Third Item

Unordered List - No Bullets

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<ul style="list-style-type: none">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>

How it looks in the browser
  • First Item
  • Second Item
  • Third Item

Unordered List - Disc

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<ul style="list-style-type: disc">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>

How it looks in the browser
  • First Item
  • Second Item
  • Third Item

Unordered List - Circle

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<ul style="list-style-type: circle">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>

How it looks in the browser
  • First Item
  • Second Item
  • Third Item

Unordered List - Square

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<ul style="list-style-type: square">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>

How it looks in the browser
  • First Item
  • Second Item
  • Third Item

Unordered List - Picture

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<ul style="list-style-image: url(images/arrows.png)">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>

How it looks in the browser
  • First Item
  • Second Item
  • Third Item

Unordered List - Inline

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<ul style="list-style-type: none;
display: inline;
padding: .2em 1em;">
<li style="list-style-type: none;
display: inline;
padding: .2em 1em;">First Item</li>
<li style="list-style-type: none;
display: inline;
padding: .2em 1em;">Second Item</li>
<li style="list-style-type: none;
display: inline;
padding: .2em 1em;">Third Item</li>
</ul>

How it looks in the browser
  • Item 1
  • Item 2
  • Item 3
Author - Alan Dunbar
Creative Commons Licence
Valid XHTML 1.0