Header Ads Widget

Create Lists with HTML & CSS

My codding spot November 13, 2021

 List is series of product name, person, items etc … which defines a meaningful group or sequences. 

For example, list of programing languages. Here programming languages is a group of different programming languages such as PHP, Java, ASP,C, etc..

This blog post is about Lists in HTML and how to styles lists with CSS.


Precap

The CSS properties for styling HTML lists
  • list-style-type property
  • list- style-image property
  • list-style-position property
  • list-style (shorthand property)


So let’s start with definition.

What is HTML lists?

HTML lists categorise related content into one group using list tags. All list items contains one or more list elements.

HTML lists categorise into three different types.

1. <ol> :- Ordered list
2. <ul> :- Unordered list
3. <dl> :- Definition list (Description list)

HTML Ordered list

  • An ordered list marked with numeric order by default. You can specify another marked types in ordered list.

Following types are used for ordered list.
• Numbers
• alphabets (either upper case [A-Z] or lower case[a-z])
• Romans letters (either upper case [I,II,..] or lower case[i,ii,..] ).

By default type of ordered list is number.

  • <ol></ol> tag is used to display ordered list. <li></li> tags are placed in between <ol></ol> tag.

Syntax of ordered list

<ol>
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
</ol>

Example of ordered list


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
</head>
<body>
<h1>7 days of week</h1>
<ol>
   <li>Sunday</li>
   <li>Monday</li>
   <li>Tuesday</li>
   <li>Wedenesday</li>
   <li>Thursday</li>
   <li>Friday</li>
   <li>Saturday</li>
</ol>
</body>
</html>

Output:-
HTML Ordered list (<ol></ol>)
HTML ordered list

HTML Unordered list

  • Unordered list use bullets for list items.

Following types of bullets are used with Unordered list.

• square
• disc 
• circle

By default type of unordered list is disc.

  • <ul></ul> tag is used to create unordered list. <li></li> elements are contains list items and placed in between <ul></ul> tag.

Syntax of unordered list


<ul>
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
</ul>

Example of unordered list


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
</head>
<body>
<h1>Names of fruits</h1>
<ul>
   <li>Mango</li>
   <li>Orange</li>
   <li>Banana</li>
   <li>Grapes</li>
   <li>Apple</li>
</ul>
</body>
</html>

Output:-
HTML unordered list (<ul></ul>)
HTML unordered list 

HTML Description / Definition list

  • The description or definition list is little different from above two lists.
  •  Definition list displays description of definition term.
  • It is supported by both HTML and XHTML.
For definition list following tags are used.
<dd> :- a term definition
Describes term in definition list.
<dt> :- a term itself
Defines terms in definition list.
<dl> :- description or definition list
It contains list of terms and it’s description. The <dt> and <dd> tags are placed between <dl> and </dl> tags.

Syntax of description list


<dl>
  <dt>term</dt>
  <dd>Description of term</dd>
  <dt>term</dt>
  <dd>Description of term</dd>
</dl>

Example of definition/description list


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
</head>
<body>
<h1>Computer Memory</h1>
<dl>
   <dt><b>RAM</b></dt>
   <dd>RAM stands for Read Only Memory.</dd>
   <dt><b>ROM</b></dt>
   <dd>ROM stands for Random Access Memory.</dd>
</dl>
</body>
</html>

Output:-
HTML Definition/description list (<dl></dl>)
HTML Definition/description list

HTML Nested lists

A list inside another list is called nested list. You can put unordered list inside ordered list.

Example of Nested list


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
</head>
<body>
<h1>Fruits by their colors</h1>
<ol>
   <li>RED</li>
   <ul>
      <li>Apple</li>
      <li>Cherry</li>
      <li>Strawberry</li>
   </ul>
   <li>Green</li>
   <ul>
      <li>Grapes</li>
      <li>Avacado</li>
      <li>Pear</li>
   </ul>
</ol>
</body>
</html>

Output:-
HTML Nested lists
HTML nested list 

 HTML lists attributes 

• type attribute

The type attribute specify the type of list marker. In value of type attribute specify it’s style types as mentioned above.

Example:-  <ol> type = I


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
</head>
<body>
<h1>Rainbow colors</h1>
<ol type="I">
   <li>Violet</li>
   <li>Indigo</li>
   <li>Blue</li>
   <li>Green</li>
   <li>Yellow</li>
   <li>Orange</li>
   <li>Red</li>
</ol>
</body>
</html>

Output:-
type attribute of HTML lists <ol> tag
HTML list type attribute (ordered list)


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
</head>
<body>
<h1>Primary Colors</h1>
<ul type="square">
   <li>RED</li>
   <li>BLUE</li>
   <li>YELLOW</li>
</ul>
</body>
</html>

Output:-
type attribute of HTML lists <ul>
HTML type attribute unordered list 

• start attribute

The start attribute specifies a number from where you want to start list. Start attribute is use for <ol> tag. This attribute only used with <ol> tag.

 Example


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
</head>
<body>
<h1>7 days of week</h1>
<ol type="i" start="4">
   <li>Sunday</li>
   <li>Monday</li>
   <li>Tuesday</li>
   <li>Wedenesday</li>
   <li>Thursday</li>
   <li>Friday</li>
   <li>Saturday</li>
</ol>
</body>
</html>

Output:-
HTML list start attribute of <ol> ordered list
HTML ordered list start attribute 

CSS list style properties 

You can also change types of lists using CSS.

 Following are the CSS properties applied to HTML lists.

