CSS Tutorial Lesson 23: Customising Lists

We have learned how to create ordered list and unordered list in HTML Tutorial Lesson 4, now we shall learn how to add styles to the lists using CSS properties related to lists.

1. The list-style-type property

The list-style-type allows us to control the style of the numbering for ordered lists and to control the shape of the bullet points for the unordered lists. For the ordered list, the values of the list-style-type properties are listed in the table below:

Values	Example
lower-roman	i,ii, iii,iv
upper-roman	I,II,III,IV
lower-alpha	a,b,c,d
upper-alpha	A,B,C,D
decimal	1,2,3,4
decimal-leading-zero	01,02,03,04

For the unordered lists, the values are none, disc(•), circle(o) and square(■)
The styles can be applied to

,
and
1. elements

Example 23.1

• Best sellers


• Science Fiction


• Thriller


• Romance

The Output

• Best sellers
• Science Fiction
• Thriller
• Romance

Example 23.2

1. Best sellers


2. Science Fiction


3. Thriller


4. Romance


5. Computer & Internet

The Output

1. Best sellers
2. Science Fiction
3. Thriller
4. Romance
5. Computer & Internet

Notice that the list-style-type value specified by the

element will override the list-style-type value specified by the

and the
elements.

23.2 The list-style-image  property
The list-style-image property let us specify an image to replace the bullet points. It is illustrated in the following example:
Example 23.2

• Best sellers


• Science Fiction


• Thriller


• Romance

23.3 The list-style-position property

The list-style-position specifies the position of the numbers or bullets appear on the outside  or inside of the list. Its values are inside and outside. It works for both unordered list and ordered list.
Example 23.3

• HTML stands for Hypertext Mark-up Language, the language of the World Wide Web. It is used to create web pages and build websites.


• CSS stands for Cascading Style Sheet. CSS allows web developers to specify the presentation of elements on a webpage separately from the structure of the documents.


• What is JavaScript?It is a scripting language that works with HTML to enhance web pages and make them more interactive.

The Output

• HTML stands for Hypertext Mark-up Language, the language of the World Wide Web. It is used to create web pages and build websites.
• CSS stands for Cascading Style Sheet. CSS allows web developers to specify the presentation of elements on a webpage separately from the structure of the documents.
• What is JavaScript?It is a scripting language that works with HTML to enhance web pages and make them more interactive.

If you change the unordered to ordered list by replacing ul with ol, you will obtain the following output:

1. HTML stands for Hypertext Mark-up Language, the language of the World Wide Web. It is used to create web pages and build websites.
2. CSS stands for Cascading Style Sheet. CSS allows web developers to specify the presentation of elements on a webpage separately from the structure of the documents.
3. What is JavaScript?It is a scripting language that works with HTML to enhance web pages and make them more interactive.

*Notice that the bullets and numbers lies inside the first line of the text. The default position is outside.