CSS Lists
Lists play an important role in presenting the information in more elegant way rather than using simple paragraphs. Lists represent the important points of a huge topic.
<style>
.nav ul{
margin:5px;
list-style-type:none;
}
.nav ul li{
float:left;
}
.nav ul li a{
text-decoration:none;
padding:20px 10px;
background-color:rgb(26,161,242);
color:rgb(255,255,255);
border-right:1px solid rgb(210,210,210);
}
.nav ul li a:hover{
box-shadow:2px 5px 2px rgb(210,210,210);
padding-top:23px;
}
@media screen and (max-width:480px){
.nav ul li a{
text-decoration:none;
padding:6px 3px;
}
.nav ul li a:hover{
padding-top:8px;
}
}
</style>
</head>
<body>
<br>
<div class="nav">
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</div>
Lists are mostly used to make a navigation bar. Then we use navigation bar to navigate other pages.
There are two important types of lists.
In the following section, we will discuss how to design a list.
list-style-type
This property defines the type of list item markers for both ordered and unordered lists.
ordered lists
The following are the possible values of list-style-type for the ordered lists.
| Tags | Description |
|---|---|
| none | |
| no item markers for list items. | |
Example | |
| upper-roman | |
| defines upper-roman list item markers. For example, I,II,III,IV....... is the list of upper-roman item markers. | |
Example | |
| lower-roman | |
| defines lower-roman list item markers such as i,ii,iii,iv.....is a list of lower-roman markers. | |
Example | |
| upper-alpha | |
| upper-alpha means the capital letters as the list item markers i.e. A,B,C,D...... | |
Example | |
| lower-alpha | |
| lower-alpha represents lower case alphabets as the list item markers i.e. a,b,c,d..... | |
Example |
unordered lists
The following are the possible values of list-style-type for the ordered lists.
| Tags | Description |
|---|---|
| square | |
| defines square shape list item markers. | |
Example | |
| circle | |
| circle shape type list item markers are defined. | |
Example | |
| bullets | |
| bullets are the list item markers. This is the default value of list-style type. | |
Example |
list-style-image
It represents the image as the list item markers instead of the bullets.
<style>
ul{list-style-image:url("/images/codingb-16x16.png");}
</style>list-style-position
It defines the position of the item markers. See the simple examples to understand each value of list-style-type.
<div style="width:100%; height:auto; float:left;">
<div style="width:240px; float:left;">
<ul style="list-style-position:inside;">
<li>The position of this list is inside. The position of this list is inside.</li>
<li>The position of this list item is inside. The position of this list is inside.</li>
</ul>
<p style="text-align:center;"><strong>list-style-position:inside;</strong></p>
</div>
<div style="width:240px; float:left;">
<ul style="list-style-position:outside;">
<li>The position of this list is outside. The position of this list is outside.</li>
<li>The position of this list item is outside. The position of this list is outside.</li>
</ul>
<p style="text-align:center;"><strong>list-style-position:outside;</strong></p>
</div>
</div>