CSS

Creating List with CSS :(CSS Tutorials : part-12)

Written by Taj12

The list is a very important topic of HTML. It is used for menu or other navigation, display list item, etc. There are two kinds of list markup ordered list and unordered list. The <ul> tag is for unordered list and the <ol> tag for ordering list. You can design that list with the help of CSS. Displaying a list in a web page also an art of CSS.

The CSS has three properties to design list and hey are

  •  list-style-type
  •  list-style-image
  •  list-style-position

The list-style-type property:

The list-style property is used for giving various shapes or number in front of the list. It is for both ordered list and unordered list. This property receives some values:

disc, circle, square, decimal, decimal-leading-zero, lower-roman,

upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, none

Some of these values are worked for the unordered list and some are for the ordered lists.

The unordered list style:

The list-style-type property receives only disc, circle, square and none values as list bullets. The disc value is the primary value of this property.

Example:

Ouput:

The ordered list style:

The list-style-type property receives decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, none as a list bullet. The primary value of this property is decimal.

You should remember that all values are not supported in all browsers. The   lower-greek, lower-latin, upper-latin, armenian, Georgian values are not browser friendly. So you should avoid these values.

Example:

Ouput:

The list-style-image property:

Some time you need to design bullets for the increasing beauty of the list. You can add a custom image and the list-image-property gives you the opportunity to add a picture as a list bullet. This property simply receives a URI or none as a value.

Example:

  Output:

Creating list with css with dotsThe list-style-position property:

The list-style-position property specifies the position of the list. It receives two values: inside and outside.  You can specify a list item inside or outside by using this property.

Example:

The example shows an inside and outside positioned list by marking up with color.

Output:

The shorthand property of the list:

Declaration format:

List-style: list-style-type list-style-position list-style-image

About the author

Taj12

2 Comments

  • Very good info. Lucky me I discovered your website by
    chance (stumbleupon). I have saved it for later!

Leave a Comment