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
Table of Contents
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 |
|---|---|
| 1 | none NA |
| 2 | disc (default) – A filled-in circle |
| 3 | circle – An empty circle |
| 4 | 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 |
| upper-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 | |
| georgian | 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, KI |
| hiragana-iroha | The marker is hiragana-iroha | i, ro, ha, ni, ho, he, to |
| katakana-iroha | The marker is katakana-iroha | I, RO, HA, NI, HO, HE, TO |
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>
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>
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>
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 −
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.
