❮❮ PREV NEXT ❯❯

CSS - Lists

As we have already seen in HTML Lists, lists provides you a way to represent list of elements in an HTML page.

And in CSS we can apply styles to the HTML List.

CSS provides set of properties using which styles can be applied to the Lists.

Unordered Lists

Usually unordered lists(i.e. Using <ul> tag) in HTML are represented with a black circle in front.

Example :

<html>
<body>
   	<ul>
  		<li>London</li>
  		<li>Delhi</li>
  		<li>Washington</li>
	</ul>
</body>
</html>

Output :

So, in the above example, we have defined an unordered list using <ul> tag.

<ul>
	<li>London</li>
	<li>Delhi</li>
	<li>Washington</li>
</ul>

And if you see the above output, we can see the black circular bullets for the unordered lists.

Now, if you want to change the default black circular bullets for the unordered lists, you can use the list-style-type property.

List-style-type property in CSS for Unordered Lists

Let us say, we want a black square for the unordered lists.

Example :

<html>
<head>
	<style>
		ul {
  			list-style-type: square;
		}
	</style>
</head>
<body>
   	<ul>
  		<li>London</li>
  		<li>Delhi</li>
  		<li>Washington</li>
	</ul>
</body>
</html>

Output :

So, in the above example, we have defined the value of list-style-type as square. And we want black square as bullets for the unordered lists.

Similarly, if we want white circle with black borders as bullets for unordered lists, we can use the value circle for list-style-type property.

Example :

<html>
<head>
	<style>
		ul {
  			list-style-type: circle;
		}
	</style>
</head>
<body>
   	<ul>
  		<li>London</li>
  		<li>Delhi</li>
  		<li>Washington</li>
	</ul>
</body>
</html>

Output :

Similarly, we can use list-style-type property for Ordered List.

List-style-type property in CSS for Ordered Lists

Usually, the default implementation of Ordered Lists(i.e. Using <ol> tag) are numeric values(i.e. 1, 2 and so on).

To change the default implementation, we can use list-style-type property and set its value accordingly.

Example :

<html>
<head>
	<style>
		ol {
  			list-style-type: lower-alpha;
		}
	</style>
</head>
<body>
   	<ol>
  		<li>London</li>
  		<li>Delhi</li>
  		<li>Washington</li>
	</ol>
</body>
</html>

Output :

So, in the above example, we have set the value of list-style-type property as lower-alpha.

<style>
	ol {
		list-style-type: lower-alpha;
	}
</style>

And we get the rest as letters as lower case as list markers.

Similarly we can use image as markers for the lists in CSS.

List-style-image property in CSS for images in Lists

Example :

<html>
<head>
	<style>
		ul {
  			list-style-image: url('images/learnerslesson_logo.png');
		}
	</style>
</head>
<body>
   	<ul>
  		<li>London</li>
  		<li>Delhi</li>
  		<li>Washington</li>
	</ul>
</body>
</html>

Output :

So, if you look at the above output, we got the image as marker for the unordered list(i.e. <ul>).

And that is because we have set the value of list-style-image property as the image(i.e. learnerslesson_logo.png).

<style>
	ul {
		list-style-image: url('images/learnerslesson_logo.png');
	}
</style>

As said earlier in this tutorial, the default marker for unordered lists(i.e. Using <ul> tag) in HTML is using a black circle in front.

If you want to remove it completely from the List then set the value of list-style-type to none.

Remove default marker from List

Example :

<html>
<head>
	<style>
		ul {
  			list-style-type: none;
		}
	</style>
</head>
<body>
   	<ul>
  		<li>London</li>
  		<li>Delhi</li>
  		<li>Washington</li>
	</ul>
</body>
</html>

Output :

So, if you look at the above output, there is no marker at the front of the list.

That is because we have set the value of list-style-type to none.

<style>
	ul {
		list-style-type: none;
	}
</style>

❮❮ PREV NEXT ❯❯