CSS Lists
Various CSS properties can be used to control lists. Lists can be categorized as ordered lists and unordered lists. Ordered lists consist of list items marked with alphabet and numbers, while unordered lists consist of list items marked with bullets.
You can style the lists by using CSS. With the CSS list properties, we can:
- Specify the distance needed between the text and the marker on the list.
- Set the image for the marker rather than using numbers or bullet points.
- Take control of the marker's appearance and shape.
- Put the marker outside or inside the box containing the list of items.
- Set background colors to list items and lists.
Below are the CSS properties to style the lists:
- List-style-type: This property is used to control the appearance and shape of the marker.
- List-style image: This property sets an image for the marker rather than numbers or bullet points.
- List-style-position: This property specifies the marker's position.
- List-style: This property is the shorthand property of all the previous properties.
- Marker-offset: This property is used to specify the distance needed between the text and the marker. It is not supported in IE6 or Netscape 7.
The List-style-type Property
Ordered lists are usually numbered with Arabic numbers (1, 2, 3, etc.) Unordered lists are marked by bullet points. This property can change the default list type of marker to an alternative type, such as a square circle, roman numerals, Latin letters, etc. If the value is set to none, it removes the markers/bullets.
Do note that the list also includes the default padding and margin. For you to remove this, you will need to add padding:0 and margin:0 to <ol> and <ul>.
Observe the following example:
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists Example</title>
<style>
.num{
list-style-type:decimal;
}
.alpha{
list-style-type:lower-alpha;
}
.roman{
list-style-type:lower-roman;
}
.circle{
list-style-type:circle;
}
.square{
list-style-type:square;
}
.disc{
list-style-type:disc;
}
</style>
</head>
<body>
<h1>
Welcome to Techstack Academy
</h1>
<h2>
Ordered Lists
</h2>
<ol class="num">
<li>IntermediateOne</li>
<li>Experience Two</li>
<li>Senior Three</li>
</ol>
<ol class="alpha">
<li>IntermediateOne</li>
<li>Experience Two</li>
<li>Senior Three</li>
</ol>
<ol class="roman">
<li>IntermediateOne</li>
<li>Experience Two</li>
<li>Senior Three</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="disc">
<li>IntermediateOne</li>
<li>Experience Two</li>
<li>Senior Three</li>
</ul>
<ul class="circle">
<li>IntermediateOne</li>
<li>Experience Two</li>
<li>Senior Three</li>
</ul>
<ul class="square">
<li>IntermediateOne</li>
<li>Experience Two</li>
<li>Senior Three</li>
</ul>
</body>
</html>
The List-style-position Property
This property controls the marker's appearance inside or outside the bullet points box. It has two values.
Inside: The bullet points will be in the list item. This means that if the text goes on the second line, the text will be wrapped under the marker.
Outside: Bullet points appear outside list items. This is the default value.
Observe the following example.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists Example</title>
<style>
.num{
list-style-type:decimal;
list-style-position:inside;
}
.roman{
list-style-type:lower-roman;
list-style-position:outside;
}
.circle{
list-style-type:circle;
list-style-position:inside;
}
.square{
list-style-type:square;
}
.disc{
list-style-type:disc;
list-style-position:inside;
}
</style>
</head>
<body>
<h1>
Welcome to Techstack Academy
</h1>
<h2>
Ordered Lists
</h2>
<ol class="num">
<li>INSIDE</li>
<li>Junior School One</li>
<li>Intermediate School Two</li>
</ol>
<ol class="roman">
<li>OUTSIDE</li>
<li>Junior School One</li>
<li>Intermediate School Two</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="disc">
<li>INSIDE</li>
<li>Junior School One</li>
<li>Intermediate School Two</li>
</ul>
<ul class="circle">
<li>INSIDE</li>
<li>Junior School One</li>
<li>Intermediate School Two</li>
</ul>
<ul class="square">
<li>DEFAULT</li>
<li>Junior School One</li>
<li>Intermediate School Two</li>
</ul>
</body>
</html>
The List-style-image Property
This specifies an image as a marker. You can set the image bullets using this property. The syntax of this property is similar to that of the background-image property. The default bullets will be used if it does not find the corresponding image.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists Example</title>
<style>
.order{
list-style-image: url(img.png);
}
.unorder{
list-style-image: url(img.png);
}
</style>
</head>
<body>
<h1>
Welcome to Techstack Academy
</h1>
<h2>
Ordered Lists
</h2>
<ol class="order">
<li>Junior School One</li>
<li>Intermediate School Two</li>
<li>Senior School Three</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="unorder">
<li>Junior School One</li>
<li>Intermediate School Two</li>
<li>Senior School Three</li>
</ul>
</body>
</html>
The List-style Property
This shorthand property sets all list properties in a single expression. This property has three values: type, position, and image. But if any property value is missing, the default value will be used.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists Example</title>
<style>
.order{
list-style: lower-alpha inside url(img.png);
}
.unorder{
list-style: disc outside;
}
</style>
</head>
<body>
<h1>
Welcome to Techstack Academy
</h1>
<h2>
Ordered Lists
</h2>
<ol class="order">
<li>Junior School One</li>
<li>Intermediate School Two</li>
<li>Senior School Three</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="unorder">
<li>Junior School One</li>
<li>Intermediate School Two</li>
<li>Senior School Three</li>
</ul>
</body>
</html>
Styling Lists With Colors
We can style lists with colors to make them more attractive and exciting. Any change to the *ul> or *ol> tag will affect the entire list, while changes to the *li> tag will affect a specific list item.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
<style>
.order{
list-style: upper-alpha;
background: blue;
padding:20px;
}
.order li{
background: pink;
padding:10px;
font-size:20px;
margin:10px;
}
.unorder{
list-style: square inside;
background: violet;
padding:20px;
}
.unorder li{
background: red;
color:black;
padding:10px;
font-size:20px;
margin:10px;
}
</style>
</head>
<body>
<h1>
Welcome to Techstack Academy
</h1>
<h2>
Ordered Lists
</h2>
<ol class="order">
<li>Junior School One</li>
<li>Intermediate School Two</li>
<li>Senior School Three</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="unorder">
<li>Junior School One</li>
<li>Intermediate School Two</li>
<li>Senior School Three</li>
</ul>
</body>
</html>
