CSS list-style property is a shorthand notation for setting the three properties list-style-type, list-style-image and list-style-position at the same place in the style sheet.
CSS property list-style
| CSS version: | CSS 2.1 |
| Value: | [list-style-type || list-style-position || list-style-image ] | inherit |
| Initial: | see individual properties |
| Applies to: | elements with 'display: list-item' |
| Inherited: | yes |
Example – list-style – circle marker inside
This example uses list-style = circle (list-style-type) inside (list-style-position). No value for list-style-image. Note that these values can be in any order.
<style>
ul {
background-color: lightgreen;
width: 200px;
list-style: circle inside;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>Example – list-style – image marker inside
<style>
ul {
background-color: lightgreen;
width: 200px;
list-style: url("/img/star_10x10.png") inside;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>Related
- CSS list-style-type - specify marker (disc, square, numeric, etc.) for a list
- CSS list-style-position - specify if list markers will be outside or inside
- CSS list-style-image - use image as marker in list
- HTML li tag
- HTML ol tag
- HTML ul tag
