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.

Example


Try </>

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.

  • Ordered lists (ol)
  • Unordered lists (ul)

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.

TagsDescription
none
no item markers for list items.
{list-style-type:none;}
</>
upper-roman
defines upper-roman list item markers. For example, I,II,III,IV....... is the list of upper-roman item markers.
{list-style-type:upper-roman;}
</>
lower-roman
defines lower-roman list item markers such as i,ii,iii,iv.....is a list of lower-roman markers.
{list-style-type:lower-roman;}
</>
upper-alpha
upper-alpha means the capital letters as the list item markers i.e. A,B,C,D......
{list-style-type:upper-alpha;}
</>
lower-alpha
lower-alpha represents lower case alphabets as the list item markers i.e. a,b,c,d.....
{list-style-type:lower-alpha;}
</>

unordered lists

The following are the possible values of list-style-type for the ordered lists.

TagsDescription
square
defines square shape list item markers.
{list-style-type:square;}
</>
circle
circle shape type list item markers are defined.
{list-style-type:circle;}
</>
bullets
bullets are the list item markers. This is the default value of list-style type.
{list-style-type:bullets;}
</>

list-style-image

It represents the image as the list item markers instead of the bullets.

Example

<style>
ul{list-style-image:url("/images/codingb-16x16.png");}
</style>
Try </>

list-style-position

It defines the position of the item markers. See the simple examples to understand each value of list-style-type.

Example

  • The position of this list is inside. The position of this list is inside.
  • The position of this list item is inside. The position of this list is inside.

list-style-position:inside;

  • The position of this list is outside. The position of this list is outside.
  • The position of this list item is outside. The position of this list is outside.

list-style-position:outside;

Try </>

navigation bar

Now let's create a simple navigation bar using the basic properties that we have studied so far. You will also take a review of the display, float, padding properties.

Firstly, discard the list item markers by using the following property.

ul

Example

<style>
ul{list-style-type:none;}
</style>
Try </>

Now, there will be no list item markers.

ul li

The list items (li) are block level elements. If float:left; property is used for the list items, then the list items (li) float towadrds left one after the other.

Example

<style>
ul li{float:left;}
</style>

Try </>

The list items are aligned horizontally.

ul li a

Specify the background-color of 'a' element.

Example

<style>
ul li a{
background-color:rgb(26,161,242);
color:rgb(255,255,255);
border-right:1px solid rgb(210,210,210);
}
</style>
Try </>

color property defines the color of the font. And border property defines the border of 1px.


Now, use the padding property to increase the area around an element (The area between the text of element and the border of element).

Example

<style>
ul li a{padding:20px 10px;}
</style>
Try </>

padding-left and padding-right are 20px. padding-top and padding-bottom are 10px. The list would look like this.


Apply text-decoration property to discard the lines under each list item.

Example

<style>
ul li a{text-decoration:none;}
</style>

Try </>

Every thing about the text manipulation will be described in next tutorials.

:hover pseudo class

Now apply the :hover property.

Example

<style>
ul li a:hover{
box-shadow:2px 5px 2px rgb(210,210,210);
padding-top:23px;
}
</style>

Try </>

The box-shadow produces the shadow for b element on hovering. You will learn about the box-shadow in the next tutorials.


Sinced we defined the padding-top propery of a as 20px (ul li a {20px 10px;}). But the padding-top of a increases by 3 i.e. 23 on hovering.


It is just an application of the previous tutorials that you have studied so far. You will study thoroughly about how to make navigation bar in the next tutorial.



Was this article helpful?

 

Email:

Message:

Get the newsletter