How to create styles for HTML tags using CSS
Part five of an eight-part series of blogs

This is the second of a three-part online training series of blogs on CSS style sheets.  This blog shows how to create styles for specific HTML tags (the first part covers the principles of CSS style sheets, and the third part gives a worked example of CSS).

  1. CSS Styles for Specific HTML Tags
  2. Block Elements (Heading, Div and Paragraph Tags)
  3. Inline Tags - Span, Em and Strong
  4. Styling Images - the IMG Tag
  5. Styles for Ordered and Unordered Lists  - ul, ol and li (this blog)
  6. Hyperlinks (the A Tag)
  7. Table Styles
  8. Setting CSS for Other Tags in HTML

This blog is part of a larger online ASP.NET online tutorial series.  We also run classroom-based ASP.NET training courses.

Posted by Andy Brown on 16 May 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Styles for Ordered and Unordered Lists  - ul, ol and li

There are two types of lists in HTML: ordered and unordered.  By default these appear as numbered or bulleted lists, but you can use CSS creatively to turn lists into horizontal or vertical menus, and much more.

The Two Types of LIst in HTML

Here's an example of an unordered list:

An unordered list The HTML for the list
An unordered list The corresponding HTML

By contrast, an ordered list uses an ol tag instead of a ul tag:

An ordered list The HTML for an ordered list
An ordered list The corresponding HTML


The List Style

One of the attributes of a list is the list-style, which controls whether a list appears bulleted, numbered, etc.  Consider this simple style:



list-style: upper-alpha;


This would produce the following bullets:

A lettered list

The bullet points are upper case letters.


Styling Lists

You can achieve some clever effects by applying CSS to lists – here’s an example:

The Wise Owl website menu

The Wise Owl website menu (at the time of writing).

The HTML for the menu above looks like this (only part of it is shown):

HTML for menu

The menu is based on a simple unordered list, using the top-nav style. 

Here's the CSS to make this work:






background:url(images/bg-nav.gif) repeat-x;





.top-nav li




.top-nav li a



padding:0 15px 2px;






.top-nav li a:hover






The style sets the menu to a 711 x 23 pixel rectangle, with a coloured background (the picture file bg-nav.gif is not shown here).   Any list items within this style float on the left (so that they build up from the left-hand side of the web page).  Hyperlinks within list items (ie the menu items themselves) also float on the left, with white colour, large font size and 15 pixels padding to the right of each item). 

What this example shows is that CSS lists are perhaps best left to professionals.  You can see much more about using list styles here.

This blog has 0 threads Add post