CSS in List

HTML

CSS

Java Script

There are two main types of list in HTML:

Unordered list (<ul>) -: The list items are marked with bullets.
Ordered list (<ol>) -: The list items are marked with numbers or alphabets

List Style Marker

The list-style-type property specifies the type of list item marker.

<!DOCTYPE>
<html>
<head>
<style>
ul.circle {
	list-style-type: circle;
}
ul.square {
	list-style-type: square;
}
ol.upper-roman {
	list-style-type: upper-roman;
}
ol.lower-alpha {
	list-style-type: lower-alpha;
}
h4{
color:red;
}
</style>
</head>
<body>
<h2>CSS in Lists</h2>
<h4>Examples of Unordered List</h4>
<ul class="circle">
	<li>Chapter 1</li>
	<li>Chapter 2</li>
	<li>Chapter 3</li>
</ul>
<ul class="square">
	<li>Chapter 1</li>
	<li>Chapter 2</li>
	<li>Chapter 3</li>
</ul>
<h4>Examples of Ordered List</h4>
<ol class="upper-roman">
	<li>Chapter 1</li>
	<li>Chapter 2</li>
	<li>Chapter 3</li>
</ol>
<ol class="lower-alpha">
	<li>Chapter 1</li>
	<li>Chapter 2</li>
	<li>Chapter 3</li>
</ol>
</body>
</body>
</html>

The output of the following code is given below:

We can also use images as bullets by list-style-image property.

Position of List Item Markers

The list-style-position property is used to set the position of list-item markers

“list-style-position: outside;” (default) means that the bullets point will be outside the list item.

“list-style-position: inside;” means that the bullets point will be inside the list item.

<!DOCTYPE>
<html>
<head>
<style>
ul.circle {
list-style-position: outside;
}
ul.square {
list-style-position: inside;
}

h3{
color:red;
}
</style>
</head>
<body>
<h2>CSS in Lists</h2>
<h3>List-Style-position : Outside(default)</h3>
<ul class=“circle”>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
<h3>List-Style-position : Inside</h3>
<ul class=“square”>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</body>
</html>

Python

Java

C

C++

HTML/CSS

Java Script

PHP

SQL

C Programs

CSS in List

List Style Marker

The output of the following code is given below:

Position of List Item Markers

The output of the following code is given below:

Video/ C Introduction