In this blog you will get css properties list with examples . So must checkout the full blog so you will get detailed Information.
CSS List Properties
The CSS list properties allow you to:
- Set different list item markers for ordered lists
- Set different list item markers for unordered lists
- Set an image as the list item marker
- Add background colors to lists and list items
1) Different List Item Markers
The list-style-type property specifies the type of list item marker.
Example
<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: upper-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>
Output
2) An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker: Example
<html>
<head>
<style>
ul {
list-style-image: url(“Desert.jpg”);
}
</style>
</head>
<body>
<h2>The list-style-image Property</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>
Output
Css border properties with examples
3) Position The List Item Markers
The list-style-position property specifies the position of the list-item markers (bullet points).
Example
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<ul class=”a”>
<li>Red</li>
<li>Green</li>
<li>Yellow</li>
</ul>
<ul class=”b”>
<li>Red</li>
<li>Green</li>
<li>Yellow</li>
</ul>
</body>
</html>
Output
4) Remove Default Settings
The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:
<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>
Output
5) Styling List With Colors
We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items:
Example
<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
Output
For Live Class click on the link
Thanks For Reading the Blog css properties list with examples .