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
Donald Trump Jr.
5 hours agoFull Coverage of Iowa Rally, Live! | TRIGGERED Ep.255
5,978 watching -
LIVE
Barry Cunningham
4 hours agoBREAKING: PRESIDENT TRUMP SPEAKS AT AMERICA'S 250TH ANNIVERSARY KICK-OFF RALLY!
3,592 watching -
LIVE
AimControllers
2 days ago🔴LIVE - THE PRE GAME LOBBY PODCAST
319 watching -
LIVE
megimu32
59 minutes agoOTS: Born to Grill, Raised on Fireworks - 4th of July Throwbacks
150 watching -
1:27:38
Glenn Greenwald
3 hours agoGlenn Takes Your Questions on the Ukraine War, Peter Thiel and Transhumanism, Trump’s Middle East Policies, the New Budget Bill, and More | SYSTEM UPDATE #481
21.8K6 -
LIVE
SpartakusLIVE
3 hours agoSHAVING my BEARD on stream TONIGHT || Chiseled JAWLINE, peak MASCULINITY, and SUAVE FRESH FACE
177 watching -
10:10
Nicholas Bowling
1 hour agoWe Preached the Gospel to College Students… Then THEY Preached Too | UT Recap
21 -
1:52:01
TheRyanMcMillanShow
4 hours agoTrigger Happy 2: Heavy and Deep - RMS 035
221 -
DVR
Edge of Wonder
5 hours agoPresidential Hauntings, Bizarre Food & Independence Day Mandela Effect: EOW July 4th Party!
8.46K1 -
1:55:32
Nick Freitas
2 hours agoDo We Need a New Declaration of Independence?
3055