Lists in css in web development

Ordered List

Example: List of fruits

  1. Banana
  2. Orange
  3. Apple

Un-ordered List:

  • Banana 
  • Orange
  • Apple

How to style the un ordered list with CSS?

Example 1:

File 1 :  stylefile.css

ul.first {
    list-style-type: square;
}

File 2: index.html

<head>

<style>

<link rel=”Stylesheet” type=”text/css” href=”stylefile.css” />

</head>

<p>This is unordered lists</p>
<ul class=”first”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

Output:

This is unordered list

  • Banana 
  • Orange
  • Apple

How to style the ordered list with CSS?

Example 2:

File 1 :  stylefile.css

ol.first {
    list-style-type:upper-roman;
}

File 2: index.html

<head>

<style>

<link rel=”Stylesheet” type=”text/css” href=”stylefile.css” />

</head>

<p>This is ordered list with upper roman style</p>
<ol class=”first”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

Output:

This is ordered list with upper roman style

  1. Banana 
  2. Orange
  3. Apple

Some explanations:

CSS 

How it works

ol {
background: red;
padding: 20px;
}
It will set the background color as red and set padding to 20px for ordered list
ul {
background:red;
padding: 66px;
}
 It will set the background color as red and padding to 20px for un-ordered list.
 ul li {
background:red;
margin: 44px;
}
 it will apply the css on all list of un-ordered lists.
 ol li {
background:red;
margin: 33px;
}
 It will apply the css on all lists of ordered lists.
ol.t4tutorials{
background:red;
margin: 33px;
}
 It will apply the CSS on ordered list that have class t4tutorials.

 

 

 

 

Welcome to all friends. The reason for our success is only your love for T4Tutorials. Our team is always available to answer your queries regarding any kind of confusions or discussion regarding your study and career matters. For discussion with us please join our facebook group "T4Tutorials.com". The link of the group is mentioned below.Thanks and love to all for connecting with us. We are nothing without you. Love you all.....

Leave a Reply