Customizing Bullet Points Using CSS
Learn how to change the look and feel of bullet points (ul items), including various styles that can be selected instead of the default disc option.
Guide Tasks
- Read Tutorial
- Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
Already a Bottega Student? Sign In
In this video, we are going to walk through how to customize bullet points.
To begin, start with a unordered list, represented by the tag <ul>
. Then, create a class for it called content-bullets
, and list items within it. Next, open styles.css
, and we'll define the style with a content-bullets
selector.
As a preliminary step, create some padding, about 40px, on the left side. Then, use the list-style
attribute to choose the square option. Lastly, we'll increase the font-size
to 1.5em.
.content-bullets { padding-left: 40px; font-size: 1.5em; list-style: square; }