Control Numbers and Bullets on Lists with CSS

How to change numbers and bullets on HTML lists like ol and ul.

701 views

By. Jacob

Edited: 2021-02-05 16:08

HTML lists, <ol> and <ul>, will be styled with either numbers or bullets in front of each list item by default; to change the default styling, you can use the CSS list-style-type property.

Explicitly setting list-style-type to none will remove the default styling:

ol, ul {
  list-style-type:none;
}

Additional values for the list-style-type property include:

lower-roman — i, ii, iii, ...
upper-roman — I, II, III, ...
lower-greek — α, β, γ, ...
lower-latin — a, b, c, ...
upper-latin — A, B, C, ...
armenian — Ա, Բ, Գ, ...
georgian — an, ban, gan, ...
lower-alpha — a, b, c, ...
upper-alpha — A, B, C, ...
decimal — 1, 2, 3, ...
decimal-leading-zero — 01, 02, 03, ...
disc — ●
square — ■
circle — ○
none — No bullet is shown.

Once the list style has been changed, it is important to also be aware of the margin on the element — if you are not careful, your newly added bullets could be hidden due to insufficient white space (margin or padding) on the list element.

Margin and Padding

You may also want to remove the default margin and padding; this is often done with a "CSS reset" at the beginning of the StyleSheet:

* {margin:0;padding:0;}

We may then define the margin and padding for each element on our own. In this case, let's just give the list a default padding of about 1rem. Using rem will define the padding length relative to the root element's font-size, which we can then define in pixels; a good, standard, body font size is 16px:

* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 16px;
}
ol, ul {
  list-style-type:none;
  padding: 1rem;
}

When we seperate selectors with a comma, we can target multiple elements; in this case we are targeting both the <ol> and the <ul> element with our rule.

The CSS reset is not strictly needed if you know what you are doing, but it does make it easier to come up with your own styles for everything on the page.

Margin and Padding

Tell us what you think: