Chapter 10 - What are Lists in CSS?

There are two types of lists in HTML coding but you can control its appearance with the help of CSS Style Sheet. You can do this in one declaration with css. Actually you can control the style of ordered and un-ordered list with style sheet.

2 Types of Lists

1. Ordered List
2. Un-Ordered List

Examples of ordered list are as follows:-

1,2,3,4,5,6,7...and so on

a,b,c,d,e...and so on

i, ii, iii, iv, v...and so on

I, II, III, IV, V...and so on

A, B, C, D, E...and so on

Above 5 are examples of ordered list and can be modified with the help of style sheet coding.

Examples of ordered list are as follows:-

o, >, *,#... and so on are the examples of un-ordered list. You can control the list style and set to none if not required with the element of list.

List Style

There are 3 values to control the list style:-

1. Image
2. Position
3. Type

You can control list style individually as showing in below syntax:- 

Example for List Style:-

 /* Syntax of List Style in CSS*/

 list-style:value;
 

List Type

Did you know that you can use an image for the bullet of unordered lists with the list-style property?

Example for List Style Type:-

 /* Syntax of List Type in CSS*/


 list-style-image:url(myimage.jpg);

List Style Position

The control of list position is in your hands. If you are using List Style Position in style sheet coding.

There are 2 values of list style position:-

1. Inside
2. Outside
   

Example for List Style Position:-

 /* Syntax of List Position in CSS*/

 list-style-position:value;

List Style Type

The control of ordered and unordered list can be controlled with the help of list-style-type in css coding.

There are 9 values of list style type:-

1. None
2. Disc
3. Circle
4. Square
5. Decimal
6. Lower Roman
7. Upper Roman
8. Lower Alpha
9. Upper Alpha
   

Example for List Style Type:-

 /* Syntax of List Style Type in CSS*/

 list-style-type:value;

NOTE:- For proper use of List Style Type Properties, read posts on each topic in the next section of this blog.