CSS list-style – shorthand for list marker type, image and position

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>
refresh

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>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments