CSS Lists: There are different CSS properties that can be used to control lists. Lists can be classified as ordered lists and unordered lists. In ordered lists, marking of the list items is with alphabet and numbers, though in unordered lists, the list items are marked using bullets.


Unordered Lists:

o Coffee

o Tea

o Coca Cola

 Coffee

 Tea

 Coca Cola

Ordered Lists:

  1. Coffee
  2. Tea
  3. Coca Cola

I. Coffee

II. Tea

III. Coca Cola


In this tutorial, you will learn-

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

• unordered records (<ul>) the list items are marked with bullets

• ordered lists (<ol>) the list items are marked with numbers or letters

The CSS list properties allow you to:

• Set different list item markers for ordered lists

• Set different list item markers for unordered lists

• Set a picture as the list item marker

• Add background colors to lists and rundown items


Different List Item Markers

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

The accompanying example shows some of the accessible list item markers:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
</style>
</head>
<body>

<h2>Lists</h2>
<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Note: Some of the values are for unordered lists, and some for ordered lists.


An Image as The List Item Marker

The list-style-picture property determines a picture as the list item marker:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h2>CSS Lists</h2>
<p>The list-style-image property specifies an image as the list item marker:</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

“list-style-position: outside;” means that the bullet points will be outside the list item. The beginning of each line of a list item will be aligned vertically. This is default:

“list-style-position: inside;” means that the bullet points will be inside the list item. As it is essential for the list item, it will be part of the text and push the text toward the beginning:

Example

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Remove Default Settings

The list-style-type:none property can likewise be used to eliminate the markers/bullets. Note that the list likewise has default margin and padding. To eliminate this, add margin:0 and padding:0 to <ul> or <ol>:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>Default list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Remove bullets, margin and padding:</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

List – Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in a single declaration:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>

<h2>CSS Lists</h2>
<p>The list-style property is a shorthand property, which is used to set all the list properties in one declaration.</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

When using the shorthand property, the order for the property values are:

• list-style-type (if a list-style-picture is specified, the value of this property will be shown if the picture for some reason can’t be shown)

• list-style-position (specifies whether the list-item markers ought to show up inside or outside the content flow)

• list-style-picture (specifies a picture as the list item marker)

In the event that one of the property values above are missing, the default value for the missing property will be inserted, assuming any.


Styling List With Colors

We can likewise style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the whole list, while properties added to the <li> tag will affect the individual list items:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

All CSS List Properties

PropertyDescription
list-styleSets all the properties for a list in one declaration
list-style-imageSpecifies an image as the list-item marker
list-style-positionSpecifies the position of the list-item markers (bullet points)
list-style-typeSpecifies the type of list-item marker

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder