HOLLA TECH - LEARN

The list-style-type Property
 

The CSS list properties allow us to set different list item markers. In HTML, there are two types of lists:
unordered lists (<ul>) – the list items are marked with bullets
ordered lists (<ol>) – the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
One of the ways is to use the list-style-type property, which can be set to circle, square, decimal, disc, lower-alpha, etc.

The HTML: 

<ol class=“lower-alpha”>
   <li>Red</li>
   <li>Green</li>
   <li>Blue</li>
</ol>
<ul class=“circle”>
   <li>Red</li>
   <li>Green</li>
   <li>Blue</li>
</ul>
<ul class=“square”>
   <li>Red</li>
   <li>Green</li>
   <li>Blue</li>
</ul>

 

The CSS: 

ol.lower-alpha {
  list-style-type: lower-alpha;
}
ul.circle {
  list-style-type: circle;
}
ul.square {
   list-style-type: square;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
Some of the values are for unordered lists, and some for ordered lists.

The List Image and Position
 

There are also other list properties, such as:
list-style-image – specifies an image to be used as the list item marker.
list-style-position – specifies the position of the marker box (inside, outside).

In the example below, we use an image as the list item marker, and specify the position to be inside of the content flow.

The HTML: 

<p>The following list has list-style-position: <strong>inside</strong>.</p>
<ul>
   <li>Red</li>
   <li>Green</li>
   <li>Blue</li>
</ul>

 

The CSS: 

ul {
   list-style-image: url(“logo.jpg”);
   list-style-position: inside;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
“list-style-position: outside” is the default value.

The list-style Property
 

The list-style property is a shorthand property for setting list-style-type, list-style-image and list-style-position. It is used to set all of the list properties in one declaration:

ul {
   list-style: square outside none;
}

 

This would be the same as the longhand version.

ul {
   list-style-type: square;
   list-style-position: outside;
   list-style-image: none;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
If one of the property values are missing, the default value for the missing property will be inserted, if any.

BACK TEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT