CSS
Topperworld.in
List
⚫ The List in CSS specifies the listing of the contents or items in a particular
manner i.e., it can either be organized orderly or unorder way, which helps
to make a clean webpage.
⚫ It can be used to arrange the huge with a variety of content as they are
flexible and easy to manage.
⚫ The default style for the list is borderless.
⚫ The list can be categorized into 2 types:
o Unordered List: In unordered lists, the list items are marked with
bullets i.e. small black circles by default.
o Ordered List: In ordered lists, the list items are marked with numbers
and an alphabet.
We can style the lists using CSS. CSS list properties allow us to:
➢ Set the distance between the text and the marker in the list.
➢ Specify an image for the marker instead of using the number or bullet point.
➢ Control the marker appearance and shape.
➢ Place the marker outside or inside the box that contains the list items.
➢ Set the background colors to list items and lists.
❖ CSS Properties
The CSS properties to style the lists are given as follows:
◆ list-style-type: This property is responsible for controlling the
appearance and shape of the marker.
◆ list-style-image: It sets an image for the marker instead of the number
or a bullet point.
◆ list-style-position: It specifies the position of the marker.
©Topperworld
CSS
◆ list-style: It is the shorthand property of the above properties.
◆ marker-offset: It is used to specify the distance between the text and
the marker. It is unsupported in IE6 or Netscape 7.
❖ List Item Marker
This property specifies the type of item marker i.e. unordered list or
ordered. The list-style-type property specifies the appearance of the list
item marker (such as a disc, character, or custom counter style) of a list
item element. Its default value is a disc.
Syntax:
list-style-type:value;
The following value can be used:
circle
decimal, eg :1,2,3, etc
decimal-leading-zeroes , eg :01,02,03,04,etc
lower-roman
upper-roman
lower-alpha, eg: a,b,c, etc
upper-alpha, eg: A, B, C, etc
Square
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: square;
}
ol.c {
©Topperworld
CSS
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="b">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p> Ordered Lists </p>
<ol class="c">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="d">
<li>one</li>
<li>two</li>
<li>three</li>
©Topperworld
CSS
</ol>
</body>
</html>
Output:
❖ Image as List Marker
This property specifies the image as a list item marker.
The list-style-image property is used to sets an image to be used as the list
item marker. Its default value is “none”.
Syntax:
list-style-image: url;
❖ List Marker Position
This property specifies the position of the list item marker.
©Topperworld
CSS
The list-style-position property is used to sets the position of the marker
relative to a list item.
Its default value is “outside”.
There are 2 types of position markers:
1. list-style-position: outside; In this, the bullet points will be outside
the list item. The start of each line of the list will be aligned vertically.
Syntax:
list-style-position: outside;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
</style>
</head>
<body>
<h2>
Topper World
</h2>
<p> Unordered lists </p>
©Topperworld
CSS
<ul class="a">
<li>one
<br>
In this the bullet points will
be
outside the list item.
</li>
<li>two
<br>
The start of each line of the
list
will be aligned vertically.
</li>
<li>three</li>
</ul>
</body>
</html>
Output:
©Topperworld
CSS
2. list-style-position: inside; In this, the bullet points will be inside the
list. The line along with the bullet points will be aligned vertically.
Syntax:
list-style-position: inside;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: inside;
}
</style>
</head>
<body>
<h2>
Topper World
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one
<br>
In this the bullet points will
be inside the list item.
</li>
©Topperworld
CSS
<li>two
<br>
The line along with the bullet
points
will be aligned vertically..
</li>
<li>three</li>
</ul>
</body>
</html>
Output:
❖ Shorthand Property
➢ Shorthand Property allows us to set all the list properties in one
command.
➢ The order of property is a type, position, and image.
➢ If any of the properties is missing, the default value is inserted.
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: square inside;
}
</style>
</head>
<body>
<h2>
Topper World
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
©Topperworld
CSS
Output:
❖ Styling Lists
The list can be formatted in CSS.
Different colors, borders, backgrounds, and paddings can be set for the lists.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: square;
background: pink;
padding: 20px;
}
</style>
</head>
<body>
<h2>
Topper World
</h2>
©Topperworld
CSS
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
Output:
©Topperworld
