BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
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).
- CSS Styles for Specific HTML Tags
- Block Elements (Heading, Div and Paragraph Tags)
- Inline Tags - Span, Em and Strong
- Styling Images - the IMG Tag
- Styles for Ordered and Unordered Lists - ul, ol and li (this blog)
- Hyperlinks (the A Tag)
- Table Styles
- Setting CSS for Other Tags in HTML
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 corresponding HTML|
By contrast, an ordered list uses an ol tag instead of a ul tag:
|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:
This would produce the following bullets:
The bullet points are upper case letters.
You can achieve some clever effects by applying CSS to lists – here’s an example:
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):
The menu is based on a simple unordered list, using the top-nav style.
Here's the CSS to make this work:
.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.