The CSS list properties allow you to:
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;
}
Note: Some of the values are for unordered lists, and some for ordered lists.
ul {
list-style-image: url('sqpurple.gif');
}
"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:
Example
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul {
list-style: square inside url("sqpurple.gif");
}
When using the shorthand property, the order of the property values are:
If one of the property values above are missing, the default value for the missing property will be inserted, if any.
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:
Customized list with a red left border
This example demonstrates how to create a list with a red left border.
Full-width bordered list
This example demonstrates how to create a bordered list without bullets.
All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.
Exercise:
Set the list style for unordered lists to "square".
<style>
ul {
_____ : _____ ;
}
</style>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
<style>
ul {
list-style-type : square ;
}
</style>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|