CSS on lists:
CSS on lists:
Lists are another important element on a web page. CSS works for styling both lists i.e. the unordered and the ordered lists. Following are the properties used for styling lists:
|
Property
|
Value
|
Used On
|
Description
|
|
list-style-type
|
None; / circle; / disc; / square;
|
ul
|
List styles in UL
|
|
decimal; / decimal-leading-zero; / lower-alpha; / upper-alpha; / lower-roman; / upper-roman;
|
ol
|
List styles in OL
|
|
list-style-image
|
url('sqpurple.gif');
|
ul
|
Image as list style
|
|
list-style-position
|
outside; / inside;
|
ul , ol
|
Position of list
|
|
background-color
|
#4CAF50;
|
ul , ol
|
Background color of list elements
|
|
background-image
|
url("paper.gif");
|
ul , ol
|
background-image
|
Example 1: list-style-type & list-style-image in unordered lists
<![CDATA[<html>
<head>
<style>
#l1{list-style-type:none;}
#l2{list-style-type:disc;}
#l3{list-style-type:circle;}
#l4{list-style-type:square;}
#l5{list-style-image:url(pic.jpg);}
</style>
</head>
<body style="background-color:white;">
<ul id="l1">
<li>India</li>
<li>England</li>
</ul>
<ul id="l2">
<li>India</li>
<li>England</li>
</ul>
<ul id="l3">
<li>India</li>
<li>England</li>
</ul>
<ul id="l4">
<li>India</li>
<li>England</li>
</ul>
<ul id="l5">
<li>India</li>
<li>England</li>
</ul>
</body>
</html>]]>
Output 1:
Example 2: list-style-type in ordered lists
<![CDATA[<html>
<head>
<style>
#l1{list-style-type:decimal;}
#l2{list-style-type:decimal-leading-zero;}
#l3{list-style-type:lower-alpha;}
#l4{list-style-type:lower-roman;}
</style>
</head>
<body style="background-color:white;">
<ol id="l1">
<li>India</li>
<li>England</li>
</ol>
<ol id="l2">
<li>India</li>
<li>England</li>
</ol>
<ol id="l3">
<li>India</li>
<li>England</li>
</ol>
<ol id="l4">
<li>India</li>
<li>England</li>
</ol>
</body>
</html>]]>
Output 2:
Example 3: list-style-position & background-color
<![CDATA[<html>
<head>
<style>
#l1
{
list-style-type:disc;
background-color:pink;
list-style-position:inside;
}
#l2
{
list-style-type:disc;
background-color:lightgreen;
list-style-position:outside;
}
</style>
</head>
<body style="background-color:white;">
<ul id="l1">
<li>India</li>
<li>England</li>
<li>Australia</li>
<li>West Indies</li>
</ul>
<ul id="l2">
<li>India</li>
<li>England</li>
<li>Australia</li>
<li>West Indies</li>
</ul>
</body>
</html>]]>
Output 3:
Example 4: background-image, border, box-shadow and hover state
<![CDATA[<html>
<head>
<style>
#l1
{
list-style-type:disc;
background-image:url('scene2.jpg');
border:1px solid black;
}
#l2
{
list-style-type:disc;
background-image:url('scene2.jpg');
border:1px solid black;
box-shadow:3px 3px 3px gray;
}
li:hover{color:red;text-shadow:3px 3px 3px pink;}
</style>
</head>
<body style="background-color:white;">
<ul id="l1">
<li>India</li>
<li>England</li>
<li>Australia</li>
<li>West Indies</li>
</ul>
<ul id="l2">
<li>India</li>
<li>England</li>
<li>Australia</li>
<li>West Indies</li>
</ul>
</body>
</html>]]>
Output 4: