list-style

lets take a look at the list-style property

list-style is the CSS property that we use decorate our list element (both ordered and unordered) to make it look more interesting and fun. The list-style property is basically a shorthand for the following properties: - list-style-type - list-style-position - list-style-image

taught by Tina May

we can use list-style to change the shape and the position of bullet point in an unordered list

By default, the shape of unordered list is disc (solid bullet point) which is positioned outside the text, but we can change that into different shapes with the option to position the list inside the text.

list-style:

Tip: The style options for unordered list are: disc (default), circle and square.

Tuition is valuable, but you know what's invaluable? Intuition.

  1. Michael Scott
  2. Jim Halpert
  3. Dwight Schrute
  4. Pam Beesly
  5. Stanley Hudson

You miss 100% of the shots you never take.

we can use list-style to change the type and the position of markers in an ordered list

By default, an ordered list comes in a decimal number, but we can change that into different styles of numbering with the option to position the list inside the text.

list-style:

Tip: The common style options for ordered list are: decimal, upper-roman, lower-roman, upper-latin, lower-latin. You also have niche options in other languages, such as katakana, hiragana (Japanese), lower-greek, etc.

Tuition is valuable, but you know what's invaluable? Intuition.

  1. Michael Scott
  2. Jim Halpert
  3. Dwight Schrute
  4. Pam Beesly
  5. Stanley Hudson

You miss 100% of the shots you never take.

we can use list-style to change the bullet points into image icons

We can change both unordered and ordered lists into image icons.

list-style:

Tuition is valuable, but you know what's invaluable? Intuition.

  1. Michael Scott
  2. Jim Halpert
  3. Dwight Schrute
  4. Pam Beesly
  5. Stanley Hudson

You miss 100% of the shots you never take.

we can use list-style to remove bullets or markers completely

We can remove bullet points from unordered lists and markers from ordered lists completely if that’s the style we want to have for our website interface.

list-style:

Tuition is valuable, but you know what's invaluable? Intuition.

  1. Michael Scott
  2. Jim Halpert
  3. Dwight Schrute
  4. Pam Beesly
  5. Stanley Hudson

You miss 100% of the shots you never take.

explore all typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML

<div>
  <h4 class="list-title">This is an unordered list</h4>
  <ul>
  	<li>Michael Scott</li>
  	<li>Jim Halpert</li>
  	<li>Dwight Schrute</li>
  	<li>Pam Beesly</li>
  	<li>Stanley Hudson</li>
  </ul>
  <h4 class="list-title">This is an ordered list</h4>
  <ol>
  	<li>Ron Swanson</li>
  	<li>Leslie Knope</li>
  	<li>Ann Perkins</li>
  	<li>Ben Wyatt</li>
  	<li>Donna Meagle</li>
  </ol>
</div>

This is an unordered list

  • Michael Scott
  • Jim Halpert
  • Dwight Schrute
  • Pam Beesly
  • Stanley Hudson

This is an ordered list

  1. Ron Swanson
  2. Leslie Knope
  3. Ann Perkins
  4. Ben Wyatt
  5. Donna Meagle

CSS

/* Change the style of the unordered list*/

ul li { list-style: upper-latin inside; }

/* Change the style of the ordered list*/

ol li { list-style: disc inside url(https://source.unsplash.com/random/16x16/?graphic); }

reults

Let's customize the style of our list elements below. You can change the appearance of bullet points in unordered lists, or numbering in ordered lists into roman-style numbers, latin-style numbers or even images.

Try these (or anything else!):

Copyright 2023