Lists in css in web development

Last modified on May 26th, 2018 at 1:53 pm

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.

 

 

 

 

Pr. Fazal Rehman Shamil
Publisher of Internatonal Journal of Software Technology & Science ISSN: 2616- 5325
Instructor, Researcher,SEO expert, Web Master, Article Writer and Poet. Feel free to contact.