CSS Lists, Tables & Forms
CSS Lists
The CSS Lists properties are used to customize the appearance of ordered and unordered lists.
The CSS Lists properties are used to customize the appearance of ordered (
<ol>) and unordered (<ul>) lists.
By default, browsers display:
- Unordered lists with bullets (•)
- Ordered lists with numbers (1, 2, 3...)
CSS allows you to:
- Change list marker styles
- Use custom images as markers
- Control marker position
- Remove markers completely
List styling is commonly used in:
- Navigation menus
- Sidebars
- Feature lists
- Content sections
Syntax
CSS Lists Syntax
css
selector {
list-style-type: value;
}CSS Lists Example
css
ul {
list-style-type: square;
}This changes the bullet style from a circle to a square.
Attributes
| Property | Description | Example |
|---|---|---|
| list-style-type | Sets marker type | list-style-type: square; |
| list-style-image | Uses an image as marker | list-style-image: url("icon.png"); |
| list-style-position | Sets marker position | list-style-position: inside; |
| list-style | Shorthand property | list-style: square inside; |
| list-style-type: none | Removes markers | list-style-type: none; |
Example
CSS Lists Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists Example</title>
<style>
.square-list {
list-style-type: square;
}
.roman-list {
list-style-type: upper-roman;
}
.menu-list {
list-style-type: none;
padding: 0;
}
.menu-list li {
display: inline-block;
margin-right: 15px;
}
</style>
</head>
<body>
<h2>Square List</h2>
<ul class="square-list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Roman Number List</h2>
<ol class="roman-list">
<li>Introduction</li>
<li>Syntax</li>
<li>Examples</li>
</ol>
<h2>Navigation Menu</h2>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| list-style | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. The supporting concepts are explained in Generated Content and CSS Pseudo Elements.
Notes
list-style-typeworks with both ordered and unordered lists.list-style-type: none;is commonly used for navigation menus.
Common unordered list styles:
- disc
- circle
- square
Common ordered list styles:
- decimal
- upper-roman
- lower-roman
- upper-alpha
- lower-alpha
Common List Style Types
| Value | Result |
|---|---|
| disc | ● |
| circle | ○ |
| square | ■ |
| decimal | 1, 2, 3 |
| upper-roman | I, II, III |
| lower-alpha | a, b, c |
Conclusion
CSS Lists allow you to customize how list items are displayed on a webpage. Whether you need simple bullet styles, Roman numerals, or navigation menus without markers, CSS provides flexible options for creating clean and visually appealing lists.