Home arrow Style Sheets arrow Page 3 - Style Sheets for a Useful Links Page
STYLE SHEETS

Style Sheets for a Useful Links Page


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.

Author Info:
By: Stephen Davies
Rating: 3 stars3 stars3 stars3 stars3 stars / 5
October 24, 2007
TABLE OF CONTENTS:
  1. · Style Sheets for a Useful Links Page
  2. · Style Sheet 1 - Unordered List type
  3. · Style Sheet 2 - Ordered List type
  4. · Tricks with Lists

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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:

  1. Good Guys

  2. Bad Guys

  3. 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>


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials