CSS Styling Lists Tutorial
Learn How to Style Lists with CSS
Passionate Software Engineer with three years of experience, dedicated to creating robust and scalable web applications. I have a strong foundation in JavaScript, React, Python, and Node.js, and enjoy working with modern tech stacks to build innovative solutions. I'm committed to writing clean and efficient code, following best practices, and staying updated with the latest industry trends.
Throughout my career, I've gained valuable experience in full-stack development, including frontend design, backend development, and database management. I love solving complex problems and implementing creative solutions that enhance user experiences. I believe in the power of collaboration and thrive in cross-functional teams where I can contribute my skills and learn from others.
Beyond coding, I am an avid learner and enjoy sharing my knowledge with the developer community. I regularly contribute to open-source projects, write technical blog posts, and engage in discussions on emerging technologies. I'm always seeking opportunities to expand my skill set and stay at the forefront of software engineering.
In this tutorial, we’ll learn how to style lists with CSS!
Remember that in HTML, we have two list types:
Unordered lists <ul> — list items are defined with bullet points:
- Coffee
- Tea
- Biscuits
Ordered lists <ol> — list items are defined with numbers (or letters i. ii. iii.):
1- Coffee 2- Tea 3- Biscuits
And each item is given the <li> tag, like so:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Biscuits</li>
</ol>
We use lists all the time when building on the web! It’s fair to say that most navigation menus are essentially HTML lists, which have been styled using CSS.
How to style lists with CSS
CSS has several properties that we can use for styling. We can set different list item markers, use images as markers, as well as add colors & background colors.
Let’s take a look at the syntax!
List-style-type
We use list-style-type to set a marker for our list:
li {
list-style-type: square;
}
There are in fact a whole lot of possible values! Such as circle, square, decimal, upper-roman and none. See all the list style types.
It’s worth mentioning that if you’re setting the color of the list marker — it’ll default to whatever the element color is.
Also, you’ll often use the list-style-type:none property to remove the markers completely!
List-style-position
With list-style-position you can position the marker outside (default) or inside of the list content:
li {
list-style-position: outside;
}
li {
list-style-position: inside;
}
When using inside with lists of text, for example, each marker will be contained within the text box, thus indenting the first line of text for each list item.
List-style-image
list-style-image can be used to place a custom image as a marker:
li {
list-style-image: url(goldstar.png);
}
The URL points to the location of the image.
It’s good practice to also set a list-style-type as a fallback, in case the image is unavailable.
List-style (Shorthand)
The list-style shorthand property lets us specify our list-style-type, list-style-position & list-style-image in one declaration.
For example:
ul {
list-style: square inside url("goldstar.png");
}
This would be equivalent to:
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url(goldstar.png);
}
When using this shorthand property, be mindful of the order: list-style-type, then list-style-position, and lastly list-style-image. If any of these properties are missing, they’ll revert to their default state.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
