Style Sheets for a Useful Links Page - Style Sheet 2 - Ordered List type
(Page 3 of 4 )
This works in a sequential manner either using letters or numbers. From the above examples, the usage would be:
<OL>
<LI>Good Guys
<LI>Bad Guys
<LI>Nobody cares
</OL>
This simply counts from 1 upwards so the output is:
Good Guys
Bad Guys
Nobody cares
For Roman numerals simply change the first line to:
<OL type="I">
We haven't exhausted our options yet; it can be customized further. Using the <LI> tag attributes, this can be done in a few extra ways. First, we shall add styles to the <LI> tag.
<HTML>
<HEAD>
<TITLE>Example of Roman Numerals</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> item 1,
<LI> item 2.
<LI> item 3.
</OL>
</BODY>
</HTML>
This will produce the result below.
(1) item 1.
(2) item 2
(3) item 3
Ordered lists can also be set to start from a certain number. Here, we shall start the list from the number 10:
<ol type="1" start="10">
<li>Item 10
<li>Item 11
<li>Item 12
</ol>It is also okay to start from any letter, like the letter X for example:<ol type="a" start="24">
<li>The 24th letter
<li>The 25th letter
<li>The 26th letter
</ol>Here is another example using a mixture of list style types and positions.
ol.links {
list-style-type: decimal;
list-style-position: outside;
}
ol.links ol {
list-style-type: lower-alpha;
ol.links li { font-style: italic; }
ol.links ol { font-style: normal; }
Place all that in the <STYLE> tags as usual, then add the <OL> lines to your code:
<ol class="links">
<li>People like web pages that are consistent</li>
<li>People like two other aspects of a useful links page
<ol>
<li>The Links are relevant to the content on the site</li>
<li>The Links are not dead links</li>
</ol></li>
</ol>
Next: Tricks with Lists >>
More Style Sheets Articles
More By Stephen Davies
