CSS List-Style Property



CSS Tutorial  >  List  >  List-style

The list-style property is the shorthand for list-style-type, list-style-position, and list-style-image. The order of the values does not matter. Let's take a look at the following examples:

Example 1

CSS Declaration

ul {
  list-style: url("circle.gif") none inside;
}

The following HTML code,

<ul>
  <li>First item
  <li>Second item
</ul>

renders

  • First item
  • Second item

In Example 1, three values are defined for list-style. This is equivalent to the following three CSS properties:

list-style-image: url("circle.gif");
list-style-type: none;
list-style-position: inside;

Example 2

CSS Declaration

ol {
  list-style: lower-latin;
}

The following HTML code,

<ol>
  <li>First item
  <li>Second item
</ol>

renders

  1. First item
  2. Second item

In Example 2, the only value entered is 'lower-latin,' which defines the style. This CSS declaration is equivalent to the following:

list-style-type: lower-latin;

Next: CSS List-Style-Type




Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact