Premium Only Content

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;
}
-
LIVE
Matt Kohrs
8 hours agoStocks Push New Highs, Breaking Market News & Live Trading $1M w/ AI
607 watching -
LIVE
Wendy Bell Radio
5 hours agoNo One Is Above The Law
7,399 watching -
LIVE
LFA TV
12 hours agoLFA TV ALL DAY STREAM - THURSDAY 7/24/25
4,882 watching -
1:21:47
JULIE GREEN MINISTRIES
2 hours agoUNPRECEDENTED MOVES ARE BEING MADE TO BRING BACK THE GOLD STANDARD IN THIS NATION
43.4K94 -
LIVE
Chicks On The Right
3 hours agoKohlberger gets BLASTED, Macrons sue Candace, Tulsi goes after Obama, and more on Epstein files
2,346 watching -
LIVE
Welcome to the Rebellion Podcast
12 hours agoI Feel Fine - WTTR Podcast Live 7/24
223 watching -
1:20:39
Game On!
16 hours ago $1.05 earnedCommanders Are Built To WIN NOW! 2025 Preview!
13K2 -
LIVE
The Bubba Army
23 hours agoGhislaine Maxwell to Testify! - Bubba the Love Sponge® Show | 7/24/25
2,022 watching -
16:50
Chris From The 740
2 hours agoI Didn’t Expect to Like This Fan So Much – Ogery F11 Review!
2.48K -
8:11
Millionaire Mentor
16 hours agoJohn James SHUTS DOWN AOC With One BRUTAL Sentence
13.2K17