Order, order!

by csswizardry

HTML

<ul id="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/clients/">Clients</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

<small>Order here is irrelevant here because I can click any link I want in any order</small>

<hr />

<ol id="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/about/product/">About our product</a></li>
</ol>

<small>Order here is relevant because this is the order of the content drilldown</small>

<hr />

<p>I need three things:</p>

<ul id="shopping-list">
    <li>Beer</li>
    <li>Bacon</li>
    <li>Crisps</li>
</ul>

<small>Here numbering is useful but not relevant; you could buy bacon first and beer last</small>

<hr />

<ol>
    <li>Open jar</li>
    <li>Pour contents into pan</li>
    <li>Heat for 15mins</li>
    <li>Eat</li>
</ol>

<small>Order here is relevant because you have to do things in a definite order</small>

<hr />

<p>There are four tasks remaining:</p>

<ul id="tasks">
    <li>Walk dog</li>
    <li>Wash car</li>
    <li>Make lunch</li>
    <li>Nap</li>
</ul>

<small>As shopping list, I guess&hellip;</small>

CSS

#shopping-list,
#tasks{
    list-style:decimal outside;
}