1. list-style-type property

  • The list-style-type property specifies various types of markers for list items. 
  • This property works similar as type attribute.
  • Values for ordered list <ol>:-
              upper-alpha
              lower-alpha
              upper-roman
              lower-roman
  • Values for unordered list <ul>:-
              square
              disc
              circle

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
<style>
ol.season{
list-style-type:upper-alpha;
}
ul.flower{
list-style-type:circle;
}
</style>
</head>
<body>
<!--list style type of season class is upper alpha-->
<h1>Month of winter season</h1>
<ol class="season">
   <li>December</li>
   <li>January</li>
   <li>February</li>
</ol>
<!--list style type of flower class is circle-->
<h1> List Your Flowers</h1>
<ul class="flower">
   <li>Rose</li>
   <li>Lotus</li>
   <li>Tulip</li>
</ul>
</body>
</html>

Output:-
CSS list-style-type property for ordered list and unordered list
CSS list-style-type property 

2. list-style-image property

The list-style-image property specifies an image instead of list item marker.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
<style>
ol.car{
list-style-image:url("IMG-20211112-WA0001~2.jpg");
}
</style>
</head>
<body>
<h1>Cars</h1>
<ol class="car">
   <li>B.M.W</li>
   <li>Audi</li>
   <li>Volvo</li>
   <li>Renault</li>
</ol>
</body>
</html>

Output:-
CSS list-style-image property
CSS list-style-image property 

3. list-style-position property

  • The list-style-position property specifies position of list item marker. You can put list item marker inside or outside the list item. 
  • The default position is outside.

list-style-position: inside; 

display list item marker inside the list item and push the content at start.


1
2
3
4
ol.car{
list-style-image:url("IMG-20211112-WA0001~2.jpg");
list-style-position:inside;
}

Output:-
CSS list-style-position: inside;
CSS list-style-position property (position: inside)


List-style-position: outside; 

display list item marker outside the list item. 

1
2
3
4
ol.car{
list-style-image:url("IMG-20211112-WA0001~2.jpg");
list-style-position:outside;
}

Output:-
CSS list-style-position: outside;
CSS list-style-position (outside)

You can view the difference between two outputs.

How to remove default styles from list items?

You can also remove list item marker by setting list-style-type property to none. Also remove margin and padding.

list-style-type: none; removes bullets from list items.

1
2
3
4
5
ol.car{
list-style-type: none;
padding:0;
margin:0;
}


list-style-type:none;
list-style-type:none;

The shorthand property :- list-style property 

Shorthand property for styling HTML lists is list-style property which includes above three properties values.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>HTML lists</title>
<style>
ol.car{
list-style:upper-roman inside;
}
</style>
</head>
<body>
<h1>Cars</h1>
<ol class="car">
   <li>B.M.W</li>
   <li>Audi</li>
   <li>Volvo</li>
   <li>Renault</li>
</ol>
</body>
</html>

Output:-
list-style shorthand property
list-style shorthand property

Examples of HTML list 

HTML program for creating list of 5 classmates name and marks by using different order list type attribute 


<!DOCTYPE html>
<html>
<head>
<title>5 classmate marks</title>
</head>
<style>
div
{ 
height:auto;
width:auto;
background-color:#ff6969;
padding:15px;
box-sizing:padding-box;
}
.nm
{
color:#1e2d4d;
font:18pt bold;
}
.mark
{
color:#6b645d;
font:14pt bold;
list-style-type:disc;
}
</style>
<body>
<div>
<h1>List of 5 Student Marks</h1>
<ol>
<li class="nm">Misha Jadhav</li>
<ul>
<li class="mark">Marks in 3 Subject
</li>
</ul>
<ol>
<li style="list-style-type:upper-roman">PHP :- <span>67</span></li>
<li style="list-style-type:upper-roman">JavaScript :- <span>80</span></li>
<li style="list-style-type:upper-roman">Java :- <span>56</span></li>
</ol>
<li class="nm">Zen Nautiyal</li>
<ul>
<li class="mark">Marks in 3 Subject
</li>
</ul>
<ol>
<li style="list-style-type:upper-roman">PHP :- <span>77</span></li>
<li style="list-style-type:upper-roman">JavaScript :- <span>67</span></li>
<li style="list-style-type:upper-roman">Java :- <span>89</span></li>
</ol>
<li class="nm">Sanya Agarwal</li>
<ul>
<li class="mark">Marks in 3 Subject
</li>
</ul>
<ol>
<li style="list-style-type:upper-roman">PHP :- <span>50</span></li>
<li style="list-style-type:upper-roman">JavaScript :- <span>70</span></li>
<li style="list-style-type:upper-roman">Java :- <span>60</span></li>
</ol>
<li class="nm">Nitya Moahan</li>
<ul>
<li class="mark">Marks in 3 Subject
</li>
</ul>
<ol>
<li style="list-style-type:upper-roman">PHP :- <span>70</span></li>
<li style="list-style-type:upper-roman">JavaScript :- <span>90</span></li>
<li style="list-style-type:upper-roman">Java :- <span>78</span></li>
</ol>
<li class="nm">Moloy Basu</li>
<ul>
<li class="mark">Marks in 3 Subject
</li>
</ul>
<ol>
<li style="list-style-type:upper-roman">PHP :- <span>87</span></li>
<li style="list-style-type:upper-roman">JavaScript :- <span>90</span></li>
<li style="list-style-type:upper-roman">Java :- <span>60</span></li>
</ol>
</ol>
</ul>
</div>
</body>
</html>

Output:-
Ordered and unordered list with different list-style-type
Ordered and unordered list with different list-style-type 


Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments