Ticker

6/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

List styling in CSS




 In order to understanding table styling, we have different ways:

To style the list we may simply code as:

<style>

ol {

color:#006600;

}

</style>

OR

<style>

ol li{

color:#006600;

}

</style>

OR

<style>

ol li # mylist{ /*If we want to add styling in particular list item having id name as mylist*/

color:#006600;

}

</style>

OR

<style>

#mylist  {

color:#006600;

}

</style>

EXAMPLE:

<!DOCTYPE html>

<html >

<head>

<title>List styling in CSS</title>

<style>

ol li # r1 {

color:#006600;

}

ol{

list-style-type: lower-alpha;

/*In this way we can make the order of the list as a,b,c......;*/

list-style-position: outside;

/*This is how we can set the position of the ordered list*/

}

li: last child{

background : black;

}

/*the above lines of code are used to style the specific child/row of the list*/

</style>

</head>

<body>

<ol>

<li id="r1">HTML</li>

<li>CSS</li>

<li>Javascript</li>

<li>Bootstrap</li>

</ol>

</body>

</html>


Post a Comment

0 Comments