CSS List Basics

CSS Basics – Part 5

CSS Course

Foreword: In this part of the series I show you how to change the numbering or alphabetic marking of an Ordered HTML List.

By: Chrysanthus Date Published: 15 Dec 2015

Introduction

This is part 5 of my series, CSS Basics. In this part of the series I show you how to change the numbering or alphabetic marking of an Ordered HTML List. I also show you how to change the bullet type of an Unordered HTML List.

HTML Elements concerned
In this part of the tutorials we are dealing with the OL and UL HTML elements. The elements to use in the CSS rule are OL for ordered list and UL for unordered list.

The list-style Property
You use the list-style property name in the CSS rule to achieve this. After the name, “list-style”, you type the colon, followed a value. For the case of the OL element, the value typed determines the numbering system or alphabetic system. For the case the of the UL element, the value typed determines the type of bullet. Hey, you can also use a small image as bullets – see below.

The OL Element
Here you can have a numbering system such as 1, 2, 3, 4, 5, etc. or i, ii, iii, iv, v, etc. You can alternatively have an alphabetic system (which is still a kind of numbering system) such as a, b, c, d, e, etc. or A, B, C, D, E, etc. Let us look at an example. Read and try the following:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        ol {list-style:lower-roman}
    </style>
</head>
<body>
    <ol>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
        <li>Item Five</li>
    </ol>
</body>
</html>

In the browser, the listed items have been numbered, i, ii, iii, iv and v.

Glyphs and the UL Element
Glyph means kind of bullet. A bullet might be a disk, circle or square. A bullet can also be a small image. Let us look at an example where the bullet is a circle. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        ul {list-style:circle}
    </style>
</head>
<body>
    <ul>
        <li>My Item</li>
        <li>Your Item</li>
        <li>His Item</li>
        <li>Love Item</li>
        <li>Her Item</li>
    </ul>
</body>
</html>

If you want a small image for the bullets, your property and value would be something like,

                 list-style:url('myImage.jpg')

The property name is “list-style” as expected and the value is “url('myImage.jpg')”. We have seen something similar before. The image is a small image at the server. The URL should be in quotes, either double or single. You can type either the complete URL or just the name of the image file; you type only the name of the image file if the image file is in the same directory as the HTML file at the server. Try the following bullet image example (use your own small image for this):

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        ul {list-style:url('myImage.jpg')}
    </style>
</head>
<body>
    <ul>
        <li>My Item</li>
        <li>Your Item</li>
        <li>His Item</li>
        <li>Love Item</li>
        <li>Her Item</li>
    </ul>
</body>
</html>

Alternatives
Wow, let us now look at the different options we have for numbering systems, alphabetic systems and glyphs before we leave this part of the series.

The CSS3 specification gives the following as values (and meanings) for different numbering systems:

Numbering System Values
decimal
Decimal numbers, beginning with 1.
decimal-leading-zero
Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
lower-roman
Lowercase roman numerals (i, ii, iii, iv, v, etc.).
upper-roman
Uppercase roman numerals (I, II, III, IV, V, etc.).
hebrew
Traditional Hebrew numbering.
georgian
Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
armenian
Traditional Armenian numbering.
cjk-ideographic
Plain ideographic numbers
hiragana
a, i, u, e, o, ka, ki, ...
katakana
A, I, U, E, O, KA, KI, ...
hiragana-iroha
i, ro, ha, ni, ho, he, to, ...
katakana-iroha
I, RO, HA, NI, HO, HE, TO, ...

The CSS3 specification gives the following as values (and meanings) for different alphabetic systems:

Alphabetic System Values
lower-latin or lower-alpha
Lowercase ascii letters (a, b, c, ... z).
upper-latin or upper-alpha
Uppercase ascii letters (A, B, C, ... Z).
lower-greek
Lowercase classical Greek alpha, beta, gamma, ... (έ, ή, ί, ...)

Glyphs
disc
This is a large round dot.
circle
This is a small circle.
square
This is a small filled (solid) square

Now, your customers’ browsers may never respect all of them. Hardly would you ever need all of them. If your browser cannot display any of the alternatives, it would choose one of them.

Let us take a break here and continue in the next part of the series.

Chrys

Broad Network

Related Articles

CSS List Basics

CSS Basics – Part 5

CSS Course

Introduction

Related Links

Comments