Useful links pages are very popular on sites offering information services. It is a great way to offer a one stop portal for visitors interested in your site theme, and encourages visitor retention for the target audience. The article concepts can be used to provide help for other types of page lists. The focus here is on a list of links for a page that allows users to find related sites or categories lists for such a page.
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>