CSS Lists Properties
  • Share this blog:

CSS Lists

Lists are very helpful in conveying a set of either numbered or bulleted points. This tutorial teaches you how to control list type, position, style etc. using CSS There are following five CSS properties which can be used to control lists: The list-style-type Allows you to control the shape or appearance of the marker. The list-style-position specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker. The list-style-image specifies an image for the marker rather than a bullet point or number. The list-style serves as shorthand for the preceding properties. The marker-offset specifies the distance between a marker and the text in the list. Now we will see how to use these properties with examples.  

The list-style-type Property

The list-style-type properly 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. Here are the values which can be used for an unordered list :

Value Description
None NA
Disc(default) A filled-in circle
Circle An empty circle
Square A filled in square

Here are the values which can be used for an ordered list:

   Value 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
uppercase-roman Uppercase roman numerals i,ii,iii,iv,v
lower-greek The marker is lower-greek alpha,beta,gamma
lower-latin The marker is lower-latin a,b,c,d,e
upper-latin The marker is upper-latin A,B,C,D,E
Hebrew The marker is traditional Hebrew numbering  
Armenian The marker is traditional Armenian numbering  
Geogrian The marker is traditional Georgian numbering  
cjk-ideographic The marker is plain ideographic numbers  
hiragana The marker is hiragana a,i,u,e,o,ka,ki
Katakana The marker is katakana A,I,U,E,O,KA,XI
hiragana-iroha The marker is hiragana-iroha i,ro,ni,ho,he,to
katakana-iroha The marker is katakana-iroha I,RO,HA,NI,HA,HE,TO

  Here is the example: <ul style=”list-style-type:circle;”> <li>Maths</li> <li>Social science</li> <li>physics</li> </ul> <ul style=”list-style-type:square;” <li>Maths</li> <li>Social science</li> <li>Physics</li> </ul> <ol style=”list-style-type:decimal;”> <li> maths</li> <li>Social Science<li> <li>Physics</li> </ol> <ol style=”list-style-type:lower-alpha;”> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol syle=”list-style-type:lower-roman;”> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol>  

The list style position property

The list-style-position property indicates whether the marker should inside or outside of the box containing the bullet points. It can have one the two values

Value Description
None NA
Inside If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value oof outside.
Outside If the text goes onto a second line, the text will be alighned with the start of the first line(to the right of the bullet)


Here is the example

<ul style=”list-style-type:circle;” list-style-position:outside;”> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style=”list-style-type:square;list-style-position:inside;”> <li> Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style=”list-style-type:decimal;list-style-position:cutside;”> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style=”list-style-type:lower-alpha;list-style-position:inside;”> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol>  

CSS list-style-image property

The list-style-image allows you to specify an image so that can your own bullet style. The syntax is as follows, similar to the background-image property with the letters ril starting the value of the property followed by the URL in brackets. If it does not find given image then default bullets are used.

Here is the example

<ul> <li style=”list-style-image : url(/images/bullet.gif;)”> Maths</li> <li>Social science</li> <li>Physics</li> </ul> <ol> <li style=”list-style-image:url(/images/bullet.gif);”>Maths</li> <li>Social Science</li> <li>Physics</li> </ol>  

CSS list – style property

The list-style allows you to specify all the list properties into a single expansion. These properties can appear in any order. Here is the example. <ul style=”list-style:inside square;”> <li> Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style = “list-style: outside upper-alpha;”> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol>  

The marker-offset Property

The marker-offset property allows you to specify the distance between the markers and the text relating to that marker. Its value should be a length as shown in the following example: Unfortunately, however, this property is not supported in IE 6 or Netscape 7.

Here is the example

<ul style=”list-style: inside square; marker – offset:2em;”> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style=”list-style: outside upper-alpha; marker-offset:2cm;”> <li>Maths</li> <li>Social science</li> <li>Physics</li> </ol>

The CSS box Model

All HTML elements can be considered as boxes. In CSS, the term “box mode” is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of : margins, borders, padding,and the actual content. The box model allows us to place a boarder around elements and space elements in relation to other elements. The image below illustrates the box mode;   Screenshot_28

You liked the article?

Like : 0

Vote for difficulty

Current difficulty (Avg): Medium

Recommended Courses


About Author
Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.

Stay Updated

Get stories of change makers and innovators from the startup ecosystem in your inbox