Search within TutorialsPark

CSS Lists


Use CSS to create Lists of multiple types according to style demands.


CSS List

1. Lists are broadly of two type

ordered-list : list items begin with numbers and characters.

unordered-list : List items begin with bullet points.

However there are various other details and variation that can be applied to List using CSS. We, learn them in detail one by one.


CSS List Markers: list-style-type Property

  1. HTML5
  2. CSS
  3. JAVASCRIPT
  4. JQUERY
  5. PHP

text-decoration:

1. CSS enables you change the marker(or bullet points) of list to various other types using list-style-type property.

2. The value of list-style-property can be:

Markers like box , georgian, circle, armenian, disk, dash, square or nothing using none.

decimal : decimal numbers for markers.

binary : Binary Numbers for Markers

lower-alpha : Lowercase alpha characters for Markers

upper-alpha : Uppercase alpha characters for Markers

See, the above demo to see all the types of list

Example: CSS List - list-style-type

Give it a TRY! » Note: CSS3 specifications removed the annoying blink value for text-decoration


CSS List Image Marker: list-style-image property

  1. HTML5
  2. CSS
  3. JAVASCRIPT
  4. JQUERY
  5. PHP

list-style-image:

1. Instead of a boring bullet as marker you can have your own custom image as a marker using CSS property of list-style-image property.

2. The value of list-style-image is the url location of the image to be used as a list bullet.

Example: CSS List Image Marker - list-style-type

Give it a TRY! » Note: Even more keywords which were part of CSS2 specification have been removed.


CSS List Marker's Position: list-style-position

  • HTML5
  • CSS
  • JAVASCRIPT
  • JQUERY
  • PHP

list-style-image:

1. The position of the list's marker relative to the box containing the list can be set using list-style-position property.

2. The value list-style-position can take are.

inside : The list marker is inside the content box.

outside : The list marker is outside the content box.

inherit : The list marker inherits property from the parent element.

Example:CSS Text Marker Position list-style-position

Give it a TRY! » Note: In practical usage the hanging indent(outside) is prefered over non-hanging indent(inside) .


CSS List ShortHand

1. The multiple list properties can be specified in one single declaration using CSS shorthand property.

Example: CSS List Style Shorthand

Give it a TRY! » Note: Use this property declare style quickly, but mind the order of properties.