HTML Unordered List with CSS Bullet Style
easyListsHTML
Unordered lists show bullets; CSS decides what the bullets look like.
The question
Make an unordered list of: Cherry, Papaya, Guava. Use CSS to give it disc bullets (list-style-type: disc).
The code
index.html
<ul>
<li>Cherry</li>
<li>Papaya</li>
<li>Guava</li>
</ul>
<style>
ul { list-style-type: disc; }
</style>Result
How it works
- 1<ul> makes a bulleted list; each item is an <li>.
- 2In CSS, ul { list-style-type: square; } changes the bullet shape (disc, circle, square or none).
- 3The CSS can go in a <style> block or in a separate style.css file.
Common mistakes
- Using the old type attribute on <ul> — it still works but CSS is the correct way.
- Spelling the property list-type or list-style-types.
Now solve a similar question yourself
A new HTML / CSS / JS question every time, checked instantly.