CSS List-Style Examples
See the CSS list-style Property in Action
Return to the CSS List-Style article.
CSS List-Style Types
All of the following examples will use this HTML list. The only thing that will change is the list-style type in the CSS.
<ul>
<li>This is a sample list</li>
<li>There are three elements in it</li>
<li>It's a UL list, but may be numbered by the styles</li>
</ul>
list-style: none;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: circle;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: disc;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: square;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
Return to the CSS List-Style article.
list-style: armenian;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: decimal;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: decimal-leading-zero;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: georgian;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: lower-alpha;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
Return to the CSS List-Style article.
list-style: lower-greek;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: lower-latin;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: lower-roman;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: upper-alpha;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: upper-latin;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
list-style: upper-roman;
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
Return to the CSS List-Style article.
CSS List-Style Positions
All of the following examples will use this HTML list. The only thing that will change is the list-style position in the CSS.
<ul>
<li>This is a sample list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum</li>
<li>There are three elements in it. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum</li>
<li>It's a UL list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum</li>
</ul>
list-style: outside;
- This is a sample list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
- There are three elements in it. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
- It's a UL list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
list-style: inside;
- This is a sample list. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
- There are three elements in it. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amumLorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
- It's a UL list, but may be numbered by the styles. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum
Return to the CSS List-Style article.
CSS List-Style Image
All of the following examples will use this HTML list. The only thing that will change is the list-style image in the CSS.
<ul>
<li>This is a sample list</li>
<li>There are three elements in it</li>
<li>It's a UL list, but may be numbered by the styles</li>
</ul>
list-style: url('http://0.tqn.com/d/webdesign/1/0/c/8/1/16-heart-gold-m.png');
- This is a sample list
- There are three elements in it
- It's a UL list, but may be numbered by the styles
Return to the CSS List-Style article.
Heart icon courtesy Joseph North.
