CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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 Lists

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 Lists

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 Lists

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

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:

CSS Lists



ADVERTISEMENT
ADVERTISEMENT