CSS Lists
Ordered Lists:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
HTML Lists and CSS List Properties
In HTML, there are primarily two types of lists:
- Unordered lists (<ul>) - items in the list are shown with bullets.
- Ordered lists (<ol>) - use numbers or letters to mark the items in the list.
The CSS list properties enable you to:
- Change the symbols or numbers used for each item in a numbered list.
- Change the symbols for each item in a bulleted list.
- Use an image to mark the items in a list.
- Put colors in the background of your lists and the things inside the lists.
Different List Item Markers
The list-style-type property tells us what kind of marker is used for list items.
Here's an example that displays various markers for list items:
Example
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;
}
Try it Yourself »
An Image as The List Item Marker
The list-style-image property specifies an image as the list
item marker:
Position The List Item Markers
The list-style-position property tells us where the little bullets or markers in a list should be placed.
"list-style-position: outside;" means that the bullet points will be placed outside the list item. This makes sure that the beginning of each line in a list item lines up vertically. This is how it normally works by default.
- Coffee -
A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
"list-style-position: inside;" means that the little dots or dashes used for bullet points in a list will be positioned within the list item itself. This makes them part of the text and makes the text start right after them.
- Coffee -
A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
Example
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Try it Yourself »
Remove Default Settings
You can use the list-style-type:none property to get rid of those little markers or bullets in a list. It's important to know that lists also come with some default space around them. To get rid of that space, you can simply add margin:0 and padding:0 to your <ul> or <ol> elements.
List - Shorthand property
The list-style property is like a shortcut for setting various properties of a list all at once. It lets you change how lists look in one go.
When you use the shorthand property, remember that the order of the property values matters:
list-style-type determines the type of bullet or marker used in a list. If a specific image is chosen for the bullet but can't be shown for some reason, this property sets the fallback style for the bullet.- The
list-style-position attribute determines if the markers for list items should be inside or outside the main content.
Styling List With Colors
We can use colors to make lists look more appealing.
When you add something to the <ol> or <ul> tag, it affects the whole list. But if you add properties to the <li> tag, it only affects each list item.
Example
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
color: darkblue;
margin: 5px;
}
Result:
Try it Yourself »
list-style-image lets you choose an image to represent each item in a list.
If any of the values for these properties is not provided, the system will automatically use a default value in its place.
<!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>The list-style-type Property</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>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<h2>The list-style-image Property</h2>
<p>The list-style-image property tells the browser to use an image as the marker for a list item.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>Lorem Ipsum - Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </li>
<li>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </li>
<li>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </li>
<li>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</li>
</ul>
</body>
</html>
<!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 from list:</p>
<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("/assets/files/sqdot.png");
}
</style>
</head>
<body>
<h2>The list-style Property</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>
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
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>
HTML
CSS
Javascript
Jquery
PHP
MySQL