Students Empire

Learn Something New


you learned how to use the < ul > and < li > elements to create lists with bullet points (also known as unordered lists) and the < ol > and < li > elements to create numbered (or ordered) lists.

name Description
list-style-type Allows you to control the shape or appearance of the marker
list-style-position When a list item takes up more than one line, this property specifies where the marker should appear in relation to the text.
list-style-image Specifies an image for the marker rather than a bullet point or number.
list-style Serves as shorthand for the preceding properties.
marker-offset Specifies the distance between a marker and the text in the list.

The list-style-type Property

The list - style - type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists and the style of numbering characters in ordered lists.

The table that follows shows the standard styles for an unordered list.

name Description
none None
disc (default) A filled-in circle
circle An empty circle
square A filled-in square

name Description Example
decimal Number 1, 2, 3, 4, 5
decimal-leading-zero 0 before the number 01, 02, 03, 04, 05
lower-alpha Lowercase alphanumeric characters a, b, c, d, e
upper-alpha Uppercase alphanumeric characters A, B, C, D, E
lower-roman Lowercase Roman numerals i, ii, iii, iv, v
upper-roman Uppercase Roman numerals I, II, III, IV, V

The list - style - type property can either be used on the < ul > and < ol > elements or on the individual < li > elements.

            li.a {list-style-type:none;}
        li.b {list-style-type:disc;}
        li.c {list-style-type:circle;}
        li.d {list-style-type:square;}
        li.e {list-style-type:decimal;}
        li.f {list-style-type:lower-alpha;}
        li.g {list-style-type:upper-alpha;}
        li.h {list-style-type:lower-roman;}
        li.i {list-style-type:upper-roman;}

The list - style - position Property

the list - style - position property indicates whether the marker should appear inside or outside of the box containing the main points. There are two values for this property.

name Description
inside The marker is inside the block of text (which is indented).
outside The marker sits to the left of the block of text (this is the default value if this is not specified).

          ul {list-style-position:outside;}
        ol {list-style-position:inside;}

The list - style - image Property

The list - style - image property allows you to specify an image so that you can use your own bullet style. The syntax is similar to the background - image property; the value starts with the letters url and is followed by the URL for the image in brackets and quotation marks

li {list-style-image: url("image.jpg");}

If the image cannot be displayed, the browser should just display a dot rather than a broken image symbol.

The list - style Property (the Shorthand)

The list - style property is a way of expressing more than one of these properties at once.

ul {list-style: inside circle;}

Remember that you can also set the border , padding , and margin properties for <ul> , <ol> , <li> , <dl> , <dt> , and <dd> elements, as each element has its own box in CSS.