Learn CSS: Add List Style in Website | Day 13 | Web development course for Beginner

Visit - www.skyhighes.com

Adding List Style in Website
There are two main ways to add list style in a website:

1. Using HTML:

Unordered lists: Use the <ul> tag for unordered lists. Each list item is defined within an <li> tag. You can customize the list style using the list-style-type property in CSS. Here's an example:
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Use code with caution. Learn more
You can then style the list with CSS:

CSS
ul {
list-style-type: disc; /* This sets the list style to circles */
}
Use code with caution. Learn more
There are other list-style-type values available, such as square, decimal, lower-roman, etc.

Ordered lists: Use the <ol> tag for ordered lists. Each list item is still defined within an <li> tag. You can customize the start value and numbering style using attributes within the <ol> tag. Here's an example:
HTML
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Use code with caution. Learn more
You can then customize the list with HTML attributes:

HTML
<ol start="5" type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Use code with caution. Learn more
This code will start the list numbering at 5 and use lowercase alphabetic characters.

2. Using CSS:

You can also use CSS to create custom list styles, including:

Changing the list marker type: Use the list-style-type property to specify a different marker type, such as squares, circles, or images.
CSS
ul {
list-style-type: square;
}

li::marker {
background-image: url("my-image.png");
}
Use code with caution. Learn more
Changing the list marker position: Use the list-style-position property to specify whether the marker appears inside or outside the list item.
CSS
ul {
list-style-position: outside;
}
Use code with caution. Learn more
Changing the list item indentation: Use the margin-left property to indent the list items.
CSS
li {
margin-left: 20px;
}