CSS List Basics
CSS Basics – Part 5
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
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:
In the browser, the listed items have been numbered, i, ii, iii, iv and v.
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:
If you want a small image for the bullets, your property and value would be something like,
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):
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 numbers, beginning with 1.
Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
Lowercase roman numerals (i, ii, iii, iv, v, etc.).
Uppercase roman numerals (I, II, III, IV, V, etc.).
Traditional Hebrew numbering.
Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
Traditional Armenian numbering.
Plain ideographic numbers
a, i, u, e, o, ka, ki, ...
A, I, U, E, O, KA, KI, ...
i, ro, ha, ni, ho, he, to, ...
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).
Lowercase classical Greek alpha, beta, gamma, ... (έ, ή, ί, ...)
This is a large round dot.
This is a small circle.
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.
Related LinksBasics of HTML 5
Basics of ECMAScript
HTML DOM Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course