Hello guys! morning and welcome to this new section of my tutorial on CSS, we have really gone a little bit far on CSS and i believe by now you all can do some few stuffs using CSS.
In my last tutorial post i talked about CSS margin and it various properties, now in this tutorial post i want to talk about CSS list.
NOTE: that CSS list is not too different from HTML List. The only difference is that CSS list has CSS style rules applied to it.
List are very helpful in conveying a set of either numbered or bulleted points. This tutorial teaches you how to control list type, position, style, etc., using CSS.
We have the following CSS properties, which can be used to control lists:
- The list-style-type allows you to control the shape and appearance of the marker.
- The list-style-position shows whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.
- The list-style-image specifies an image for the marker rather than a bullet point or number.
- The list-style serves as a shorthand for the proceding properties.
- The marker-offset specifies the distance between the marker and the text in the list.
Now lets take a look at how to use these properties with few examples.
The list-style-type Property
The list-style-type property allows you to control the shape or style of a bullet point (also known as a marker) in case of unordered lists and the style of numbering characters in ordered lists.
Below are the values, which can be used for an unordered list:
Value
|
Description
|
None
|
NA
|
disc (default)
|
A filled-in
circle
|
Circle
|
An empty
circle
|
Square
|
A filled-in
circle
|
Below are values, which can be used for an ordered list
Value
|
Description
|
Example
|
Decimal
|
Number
|
1,2,3,4,5,6,7
|
decimal-leading-zero
|
0 before the number
|
01, 02, 03, 04, 05
|
lower-alpha
|
Lowercase alphanumeric
characters
|
a, b, c, d, e, f
|
Upper-alpha
|
Uppercase alphanumeric
character
|
A, B, C, D, E, F
|
lower-roman
|
Lowercase Roman numerals
|
i, ii, iii, iv, v
|
upper-alpha
|
Uppercase alphanumeric
Characters
|
I, II, III, IV, V
|
lower-greek
|
The marker is lower-greek
|
alpha, beta, gamma
|
lower-latin
|
The marker is lower-latin
|
a, b, c, d, e, f
|
upper-latin
|
The marker is upper-latin
|
A, B, C, D, E, F
|
hebrew
|
The marker is traditional Hebrew
numbering
|
|
armenian
|
The marker is traditional Armenian
numbering
|
|
georgian
|
The marker is traditional Georgian
numbering
|
|
cjk-ideographic
|
The marker is plain ideographic
numbers
|
|
hiragana
|
The marker is hiragana
|
a, i, u, e, o, ka, ki
|
katakana
|
The marker is katakana
|
A, I, U, E, O, KA, KI
|
hiragana-iroha
|
The marker is hiragana-iroha
|
i, ro, ha, ni, ho, he, to
|
katakana-iroha
|
The marker is katakana-iroha
|
I, RO, HA, NI, HO, HE, TO
|
Here is an example below:
<html>
<head>
</head>
<body>
<ul style="list-style-type: circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type: square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type: decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type: lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type: lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
<head>
</head>
<body>
<ul style="list-style-type: circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type: square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type: decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type: lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type: lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
You can also read our tutorial post on: Html Tags
The list-style-position Property
The list-style-position property shows whether the marker should appear inside or outside of the box containing the bullet points. It can have one of the two values:
Value
|
Description
|
none
|
NA
|
inside
|
If the text goes onto a second line,
the text will wrap underneath the marker. It will also appear indented to
where the text would have started if the list had a value of outside.
|
outside
|
If the text goes onto a second line,
the text will be aligned with the start of the first line (to the right of
the bullet).
|
Here is an example below:
<html>
<head>
</head>
<body>
<ul style="list-style-type: circle; list-style-position: outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type: square; list-style-position: inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type: decimal; list-style-position: outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type: lower-alpha; list-style-position: inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
<head>
</head>
<body>
<ul style="list-style-type: circle; list-style-position: outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type: square; list-style-position: inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type: decimal; list-style-position: outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type: lower-alpha; list-style-position: inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
The list-style-image Property
The list-style-image allows you to specify an image so that you can use your own bullet style. The syntax is similar to the background image property with the letters url starting the value of the property followed by the URL in brackets. If it does not find the given image then default bullets are used.
Here is an example below:
<html>
<head>
</head>
<body>
<ul>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
<head>
</head>
<body>
<ul>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
You can also read our tutorial post on: Html Document structure
The list-style Property
The list-style allows you to specify all the list properties into a single expression. These properties can appear in any order.
Here is an example below:
<html>
<head>
</head>
<body>
<ul style="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ul>
<ol style="list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ol>
</body>
</html>
<head>
</head>
<body>
<ul style="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ul>
<ol style="list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ol>
</body>
</html>
You can also read our tutorial post on: Css Introduction
The marker-offset Property
The marker-offset property allows you to specify the distance between the marker and the text relating to the marker. Its value should be a length as shown in the following example:
Unfortunately, this property is not supported in IE 6 or Netscape 7.
Here is an example below:
<html>
<head>
</head>
<body>
<ul style="list-style: inside square; marker-offset: 2em;">
<li>Maths</li>
<li>Social Science</li> .
<li>Physic</li>
</ul>
<ol style="list-style: outside upper-alpha; marker-offset: 2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ol>
</body>
</html>
<head>
</head>
<body>
<ul style="list-style: inside square; marker-offset: 2em;">
<li>Maths</li>
<li>Social Science</li> .
<li>Physic</li>
</ul>
<ol style="list-style: outside upper-alpha; marker-offset: 2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physic</li>
</ol>
</body>
</html>
Alright guys! we have come to the end of this tutorial on CSS list, feel free to ask your questions in areas you don't understand very well, they will be attended to as soon as possible.
Like our facebook page and also subscribe with us to get our tutorial posts delivered directly to your emails.
You can follow us on twitter
You can also follow us on google+