List

CSS provides a few properties to control list type, position, style, etc.

List Style Type

The list-style-type property allows to control the shape or appearance of the marker.

list-style-type
Syntax:  list-style-type:: value;
Values: none | circle | square | disc | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-Latin | upper-Latin | lower-roman | upper-roman | lower-Greek
Default: disc
Applies to: ul, ol and li
Inherits: yes

Example
ol {list-style-type: uppercase;}
List Style Position

The list-style-position property determines the marker is placed in regard to the list item.

list-style-position
Syntax:  list-style-position: value;
Values: inside | outside | hanging
Default: outside
applies to: ol, ul and li
Inherits: yes

Example
ul {list-style-position: inside;}
List Style Image

The list-style-image property specifies an image for the marker rather than a bullet point or number.

list-style-image
Syntax: list-style-image: value;
Values: url(location)|none
Default: none
Applies to: ul,ol and li
Inherits: yes

Example
ul {list-style-image: url(img.gif);}
List Style

The list-style property is shorthand for the type, position and image properties.

list-style
Syntax:
 list-style: value;
Values: url(location)
Default: not defined
Applies to: ul, ol and li
Inherits: yes

Example
ul {list-style: lowercase inside;)

Leave a Reply