menu
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
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.
You miss 100% of the shots you never take.
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.
You miss 100% of the shots you never take.
We can change both unordered and ordered lists into image icons.
list-style:
Tuition is valuable, but you know what's invaluable? Intuition.
You miss 100% of the shots you never take.
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.
You miss 100% of the shots you never take.
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.
<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>/* 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); }
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