Everything 4 PC: Styling Unordered lists in different ways using CSS

There are a lot of ways you can style your unordered list items. Here I will show some ways to do it.

list.html
<!DOCTYPE html>
<html>
<head>
<title>Styling Lists</title>
<link rel="stylesheet" type="text/css" href="list.css">
</head>
<body>
<div id="container">
<ul id="styletype1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="styletype2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="styletype3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="styletype4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="styletype5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="styletype6">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="styletype7">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="styletype8">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

</body>
</html>

list.css
ul{
font-size:18px;
font-family:calibri
}
#styletype1 {
list-style-type:circle;
color:#00bbaf;
}
#styletype2 {
list-style-type:square;
color:blue;
}
#styletype3 {
list-style-type:upper-alpha;
color:green;
}
#styletype4 {
list-style-type:upper-latin;
color:red;
}
#styletype5 {
list-style-type:upper-roman;
color:#9037cf;
}
#styletype6 {
list-style-type:lower-greek;
color:#000000;
}
#styletype7 {
list-style-type:decimal-leading-zero;
color:#afdcba;
}
#styletype7 {
list-style-type:armenian;
color:blue;
}
#styletype7 {
list-style-image:url("love.png");
font-family:helvetica;
font-size:20px;
}

Output looks pretty much like this

So, this is it guys for today, if any queries comment below or mail me @ ething4pc.blogspot.in

Pages

March 28, 2015

Styling Unordered lists in different ways using CSS

No comments: