CSS Lists
Ordered lists are lists in which each item is numbered or labeled with a counter of some kind (like letters or roman numerals). Unordered list are often referred to as bulleted lists. Instead of being numbered, each element in the list has the same marker. CSS list properties are:
- list-style-type
- list-style-image
- list-style-position
- list-style
👉list-style-type
There are two ways to change the numbering style: the CSS property list-style-type, and the type attribute, which is obsolete in HTML5. If you are creating a new ordered list, you should always use the CSS property. Used to specify the numbering style for the list. valid values are:
- decimal (1, 2, 3, 4, and so on)
- lower-alpha (a, b, c, d, and so on)
- upper-alpha (A, B, C, D, and so on)
- lower-roman (i, ii, iii, iv, and so on)
- upper-roman (I, II, III, IV, and so on)
- disc (A disc or bullet; this style is the default)
- square (Obviously, a square rather than the disc)
- circle (As compared with the disc, which most browsers render as a filled circle, this value should generate and unfilled circle)
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS List Property </title>
<style>
ol{
list-style-type: lower-roman;
}
ul{
list-style-type: square;
}
</style>
</head>
<body>
<p> Ordered List Example </p>
<ol>
<li> CPU </li>
<li> Monitor </li>
<li> Keyboard </li>
<li> Mouse </li>
</ol>
<p> Unordered List Example </p>
<ul>
<li> Home </li>
<li> About </li>
<li> Contact us </li>
<li> Services </li>
</ul>
</body>
</html>
👉list-style-image
If you don't like any of the bullet style used in unordered lists, you can substitute an image of your own choosing in place of them. To do so, use the list-style-image property. The value is:
- URL (any image url)
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS List Property </title>
<style>
ol{
list-style-image: url('right-arrow.png' / any url);
}
</style>
</head>
<body>
<p> Some fruits name </p>
<ol>
<li> Apple </li>
<li> Banana </li>
<li> Mango </li>
<li> Orange </li>
</ol>
</body>
</html>
👉list-style-position
Defines the alignment of lines of text in list items after the first. When items are formatted in a list and the list item spans more than one line, the lines of text that follow the first are aligned with the beginning of the text on the first line. If you prefer that they begin at the position of the bullet or list number, use the list-style-position property. Valid values are:
- inside
- outside
Example - 1
<!DOCTYPE html>
<html>
<head>
<title> CSS List Property </title>
<style>
ul{
list-style-position: inside;
}
ul > li{
border: 1px solid black;
}
</style>
</head>
<body>
<p> Some flowers name </p>
<ul>
<li> Rose </li>
<li> Lotus </li>
<li> Marigold </li>
<li> Sunflower </li>
</ul>
</body>
</html>
Example - 2
<!DOCTYPE html>
<html>
<head>
<title> CSS List Property </title>
<style>
ul{
list-style-position: outside;
}
ul > li{
border: 1px solid black;
}
</style>
</head>
<body>
<p> Some flowers name </p>
<ul>
<li> Rose </li>
<li> Lotus </li>
<li> Marigold </li>
<li> Sunflower </li>
</ul>
</body>
</html>
👉list-style
Enables you to set multiple list properties at once: list-style-type, list-style-position, and the URL of the bullet style. This property just shortcut for use if you to manipulate several of the list-related properties simultaneously.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS List Property </title>
<style>
ol{
list-style: square inside url('right-arrow.png');
}
ul{
list-style: circle inside url('right-arrow.png')
}
</style>
</head>
<body>
<p> System software example </p>
<ol>
<li> macOS </li>
<li> GNU/Linux </li>
<li> Android </li>
<li> Microsoft </li>
</ol>
<p> Application software example </p>
<ul>
<li> Word processing </li>
<li> Spreadsheet </li>
<li> Database </li>
<li> Multimedia </li>
</ul>
</body>
</html>
NOTES.....
CSS properties specially associated with lists, but lists can be also be styled using properties that apply to any block-level element, like lists and lists items.