Custom list by CSS and images

A little CSS can change the appearance of your pages by making lists attractive with graphics, at no cost.

Numbered list

The HTML code for the numbered list uses the <ol> tag:

<ol>
    <li><p>Google</p></li>
    <li><p>Bing</p></li>
    <li><p>Wolfram</p></li>
    <li><p>Alexa</p></li>
</ol>

In <li> tags, we have inserted a <p> tag in order to give the text a different style from that of the number.

So if you want to display big numbers in italic, but regular size to the text, we first redefine the <li> tags style:

#prettylist li
{
    font-size:20px;
    font-style:italic;
}

Then we redefine the <p> tag to return to the regular size and normal style:

#prettylist li p
{
    font-size:12px;
    font-style:normal;
}

The demonstration has graced the list by placing a <fieldset> with a background image, and rounded edges in some browsers.

Example of custom list with big digits...

A list with big digits on a background image inside a fieldset. The texts used here, search engines and their market shares are just examples.

Google
80% market share worldwide. Free Web applications.
Bing from Microsoft
10% market share. Highly priced desktop applications.
Wolfram Alpha
Less than 1%. Included in Bing.
Alexa
Less than 1%. Traffic comparator.

Other options

Using Roman numerals:

list-style-type:upper-roman;

Using letters:

list-style-type:upper-alpha;

Or lowercase:

list-style-type:lower-alpha;

It is possible also to insert the number or the bullet inside the text, rather than put it at left:

list-style:inside;

Example:

Google
80% market share worldwide. Free Web applications.
Bing from Microsoft
10% market share. Highly priced desktop applications.

See the W3C documentation for details.

Bullet list

Another option, for an unordered list, replace the bullets with images.

HTML code is simplified here because we can dispense with internal tags. The <ol> tag is replaced by the <ul> tag.
An identifier allows to customize the list without changing the rest of the page.

<ul id="imglist">
    <li>Google</li>
    <li>Bing</li>
    <li>Wolfram</li>
    <li>Alexa</li>
</ul>

The CSS code simply replaces the black circle which is the default image, by our vimage example:

#imglist li 
{
    list-style-image: url(images/cc-ok.png);
    font-size:16px;
}

Demonstration