Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create bullets using li elements?
The <li> element is used to define list items within an ordered list (<ol>) or an unordered list (<ul>). The <li> element stands for "list item". Bullets are most commonly used with unordered lists to create visual markers for each item, making content easier to read and organize.
Syntax
Following is the basic syntax for creating bulleted lists using <li> elements
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
The CSS list-style-type property controls the bullet appearance
ul {
list-style-type: disc; /* disc, circle, square, none */
}
The default bullet style for unordered lists is disc, which appears as a filled circle.
Default Disc Bullets
By default, unordered lists display disc bullets. Here's how to create a simple bulleted list
Example
<!DOCTYPE html>
<html>
<head>
<title>Default Disc Bullets</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Fruits List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
The output displays a bulleted list with default disc markers
Fruits List ? Apple ? Banana ? Orange ? Mango
Different Bullet Styles
The list-style-type property offers several bullet styles: disc (filled circle), circle (hollow circle), square (filled square), and none (no bullets).
Example
<!DOCTYPE html>
<html>
<head>
<title>Different Bullet Styles</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.circle { list-style-type: circle; color: red; }
.square { list-style-type: square; color: green; }
.disc { list-style-type: disc; color: blue; }
ul { margin-bottom: 20px; }
</style>
</head>
<body>
<h2>Circle Bullets</h2>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>
<h2>Square Bullets</h2>
<ul class="square">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ul>
<h2>Disc Bullets</h2>
<ul class="disc">
<li>New York</li>
<li>London</li>
<li>Paris</li>
</ul>
</body>
</html>
The output shows three different bullet styles with different colors
Circle Bullets ? Coffee (red text) ? Tea (red text) ? Juice (red text) Square Bullets ? JavaScript (green text) ? Python (green text) ? Java (green text) Disc Bullets ? New York (blue text) ? London (blue text) ? Paris (blue text)
Nested Lists with Bullets
Nested lists automatically use different bullet styles for each level. The browser typically uses disc for the first level, circle for the second, and square for the third level.
Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Bulleted Lists</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Food Categories</h2>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</li>
<li>Beverages
<ul>
<li>Water</li>
<li>Juice</li>
<li>Coffee</li>
</ul>
</li>
</ul>
</body>
</html>
The nested structure shows different bullet styles at each level
Food Categories ? Fruits ? Apple ? Banana ? Orange ? Vegetables ? Carrot ? Broccoli ? Spinach ? Beverages ? Water ? Juice ? Coffee
Removing Bullets
To create lists without bullets, use list-style-type: none. This is useful for navigation menus or when you want to style list items differently.
Example
<!DOCTYPE html>
<html>
<head>
<title>Lists Without Bullets</title>
<style>
.no-bullets {
list-style-type: none;
padding-left: 0;
}
.no-bullets li {
background-color: #f0f0f0;
margin: 5px 0;
padding: 10px;
border-left: 4px solid #007acc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Navigation Menu (No Bullets)</h2>
<ul class="no-bullets">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</body>
</html>
The output shows styled list items without bullets
Navigation Menu (No Bullets) [Home] (gray background with blue left border) [About] (gray background with blue left border) [Services] (gray background with blue left border) [Contact] (gray background with blue left border)
Key Points
-
The <li> element must be contained within <ul> (unordered) or <ol> (ordered) elements.
-
Default bullet style is
discfor unordered lists. -
Nested lists automatically use different bullet styles: disc ? circle ? square.
-
The
list-style-typeproperty controls bullet appearance. -
Use
list-style-type: noneto remove bullets entirely.
Conclusion
Creating bullets with <li> elements is straightforward using unordered lists (<ul>). The list-style-type property provides control over bullet appearance, offering options like disc, circle, square, or none. Nested lists automatically vary bullet styles, making content hierarchies visually clear and organized.
313 Views
