How to Use Letters and Roman Numerals in Numbered Lists (HTML/CSS Tutorial)

CSS to Switch to Letters of the Alphabet and Roman Numbers in Ordered Lists


How to Use Letters and Roman Numerals in Numbered Lists (HTML/CSS Tutorial)

by Christopher Heng, thesitewizard.com

I was asked by a visitor how he could use letters of the alphabet instead of the usual numbers in his ordered lists (that is, numbered lists, as opposed to those with bullet points) in HTML. You can't actually accomplish this with HTML per se, but it can be done with the help of a bit of CSS. I will also deal with how you can use Roman numerals.

Who Can Use This Tutorial?

I have tried to write the tutorial so that it is usable by both the non-technical webmaster or blogger as well as the person who knows HTML and CSS (and who merely wants to know the specific CSS property to modify).

Note though that I will assume you know how to access the HTML mode of your web editor, blog or CMS software (whichever you happen to use). That is, you will need to know how to switch your program so that you can enter raw HTML into your web page or blog. This is usually possible, even for blogs, where you are normally insulated from the underlying code. Since the method to do this varies from software to software, you will have to find out how to do this from your program's documentation. I have tutorials on how this can be done for some commonly-used web editors:

How to Use Letters of the Alphabet to Number a List

Let's take the underlying HTML for a list as an example.

<ol>
  <li>thesitewizard.com</li>
  <li>thefreecountry.com>/li>
  <li>howtohaven.com>/li>
</ol>

By default, if you don't create a specific set of styles for the web browser to use, it will display it using numbers, like so:

  1. thesitewizard.com
  2. thefreecountry.com
  3. howtohaven.com

The trick to making the browser use letters of the alphabet is to change the list-style-type property for the list. Every list has a set of properties that control how it is displayed by the browser. The aforesaid property tells the browser what to use to number the items in the list.

Let's say that we want to use the small (lowercase) letters of the alphabet to number the items. One way to do this is to change the list-style-type directly in the <ol> tag.

<ol style="list-style-type: lower-alpha;">
  <li>thesitewizard.com</li>
  <li>thefreecountry.com>/li>
  <li>howtohaven.com>/li>
</ol>

That is, modify the <ol> part of the code that precedes your list items so that it now says <ol style="list-style-type: lower-alpha;"> instead of <ol>.

With the above code, the list becomes:

  1. thesitewizard.com
  2. thefreecountry.com
  3. howtohaven.com

You can also make the browser use capital (ie, uppercase) letters. To do this, use upper-alpha instead of lower-alpha for the list-style-type property. That is, change <ol> to <ol style="list-style-type: upper-alpha;"> instead.

More Technical Information

(This section is for those who know some CSS. Feel free to skip it if you wish. If you are a non-technical webmaster or blogger, you already have all the information you need.)

If you want all your ordered lists to be numbered with small letters, you can insert the following into your style sheet.

ol { list-style-type: lower-alpha ; }

Alternatively, if you only want certain lists to use small letters, and others the default numerals, give the lists that need to be numbered with letters a class, and only set the list-style-type property for members of that class.

ol.usefulsites { list-style-type: lower-alpha ; }

With the above code, all lists in the "usefulsites" class will be numbered with small letters.

<ol class="usefulsites">
  <li>thesitewizard.com</li>
  <li>thefreecountry.com>/li>
  <li>howtohaven.com>/li>
</ol>

How to Use Roman Numerals for a List

Similarly, to use Roman numerals for a list, specify lower-roman (for small letters) or upper-roman (for capital letters) for the list-style-type property.

<ol style="list-style-type: lower-roman;">
  <li>thesitewizard.com</li>
  <li>thefreecountry.com>/li>
  <li>howtohaven.com>/li>
</ol>

For example, the code above will cause the list to be displayed as follows:

  1. thesitewizard.com
  2. thefreecountry.com
  3. howtohaven.com

Conclusion

The ability to use different types of numbering systems for your ordered lists is useful not just to accomodate different tastes, but it also helps when you have lists within lists and need a way to differentiate the sub-lists to avoid reader confusion (like in my article on access keys).

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Use Letters and Roman Numerals in Numbered Lists (HTML/CSS Tutorial)





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.