Styling Lists
The Three Noble List Companions
On your journey through the realm of lists, you’ll encounter three noble companions. The first, a meticulous accountant, brings order to chaos by neatly placing numbers or letters beside your list items. The second, an eccentric artist, adorns the list with elaborate symbols and even images, treating them like precious jewels. The third, a master of harmony, ensures everything remains perfectly balanced, no matter how wild your creativity runs.
But beware! These companions have their quirks. The accountant might stubbornly cling to his beloved Roman numeral system, while the artist may suddenly replace all bullets with tiny dragons. And the harmony master? Well, he’ll never tire of reminding you that even the most chaotic list design needs balance.
Lists with Style
Bullets, symbols, icons – make your lists truly unique!
Bullet Points
Adjust the Style of Your Lists
With list-style-type, you can dress up your first noble companion, the accountant, in a brand-new wardrobe. Whether he sports filled circles, open circles, or squares, the choice is entirely yours. And if you prefer, you can even let him roam around without any symbols at all. Design freedom? Absolutely!
ul {
list-style-type: circle;
}Possible values include:
- disc (default, filled circle)
- circle (open circle)
- square
- none (no bullet points)
Stylish Numbering
The Accountant at His Best
Even the master of numbers can be versatile: whether he opts for digits, letters, or Roman numerals is entirely up to you. He adapts to your needs and ensures that your ordered list embodies the perfect symbolism. This way, you bring the order your content deserves and command the respect it warrants.
ul {
list-style-type: lower-alpha;
}Possible values include:
- decimal (default, numbers)
- lower-alpha (lowercase letters)
- upper-alpha (uppercase letters)
- lower-roman (lowercase Roman)
- upper-roman (uppercase Roman)
Symbols & Content
Unleash unique symbols for your lists
If you’re tired of the usual bullet points and crave a touch of enchantment, transform your list symbols with a clever spell: list-style-type: none; combined with the magical ::before pseudo-element. With a sprinkle of creativity, you can adorn your lists with symbols as unique as your webpage. Adjust their color and size to create a list that truly shines.
Explore a collection of HTML entities here:
https://www.toptal.com
li {
list-style-type: none;
}
li::before {
content: '\26E6';
margin-right: 10px;
color: purple;
font-size: 1.5rem;
}Possible values include:
- list-style-type: none; removes the default bullet points.
- ::before adds a Unicode symbo in front of each list item.
- margin-right creates space between symbol and text.
Lists with Images
The Artist at Work
Our eccentric artist rejoices: with list-style-image, you can replace traditional bullet points with carefully selected images. After all, a picture is worth a thousand circles, isn’t it? Choose your graphics wisely, as they add a touch of uniqueness to your lists and transform them into a visual experience.
ul {
list-style-image: url('img/list-icon.png');
}
li {
margin-left: 10px;
}list-style-image: replaces the bullet points with an image
Positioning in the List
The Harmony Master’s Skill
Finally, the Harmony Master ensures that everything is in its rightful place. With list-style-position, you determine whether the bullet appears inside or outside the list content. Like a skilled architect, the Master places each symbol perfectly, maintaining balance and harmony in your design.
ul {
list-style-position: inside;
}list-style-position: inside; places the bullet within the list content.
In this lesson, you have learned…
- How to customize bullet points using list-style-type by applying circles, squares, or letters.
- Why you can set unique symbols with list-style-type: none and ::before to make your lists visually distinctive.
- How to use list-style-image to replace bullet points with custom images and enhance your list’s appearance.
- Why list-style-position is crucial to define whether the bullet appears inside or outside the list item’s content area.
Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!
The Symbols of Alchemy
Alchemists maintain their precious ingredient lists with a meticulousness that even the fussiest elves would respect. Every symbol, every mark tells a story—from the star for rare ingredients to the skull for “do not mix these up!” With CSS, you can give these magical lists their own unique flair: transform bullet points, add custom icons, and adjust positioning to highlight the significance of each ingredient. Your lists will become as distinctive as the potions they describe!
Your Task: Styling Lists
- Adjust List Symbols (list-style-type)
For the .ingredients class, apply the list-style-type property with values like circle, square, or a custom numbering format. - Add an Image as a Symbol (list-style-image)
For the .tools class, use list-style-image to set an image as the bullet, e.g., url(‘img/list-icon.png’). - Set the Position of List Symbols (list-style-position)
For the .ingredients class, use list-style-position: inside; to position the list symbols within the content block. - Use Pseudo-Elements (::before and ::after)
For the .tools class, apply the ::before pseudo-element to prepend a symbol before each list item. For instance, use an HTML entity like content: ‘\02606’; to add a star.
Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!
.ingredients {
list-style-type: circle;
list-style-position: inside;
}
.ingredients li {
list-style-type: none;
}
.ingredients li::before {
content: '\02606';
margin-right: 10px;
color: purple;
font-size: 1.5rem;
}
.tools ul {
list-style-image: url('assets/img/list-icon.png');
}
.tools li {
margin-left: 10px;
}