List Style Type
Customize the list item markers in ordered and unordered lists using the list-style-type property.
Unordered List
The list-style-type property is used to define the style of the list item marker.
The following values below explains how to change the marker for unordered list items.
Disc
The disc value sets the list item marker to a bullet.
<body>
<h1>Most Popular Web Browsers</h1>
<ul style="list-style-type: disc;">
<li>Mozilla Firefox</li>
<li>Google Chrome</li>
<li>Opera Browser</li>
<li>Microsoft Edge</li>
<li>Safari Browser</li>
</ul>
</body>Most Popular Web Browsers
- Mozilla Firefox
- Google Chrome
- Opera Browser
- Microsoft Edge
- Safari Browser
Circle
The circle value sets the list item marker to a circle.
<body>
<h1>Most Popular Web Browsers</h1>
<ul style="list-style-type: circle;">
<li>Mozilla Firefox</li>
<li>Google Chrome</li>
<li>Opera Browser</li>
<li>Microsoft Edge</li>
<li>Safari Browser</li>
</ul>
</body>Most Popular Web Browsers
- Mozilla Firefox
- Google Chrome
- Opera Browser
- Microsoft Edge
- Safari Browser
Square
The square value sets the list item marker to a square.
<body>
<h1>Most Popular Web Browsers</h1>
<ul style="list-style-type: square;">
<li>Mozilla Firefox</li>
<li>Google Chrome</li>
<li>Opera Browser</li>
<li>Microsoft Edge</li>
<li>Safari Browser</li>
</ul>
</body>Most Popular Web Browsers
- Mozilla Firefox
- Google Chrome
- Opera Browser
- Microsoft Edge
- Safari Browser
None
The none value will not display markers on list items.
<body>
<h1>Most Popular Web Browsers</h1>
<ul style="list-style-type: none;">
<li>Mozilla Firefox</li>
<li>Google Chrome</li>
<li>Opera Browser</li>
<li>Microsoft Edge</li>
<li>Safari Browser</li>
</ul>
</body>Most Popular Web Browsers
- Mozilla Firefox
- Google Chrome
- Opera Browser
- Microsoft Edge
- Safari Browser
Ordered List
The following values sets the marker for ordered list items.
Lower Alpha
The lower-alpha value is used to set the marker of a list item in lowercase letters.
<body>
<h1>Phases of WDLC</h1>
<ol style="list-style-type: lower-alpha;">
<li>Planning</li>
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Testing</li>
<li>Implementation</li>
<li>Maintenance</li>
</ol>
</body>Phases of WDLC
- Planning
- Analysis
- Design
- Development
- Testing
- Implementation
- Maintenance
Upper Alpha
The upper-alpha value is used to set the marker of a list item in uppercase letters.
<body>
<h1>Phases of WDLC</h1>
<ol style="list-style-type: upper-alpha;">
<li>Planning</li>
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Testing</li>
<li>Implementation</li>
<li>Maintenance</li>
</ol>
</body>Phases of WDLC
- Planning
- Analysis
- Design
- Development
- Testing
- Implementation
- Maintenance
Lower Roman
The lower-roman value is used to set the marker of a list item in lowercase roman numbers.
<body>
<h1>Phases of WDLC</h1>
<ol style="list-style-type: lower-roman;">
<li>Planning</li>
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Testing</li>
<li>Implementation</li>
<li>Maintenance</li>
</ol>
</body>Phases of WDLC
- Planning
- Analysis
- Design
- Development
- Testing
- Implementation
- Maintenance
Upper Roman
The upper-roman value is used to set the marker of a list item in uppercase roman numbers.
<body>
<h1>Phases of WDLC</h1>
<ol style="list-style-type: upper-roman;">
<li>Planning</li>
<li>Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Testing</li>
<li>Implementation</li>
<li>Maintenance</li>
</ol>
</body>Phases of WDLC
- Planning
- Analysis
- Design
- Development
- Testing
- Implementation
- Maintenance
Last updated on