Beamtic's logo

Share via:

Control Numbers and Bullets on Lists with CSS

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

92 views

Edited: 2020-09-25 16:42

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.

Comments

  1. How to make italic text by changing the font-style of parts, or all, of the text on a HTML page.
  2. How to add hover effects on links using CSS pseudo classes.
  3. Here you can learn how to change the background of every second HTML element in a parent with CSS.
  4. How to set the cellspacing and cellpadding of HTML tables with pure CSS.

More in: CSS Styling