|
Lists come in two essential flavors: unordered and ordered. However, CSS allows for more list customization than HTML -- to the extent that even images can be used as bullet points for unordered lists!. The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker. CSS List Style TypeIf you want to use incredible different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes. - Unordered list styles: square, circle, disc (default), and none
- Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none
CSS Code:ol { list-style-type: upper-roman; }
ul { list-style-type: circle; } Display:Here is an ordered list: - This list is
- using roman
- numerals
- with CSS!
and now an unordered list: - This list is
- using circle types
- with CSS!
The CSS list properties agree to you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker. The different list-item markers in unordered lists : <!-- created by phpguru.biz --> ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle} <body><ul class="disc">
<li>Tea</li>
<li>Coffee</li>
<li>Coca Cola</li>
</ul> <ul class="circle">
<li>Tea</li>
<li>Coffee</li>
<li>Coca Cola</li>
</ul></body>
<!-- created by phpguru.biz --> All the list style types : <!-- created by phpguru.biz --> ul.disc {list-style-type: disc}
ul.square {list-style-type: square} <body>
<ul class="circle">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
<!-- created by phpguru.biz --> How to set an image as the list-item marker? <!-- created by phpguru.biz -->
ul
{
list-style-image: url('arrow.gif')
} <body>
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Coca Cola</li>
</ul>
</body>
<!-- created by phpguru.biz --> Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. PHPGURU: The number in the "PHPGURU" column indicates in which CSS proposal the property is defined (CSS1 or CSS2). | Property | Description | Values | IE | F | N | PHPGURU |
|---|
list-style | A shorthand property for setting all of the properties for a list in one declaration | list-style-type
list-style-position
list-style-image | 4 | 1 | 6 | 1 | list-style-image | Sets an image as the list-item marker | none
url | 4 | 1 | 6 | 1 | list-style-position | Sets where the list-item marker is placed in the list | inside
outside | 4 | 1 | 6 | 1 | list-style-type | Sets the type of the list-item marker | none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha | 4 | 1 | 4 | 1 | marker-offset | | auto
length | | 1 | 7 | 2 |
Examples The different list-item markers in unordered lists
This example demonstrates the different list-item markers in CSS. The different list-item markers in ordered lists
This example demonstrates the different list-item markers in CSS. All the list style types
This example demonstrates all the different list-item markers in CSS. Set an image as the list-item marker
This example demonstrates how to set an image as the list-item marker. Place the list-item marker
This example demonstrates where to place the list-item marker. All list properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for a list in one declaration.
|
