Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 often used only for unordered lists. In HTML, unordered lists are created using the <ul> element and each list item is defined using the <li> elements.
Syntax
ul {
list-style-type: disc;
}
<ul>
<li>Items…</li>
</ul>
The list-style-type property allows us to specify the type of marker, such as bullets, squares, circles, numbers, or letters, that will be displayed with each <li> element.
The default bullet style for the unordered list(</ul>) is Disc.
Example 1
In this example, we are going to create default-style disc bullets for an unordered list and also demonstrate the creation of bullets for nested lists using <li> elements.
Algorithm
Upload a style section consisting of CSS styles for the page.
Style the list and list items as desired, including setting the list-style-type property to "disc" for bullet points.
Add an unordered list with some list items using (<li>)elements that represent different fruits
Create a nested list of food items including fruits vegetables and drinks using <li> elements with default bullet style (disc).
<!DOCTYPE html>
<html>
<head>
<title>(Example)Create Bullets List using li elements</title>
<!-- CSS styling for the document -->
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
font-size: 24px;
margin-bottom: 10px;
}
ul {
list-style-type: disc; /* specifies disc as the list item marker */
margin-left: 20px;
margin-bottom: 20px;
}
li {
color: #666;
font-size: 18px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h2>Fruits List</h2>
<!-- Unordered List of Fruits -->
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Nested List</h2>
<!-- Nested List Example -->
<ul>
<!-- First level item -->
<li>Food</li>
<!-- Second level with Fruits and Vegetables -->
<ul>
<!-- Third level unordered list of Fruits -->
<li>Fruits</li>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<!-- Third level unordered list of Vegetables -->
<li>Vegetables</li>
<ul>
<li>Carrot</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</ul>
<!-- Second level unordered list of Drinks -->
<li>Drinks</li>
<ul>
<li>Water</li>
<li>Juice</li>
<li>Soda</li>
</ul>
</ul>
</body>
</html>
Example 2
Here, using the list-style-type property, we will construct multiple bullet styles and assign them to our list of items.
Algorithm
Define three unique styles for the unordered list using CSS. Set the list-style-type to "circle," "square," or "disc," and then give each style a colour.
Using the ul selector element, create an unordered list.
Set the class property for each list to "circle", "square", or "disc" depending on the style you desire for that list.
Create several list items with the li element within each ul element. Each li element represents a single list item.
<!DOCTYPE html>
<html>
<head>
<title>Creating Bullets Using li Elements</title>
<style>
/* Set left margin of all unordered lists to 30px */
ul {
margin-left: 30px;
}
/* Use circle to create circle bullets and set the colour to red */
.circle {
list-style-type: circle;
color: red;
}
/* Use square to create square bullets and set the colour to green */
.square {
list-style-type: square;
color: green;
}
/* Use disc to create disc bullets and set the colour to blue */
.disc {
list-style-type: disc;
color: blue;
}
</style>
</head>
<body>
<!-- Create a heading for the page -->
<h1>Creating Bullets Using li Elements</h1>
<!-- Create an unordered list with circle bullets and items related to beverages -->
<h2>List of beverages</h2>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Orange Juice</li>
<li>Water</li>
</ul>
<!-- Create an unordered list with square bullets and items related to programming languages -->
<h2>Different Programming Languages</h2>
<ul class="square">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>PHP</li>
</ul>
<!-- Create an unordered list with disc bullets and items related to cities -->
<h2>Popular cities</h2>
<ul class="disc">
<li>New York</li>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
<li>Sydney</li>
</ul>
</body>
</html>
Conclusion
Bullets are a versatile and powerful way to present information in a way that is easy to study and apprehend. Some common use instances for bullets consist of featuring capabilities, outlining steps, presenting alternatives, Summarising key factors and creating lists.
Unicode characters: They are a form of character encoder that permits a huge variety of special characters and symbols.
CSS pseudo-elements: It permits us to create decorative elements that can be added to HTML elements, we use the ‘::before’ or ‘::after’ pseudo-factors to add custom bullet factors to our lists.
JavaScript libraries: There are numerous JavaScript libraries that can be used to create custom bullet points and other visual outcomes. A few famous libraries are jQuery, D3.js, and Snap.svg.
107 Views
