
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS - list-style-type
Description
The list-style-type property sets the counting (or bullet) style used in the marker for a list item.
Possible Values
Here are the values which can be used for an unordered list −
Sr.No. | Value & Description |
---|---|
1 | none NA |
2 | disc (default) A filled-in circle |
3 | circle An empty circle |
4 | square A filled-in square |
Here are the values which can be used for an ordered list −
Value | Description | Example |
---|---|---|
decimal | Number | 1,2,3,4,5 |
decimal-leading-zero | 0 before the number | 01, 02, 03, 04, 05 |
lower-alpha | Lowercase alphanumeric characters | a, b, c, d, e |
upper-alpha | Uppercase alphanumeric characters | A, B, C, D, E |
lower-roman | Lowercase Roman numerals | i, ii, iii, iv, v |
upper-roman | Uppercase Roman numerals | I, II, III, IV, V |
lower-greek | The marker is lower-greek | alpha, beta, gamma |
lower-latin | The marker is lower-latin | a, b, c, d, e |
upper-latin | The marker is upper-latin | A, B, C, D, E |
hebrew | The marker is traditional Hebrew numbering | |
armenian | The marker is traditional Armenian numbering | |
georgian | The marker is traditional Georgian numbering | |
cjk-ideographic | The marker is plain ideographic numbers | |
hiragana | The marker is hiragana | a, i, u, e, o, ka, ki |
katakana | The marker is katakana | A, I, U, E, O, KA, KI |
hiragana-iroha | The marker is hiragana-iroha | i, ro, ha, ni, ho, he, to |
katakana-iroha | The marker is katakana-iroha | I, RO, HA, NI, HO, HE, TO |
Applies to
All the elements with a display of list-item.
DOM Syntax
object.style.listStyleType = "decimal"
Example
Here is the example −
<html> <head> </head> <body> <ul style = "list-style-type:circle;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style = "list-style-type:square;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style = "list-style-type:decimal;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style = "list-style-type:lower-alpha;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style = "list-style-type:lower-roman;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>
This will produce following result −
Advertisements