CSS Tutorial (CSS Lists)
CSS Lists Property -bittutech

CSS Tutorial (CSS Lists)

In CSS tutorial, this topic (CSS Lists) have its own special place and their meanings in the CSS. In other words, CSS Lists property contains many sub-properties and its great advantages. So, now we will read and learn those properties to know a bit more in CSS. We can also apply those properties to set with customized styles. Let’s begin to start one by one CSS Lists property.

Define briefly 5 CSS Lists sub-property

We will discuss 5 CSS sub-properties. From which we can apply different-different styles on the HTML Page. In this CSS Tutorial, we can learn various things about lists styles to know how to apply right CSS Lists styles in the right place.

5 CSS Lists Sub-Properties

  • The list-style-type allows you to control the shape or appearance of the marker.
  • The list-style-position allows you to control the section and sub-section of the lists.
  • The list-style-image allows you to control the image with a list point rather than bullet or numbering of the list point.
  • The list-style allows you to control the all sub-list-styles property’s value in single style property’s value.
  • The marker-offset property is used to control the distance between the marker and text in the list.

Don’t worry about it because we will provide more information with example of all CSS Lists properties.

Define CSS Lists Properties with their Suitable Examples

The CSS List-Style-Type Property

The List-style-type property allows you to control the shape or style of the bullet point in the case of unordered list and the style of numbering characters in the case of ordered lists.

Here are the values which can be used for an unordered lists.

Sr.No.Value & Description
1none NA
2disc (default) – A filled-in circle
3circle – An empty circle
4square – A filled-in square
Unordered List-style-Type values

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

ValueDescriptionExample
decimalNumber1,2,3,4,5
decimal-leading-zero0 before the number01, 02, 03, 04, 05
lower-alphaLowercase alphanumeric charactersa, b, c, d, e
upper-alphaUppercase alphanumeric charactersA, B, C, D, E
lower-romanLowercase Roman numeralsi, ii, iii, iv, v
upper-romanUppercase Roman numeralsI, II, III, IV, V
lower-greekThe marker is lower-greekalpha, beta, gamma
lower-latinThe marker is lower-latina, b, c, d, e
upper-latinThe marker is upper-latinA, B, C, D, E
hebrewThe marker is traditional Hebrew numbering 
armenianThe marker is traditional Armenian numbering 
georgianThe marker is traditional Georgian numbering 
cjk-ideographicThe marker is plain ideographic numbers 
hiraganaThe marker is hiraganaa, i, u, e, o, ka, ki
katakanaThe marker is katakanaA, I, U, E, O, KA, KI
hiragana-irohaThe marker is hiragana-irohai, ro, ha, ni, ho, he, to
katakana-irohaThe marker is katakana-irohaI, RO, HA, NI, HO, HE, TO
Ordered List Style Type Example

Example – CSS List style type Example.

<html>
<head>
<title>
CSS List style type Property Example.
</title>
<style>
#na
{
   list-style-type:none;
}
#dsc
{
  list-style-type:disc;
}
#Crc
{
   list-style-type:circle;
}
#sqr
{
   list-style-type:square;
}
</style>
</head>
<body>
<ul>
<li id="na">None Value Example</li>
<li id="dsc">Disc Value Example</li>
<li id="Crc">Circle Value Example</li>
<li id="sqr">Square Value Example</li>
</ul>
</body>
</html>
CSS List-Style-Type Property Example
CSS List-Style-Type Property Example

The CSS List-style-position Property

This Property shows that the marker of list is defined inside or outside of the box containing the bullet points.

Example.

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-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-stlye-position:outside;">
         <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>
   </body>
</html> 
CSS List Style Position Property - bittutech
CSS List Style Position Property Example

The CSS List-Style-Image Property

This property is used to apply the image rather than bullets and numbering in place of markers.If it does not find the given image then default bullets are used.

Example –

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(https://bittutech.com/icons8_facebook_16/);">Facebook</li>
         <li>Simple bullet</li>
         <li>Simple bullet</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(https://bittutech.com/icons8_instagram_new_16/);">Instagram</li>
         <li>Simple bullet</li>
         <li>Simple bullet</li>
      </ol>
   </body>
</html> 
CSS List Style Image Property -bittutech
CSS List Style Image Property

The list-style Property

The list-style allows you to specify all the list properties into a single expression. These properties can appear in any order.

Here is an example −

<html>
   <head>
   </head>
   
   <body>
      <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>
   </body>
</html> 

It will produce the following result −

CSS Shorthand List Style Property -bittutech
CSS Shorthand List Style Property

The marker-offset Property

The marker-offset property allows you to specify the distance between the marker and the text relating to that marker. Its value should be a length as shown in the following example −

Unfortunately, this property is not supported in IE 6 or Netscape 7.

Here is an example −

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside circle; 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>
   </body>
</html>

This will provide following result.

CSS List Style Marker Offset Property -bittutech
CSS List Style Marker Offset Property

Share post

Prajjwal Singh

Tech Blogger || Web developer || Computer Networking Enthusiast || Microsoft SQL Database Management Expert || Software Debugger || Learned DOS OS Structure

Leave a Reply