Syntax
list-style: type position image;Examples
Removing Default List Styling
The standard reset applied when using a <ul> for non-list purposes, like navigation.
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 16px;
}Custom Marker Styles
Changing marker type and using the ::marker pseudo-element for further styling.
ol { list-style-type: upper-roman; } /* I, II, III... */
ul { list-style-type: square; }
li::marker {
color: #3b82f6; /* styles just the bullet/number, not the text */
font-weight: bold;
}Parameters and values
- list-style-type (disc | circle | square | decimal | none): Sets the marker appearance
- list-style-position (inside | outside): Whether markers sit inside or outside the content box
- ::marker (pseudo-element): Targets just the marker for additional styling
Best practices
- Set list-style: none and remove default padding when using a <ul>/<ol> for navigation or other non-literal-list purposes
- Use the ::marker pseudo-element to style bullets/numbers directly, rather than hiding markers and faking them with ::before
- Keep semantic list markup (<ul>/<ol>/<li>) even when visually removing markers - screen readers still announce it as a list, which is often the correct behavior
- list-style-position: inside wraps text under the marker; outside (the default) keeps wrapped text aligned with the first line, not the marker
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Font Properties
Core typography properties control how text is displayed. font-family sets the typeface (with fallbacks), font-size controls size, font-weight controls boldness, font-style controls italics, and the font shorthand can set several of these at once. Well-chosen typography is one of the highest-impact, lowest-effort improvements you can make to a design.Text Properties
Beyond font selection, CSS offers properties to control text alignment, decoration, spacing, and casing. text-align positions text horizontally, text-decoration adds underlines/strikethroughs, text-transform changes casing, and letter-spacing/word-spacing adjust character and word gaps.line-height and Vertical Spacing
line-height controls the vertical space a line of text occupies, directly affecting readability. Unitless values (like 1.5) are generally preferred over fixed units, since they scale proportionally with font-size rather than creating an inconsistent fixed gap.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.
Core typography properties control how text is displayed. font-family sets the typeface (with fallbacks), font-size controls size, font-weight controls boldness, font-style controls italics, and the font shorthand can set several of these at once. Well-chosen typography is one of the highest-impact, lowest-effort improvements you can make to a design.Text Properties
Beyond font selection, CSS offers properties to control text alignment, decoration, spacing, and casing. text-align positions text horizontally, text-decoration adds underlines/strikethroughs, text-transform changes casing, and letter-spacing/word-spacing adjust character and word gaps.line-height and Vertical Spacing
line-height controls the vertical space a line of text occupies, directly affecting readability. Unitless values (like 1.5) are generally preferred over fixed units, since they scale proportionally with font-size rather than creating an inconsistent fixed gap.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.