Table of Contents
CSS Lists
The CSS list properties allow you to:
- unordered lists (<ul>)- the list items are marked with bullets.
- ordered lists (<ol>)- the list items are marked with numbers or letters.
CSS List Properties
- list-style-image set the image to be used as a list-item marker.
- list-style-position set the position of the list-item marker.
- list-style-type set the marker style for a list item.
- list-style Defines the display style for a list and list elements.
CSS list-style-image
- list-style-image set the image to be used as a list-item marker.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
<style>
ol{
list-style-image: url('https://nielitbhu.com/star.png');
}
ul{
list-style-image: url('https://nielitbhu.com/star.png');
}
</style>
</head>
<body>
<h1>
The list-style-image Property
</h1>
<h2>
Ordered Lists
</h2>
<ol>
<li>Tea</li>
<li>Coffee</li>
<li>Coca Cola</li>
</ol>
<h2>
Unordered lists
</h2>
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Coca Cola</li>
</ul>
</body>
</html>CSS list-style-position Property
- list-style-position set the position of the list-item marker.
- The list-style-position property specifies the position of the list-item markers (bullet points).
– outside
– inside
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
<style>
.square{
list-style-type:square;
list-style-position:outside;
}
.disc{
list-style-type:disc;
list-style-position:inside;
}
</style>
</head>
<body>
<h1> The list-style-position Property </h1>
<h2>list-style-position: outside</h2>
<ul class="square">
<li>Default</li>
<li>Tea</li>
<li>coca cola</li>
</ul>
<h2>list-style-position: inside</h2>
<ul class="disc">
<li>Inside</li>
<li>Tea</li>
<li>coca cola</li>
</ul>
</body>
</html>CSS list-style-type Property
- list-style-type set the marker style for a list item.
Note:- that the list also has default margin and padding. If you want to remove this, add margin:0 and padding:0 to <ul> or <ol>:
Example
<!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 the Nielitbhu.com
</h1>
<h2>The list-style-type Property</h2>
<h3>
Example of Unordered lists
</h3>
<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>
<h3>
Example of Ordered Lists
</h3>
<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>
</body>
</html>
CSS list-style Property
- list-style Defines the display style for a list and list elements.
- list-style : it is a shorthand property.It is used to set all the list properties in one declaration
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url('https://nielitbhu.com/star.png');
}
</style>
</head>
<body>
<h1>The list-style Property</h1>
<p>The list-style is a shorthand property for all the list properties.</p>
<ul>
<li>Mohan</li>
<li>Rohan</li>
<li>Shohan</li>
</ul>
</body>
</html>