Styling List in CSS

We all want to make our webpage stylish. Because a stylish webpage engages the user and helps us to get more visitors on our website. We can style our webpage by various ways, today we will see how we can style HTML Lists with CSS. Styling List in CSS

CSS – Style Ordered List

I guess you all might know that an ordered list is a type of list where each list item is automatically marked with numbers. With the help of CSS, we can mark the list items with roman letters (like I, II, III, IV….) or with alpha letters (like a, b, c….).

In an example below, let’s write a code and style an ordered with CSS.

Example

<html.
<head>
<style>
ol.a {
  list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1>Let's style an ordered list. </h1>
<ol class ="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
  <li>Python</li> 
  <li>C</li>
  <li>C++</li>
</ol>
</body>
</html>

Copy the Code and Run it Here

When you run this code, you will notice that each list item is marked with roman letters rather then numbers.

We can also mark each list item of an ordered list with alpha letters. Here is an example:

Example

<html.
<head>
<style>
ol.a {
  list-style-type: upper-alpha;
}
</style>
</head>
<body>
<h1>Let's style an ordered list. </h1>
<ol class ="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
  <li>Python</li> 
  <li>C</li>
  <li>C++</li>
</ol>
</body>
</html>

Copy the Code and Run it Here

If you set the property value to lower-alpha, then each list item in a list will be automatically marked with lower alpha letters (like a, b, c…).

CSS – Style Unordered List

As you may know, in an unordered list each list item is automatically marked with bullets (black dots). But we can replace it with small squares and circles. Here is an example:

Example

<html.
<head>
<style>
ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
</style>
</head>
<body>
<h1>Style an Unordered list. </h1>
<ul class ="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
<ul class="b">
  <li>PHP</li>
  <li>Python</li>
  <li>MySQL</li>
</ul>
</body>
</html>

Copy the Code and Run it Here

Run this code on out HTML Editor and see how list items are marked with small circles and squares.

Use Image as the List Item Marker

With the help of CSS, we can also use an image as the marker for list items. Here is the syntax:

Syntax

ul {
  list-style-image :url("#image.jpg")
}

In an below example let’s write a code and set the image as the list item marker. But here we will also set the width and height of an image, so our code might be little bit different from an above syntax:

Example

<html>
<head>
<style>
ul {
  list-style-type: none;
  padding: 0;
}

ul li {
  padding-left: 30px;
  background-image: url('https://crus4.com/wp-content/uploads/2023/04/arrow.jpg');
  background-repeat: no-repeat;
  background-size: 20px 20px;
}
</style>
</head>
<body>
<h1> Use Image as the List Item Marker. </h1>
<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>
<!--In the same way, you can set an image as the list item marker for an ordered list-->
</body>
</html>

Copy the Code and Run it Here

Code Explanation

In an above code, first the ul selector removes the default list styling. Then the ul li selector sets the custom marker image using the background-image property. The background-repeat property is set to no-repeat to prevent the image from repeating. Finally, the background-size property is used to set the width and height of an image.

Controlling List Counting in an Ordered List

All list items in an ordered list starts from 1, by default. But with the help of start attribute you can control the list counting, like you can start it from 4, 5 or from any other number you like.

In an example below, let’s write a code and start the list terms from 2.

Example

<html>
<head>
</head>
<body>
<ol start="3">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ol>
</body>
</html>

Copy the Code and Run it Here

Styling List with Colors

We can also add colors to our lists, and make them look more stylish.

Normal List

Apple
Mango
Grapes

After Styling with colors

Apple
Mango
Grapes

Here is how we can set colors to our lists.

Example

<html>
<head>
<style>
#a {
  color:#f5f5f5;
  background-color:#ff0000;
  padding:20px;
}
#b {
  color:#000044;
  background-color:#33AAFF;
  padding:20px;
}
</style>
</head>
<body>
<h2>Styling Lists with Colors</h2>
<ol id="a">
  <li>Apple</li>
  <li>Grapes</li>
  <li>Mango</li>
</ol>
<ul id="b">
  <li>Onion</li>
  <li>Potato</li>
  <li>Tomato</li>
</ul>
</body>
</html>

Copy the Code and Run it Here

Run this code, and you will see how the color of the list changes.

You can also style the list terms with different color. Here is how you can do it.

<html>
<head>
<style>
#a {
  color:#f5f5f5;
  background-color:#ff0000;
  padding:20px;
}
#b {
  color:#000044;
  background-color:#33AAFF;
  padding:20px;
}
#c {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}
</style>
</head>
<body>
<h2>Styling Lists with Colors</h2>
<ol id="a">
  <li id="c">Apple</li>
  <li id="c">Grapes</li>
  <li id="c">Mango</li>
</ol>
<ul id="b">
  <li id="c">Onion</li>
  <li id="c">Potato</li>
  <li id="c">Tomato</li>
</ul>
</body>
</html>

Copy the Code and Run it Here

Previous

Next

Share This Post!

Styling List in CSS