CSS Lists

CSS Lists: Several properties are available in CSS that are used to manage the lists. Lists are distributed as ordered and unordered kind of lists. The ordered lists provide the facility to mark the items of the list along with numbers and alphabet. An unordered list offers the facility to mark the items of lists using bullets.

With the help of CSS, we can style various lists. These lists give us the facility to:

• Arrange the distance among the marker and the text inside the list.
• Describe the image for any marker instead the use of any bullet point or any number.
• Manage the appearance or pattern of any marker.
• Position a marker inside or outside of a box that includes the items of a list.
• Set the color of the background for lists and list items.

There are several properties of CSS which may be applied for styling the lists of CSS:

• list-style-type: It is used to control the appearance or shape of a marker.
• list-style-image: It is used to set the image to the marker instead of using any number or any bullet point.
• list-style-position: This property describes the marker’s position, as its name implies.
• list-style: This property is used as a shorthand property for all the properties mentioned above.
• marker-offset: It describes the distance among the marker and the text. This property does not provide any support to Netscape 7 or IE6.

Take a look at the following illustration of list properties one by one:

CSS list-style-type

It permits us to modify the marker’s list type to some other type like Latin letters, roman numerals, circle, square, etc. The items of an ordered list are numbered in Arabic numerals (i.e., 1, 2, 3, etc.), although an unordered list’s items are remarked with the round bullet point.

When none value is set, it will erase all the bullets or markers.

Note: These lists also contain the default padding and margin. To erase, we have to add margin: 0 and padding: 0 to <ul> and <ol>.

Let’s have a look on the following example:

Example:                             

list-style-type

<!DOCTYPE html>
<html>
<head>
<title> CSS Lists </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 this Page </h1>
<h2> Ordered Lists </h2>
<ol class= "num">
<li> one </li>
<li> two </li>
<li> three </li>
</ol>
<ol class= "alpha">
<li> one </li>
<li> two </li>
<li> three </li>
</ol>
<ol class= "roman">
<li> one </li>
<li> two </li>
<li> three </li>
</ol>
<h2> Unordered Lists </h2>
<ul class= "disc">
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
<ul class= "circle">
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
<ul class= "square">
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
</body>
</html>

Output:

CSS list-style-position

It is used to specify the appearance of a marker, whether it is outside or inside of a box. It also includes bullet points. This property contains two values.

inside: It specifies that bullet points are inside a list item. If any content goes to the next line, then content will wrap under a marker.

outside: It specifies that bullet points are outside a list item. These values used as the default value.

Let’s have a look on the following illustration:

Example:

<!DOCTYPE html>
<html>
<head>
<title> CSS Lists </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 this Page </h1>
<h2> Ordered Lists </h2>
<ol class= "num">
<li> INSIDE </li>
<li> two </li>
<li> three </li>
</ol>
<ol class= "roman">
<li> OUTSIDE </li>
<li> two </li>
<li> three </li>
</ol>
<h2> Unordered Lists </h2>
<ul class= "disc">
<li> INSIDE </li>
<li> two </li>
<li> three </li>
</ul>
<ul class= "circle">
<li> INSIDE </li>
<li> two </li>
<li> three </li>
</ul>
<ul class= "square">
<li> DEFAULT </li>
<li> two </li>
<li> three </li>
</ul>
</body>
</html>

Output:

CSS list-style-image

The list-style-image property describes an image to the marker. It provides the facility to set the bullets of an image. It has a syntax that is similar to another property of CSS i.e., background-image. If it can’t find a corresponding image, it will automatically use the default bullets.

Example:

<!DOCTYPE html>
<html>
<head>
<title> CSS Lists </title>
<style>
.order
{
 list-style-image: url(img.png);
}
.unorder
{
 list-style-image: url(img.png);
}
</style>
</head>
<body>
<h1> Welcome to this Page </h1>
<h2> Ordered Lists </h2>
<ol class= "order">
<li> one </li>
<li> two </li>
<li> three </li>
</ol>
<h2> Unordered Lists </h2>
<ul class= "unorder">
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
</body>
</html>

Output:        

CSS list-style

It is used as a shorthand attribute that can be applied to set every list property within single expression. The values order of this attribute is image, position, and type. Although if an attribute value is not their then its default value is inserted.

Example:

<!DOCTYPE html>
<html>
<head>
<title> CSS Lists </title>
<style>
.order
{
 list-style: lower-alpha inside url(img.png);
}
.unorder
{
 list-style: disc outside;
}
</style>
</head>
<body>
<h1> Welcome to this Page </h1>
<h2> Ordered Lists </h2>
<ol class= "order">
<li> one </li>
<li> two </li>
<li> three </li>
</ol>
<h2> Unordered Lists </h2>
<ul class= "unorder">
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
</body>
</html>

Output:

CSS lists along with colors

To show these lists more interesting and attractive, we can apply various colors to these lists. If we add something to the <ol> or <ul> tag, then it will affect a whole list, but if we add something to the <li> tag individually, then it will affect only the items corresponding list.

Example:

<!DOCTYPE html>
<html>
<head>
<title> CSS Lists </title>
<style>
.order
{
 list-style: upper-alpha;
 background: lightblue;
 padding: 20px;
}
.order li
{
 background: pink;
 padding: 10px;
 font-size: 20px;
 margin: 10px;
}
.unorder
{
 list-style: square inside;
 background: cyan;
 padding: 20px;
}
.unorder li
{
 background: lime;
 padding: 10px;
 color: white;
 font-size: 20px;
 margin: 10px;
}
</style>
</head>
<body>
<h1> Welcome to this Page </h1>
<h2> Ordered Lists </h2>
<ol class= "order">
<li> ONE </li>
<li> TWO </li>
<li> THREE </li>
</ol>
<h2> Unordered Lists </h2>
<ul class= "unorder">
<li> ONE </li>
<li> TWO </li>
<li> THREE </li>
</ul>
</body>
</html>

Output: