Nehasolanki: Created page with "'''Title of the script: '''List in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywords..."

2020-11-11T13:06:11Z

Created page with "'''Title of the script: '''List in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywords..."

New page

'''Title of the script: '''List in CSS

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske, Om Prakash Soni

'''Novice Reviewer:''' Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS List, List Type, List Color, List Position, List Image

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the spoken tutorial on “'''List in CSS'''”
|-
| | Slide: Learning Objectives
| | In this tutorial, we will learn about:

* '''List '''properties in''' CSS '''of '''ordered '''and '''unordered lists'''
* Customising the '''list markers'''

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
| | Slide: Prerequisite

https://spoken-tutorial.org
| | To practise this tutorial, you should know to use '''HTML''' and '''CSS'''.

If not, please go through the '''HTML''' and '''CSS '''tutorials on this website.
|-
| | Slide: Code Files
| | The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.

Please download and extract them.

Make a copy and then use them while practising.
|-
| | Slide: List
| |
* Using '''CSS''' we can style and format '''lists'''.

|-
| | Slide: List
| | '''CSS list '''properties are as follows:

* '''Type'''
* '''Color'''
* '''Position'''
* '''Image'''
* '''Shorthand'''

Let us understand these through examples.
|-
| | Narration
| | First, we will add two different '''lists '''to our '''webpage'''.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css.'''
|-
| | Point to Mypage.html in my-css folder
| | For this demonstration, I’m using the file '''Mypage.html'''.

The same is available in the '''Code files''' link for practice
|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''
|-
| | [gedit - Mypage.html]

Type:

<nowiki><h2> Vegetables </h2></nowiki>

<nowiki><ul></nowiki>

<nowiki><li> Onion <br> 1kg </li></nowiki>

<nowiki><li> Potato <br> 1kg </li></nowiki>

<nowiki><li> Tomato <br> 1kg </li></ul></nowiki>

<nowiki><h2> Fruits </h2></nowiki>

<nowiki><ol></nowiki>

<nowiki><li> Apple <br> 1kg </li></nowiki>

<nowiki><li> Banana <br> 1kg </li></nowiki>

<nowiki><li> Orange <br> 1kg </li></nowiki>

<nowiki></ol></nowiki>
| |

At the end of the '''body tag''', type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in firefox
| | Switch back to the '''my-css''' folder.

Now open the file '''Mypage.html''' in a '''web browser'''.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

The '''lists '''are added to the page.

The first '''list '''is an '''unordered list.'''

It has the default '''marker '''namely the '''round bullets'''.

While the second one,''' '''is an '''ordered list.'''

It has the default '''marker, numerals.'''
|-
| | Narration
| | Let us apply '''CSS list''' properties to these '''lists'''.
|-
| | Slide: Type
| |
* '''Type''' property is used to set the shape or style of the '''marker'''.
* For an '''unordered list '''the''' '''shape of the '''marker''' can be '''circle, square,''' etc.
* For an '''ordered list '''the style of the '''marker''' can be '''decimals, lower-alpha,''' etc

|-
| | Switch to '''my-css '''folder
| | Switch to the “'''my-css'''” folder.
|-
| | Open mystyle.css
| | Now open the file '''mystyle.css''', in any''' text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | [gedit - mystyle.css]

Type-

ul {list-style-type: square;}

ol {list-style-type: lower-roman;}
| | Next to the '''a:active tag, '''type code as shown.

|-
| | [gedit - mystyle.css]

Highlight-

ul {list-style-type: square;}

ol {list-style-type: lower-roman;}
| |

Here I have set the''' marker '''shape for the '''unordered list '''to '''square.'''

And''' lower-roman '''for the''' ordered list.'''

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

We can see that the '''marker''' of the '''unordered list '''is set to''' square.'''

And the '''marker''', '''lower-roman''' is set''' '''for the''' ordered list.'''
|-
| | Only Narration
| | Using '''CSS '''property, we can also set '''colors '''for the '''lists.'''

Let us try this.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

ul {list-style-type: square;

background-color: green;}

ol {list-style-type: lower-roman;

background-color: red;}
| | Now I will set the '''background color '''for the '''lists '''to''' green''' and''' red.'''

Next to '''a:active tag''', update the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

Now the '''background''' '''color''' is set for both the''' lists, '''as per the specified colours.
|-
| | Only narration
| | We can also set the '''background color''' for''' list items'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

ul li {background-color: lightgreen;

margin: 5px;}

ol li {background-color: lightpink;

margin: 5px;}
| | Next to '''a:active tag, '''update the '''ul''' and '''ol tag styles''' as shown here.
|-
| | [gedit - mystyle.css]

highlight: margin: 5px;
| | Here I have also added the '''margin '''for better visibility.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

Now the specified '''background''' '''color''' is set for the '''list items''' of both the''' lists.'''
|-
| |
| | Let’s move on to '''position '''property.
|-
| | Slide: Position
| |
* '''Position''' property is used to set the position of the '''marker'''.
* It decides whether the''' marker''' should be placed inside or outside the''' list item'''.
* By default, the position of the '''marker''' is set to '''outside'''.

Let us try this.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

ul{list-style-position:inside;}
| | Now I will set the position for the '''unordered list''' marker, to '''inside.'''

Next to the '''ol li tag''', type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the first list
| | Observe the output.

Now the '''markers''' of the '''unordered list''' are positioned inside the '''list.'''
|-
| | [Firefox]

Highlight the second list
| | While the '''markers '''of the '''ordered list '''are positioned outside the '''list.'''

This is because of its default property.
|-
| | Narration
| | Using''' CSS '''we can also set''' Image''' as a '''marker '''for the''' list.'''

Let us try this.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

list-style-image: url("purplesquare.png");
| | Now inside the '''ul tag''', next to '''list-style-position''' property, type the code as shown.
|-
| | [gedit - mystyle.css]

Highlight:

purplesquare.png
| | '''purplesquare.png''' image is available in the '''Code Files''' link on this tutorial page.

Please download and keep it in the folder where you have saved your code files.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

Now the '''markers''' of the '''unordered list''' are set to the specified '''image.'''
|-
| | Slide: shorthand
| |
* Using '''shorthand''', we can write the '''list '''properties in a single declaration.
* The order of the properties is: '''list-style-type, list-style-position, list-style-image.'''

|-
| | Slide: shorthand
| |
* If any property is missing, then its default value will be considered.
* '''list-style-type '''value will be considered if '''list-style-image '''value is unavailable.

Let us try this.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

ul {list-style: circle inside url("purplesquare.png");}
| | Now I will set the '''list''' properties to the '''unordered list''' using the '''shorthand''' method.

Next to the '''ol li tag, '''update the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

'''Image''' as a '''marker '''does not fail to display.

This is because the '''marker''' is set to '''image''', not to '''circle'''.

And the''' list items''' are positioned inside.
|-
| | Narration
| | Now let us check what happens if the '''image '''fails to display.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

list-style: circle inside url("img.png");
| | Inside '''ul tag''', change the name of the image to '''img.png '''instead of '''purplesquare.png'''

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

Since the '''image '''failed to display, the '''marker '''is set to '''circle''', which is the default '''marker'''.
|-
| | [gedit - mystyle.css]

Update:

ul {list-style: circle inside url("purplesquare.png");}
| | Switch to the '''mystyle.css''' file.

I will set it with the correct '''image''' name.

Next to the '''ol li tag, '''update the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

This is our required '''list'''.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us summarize.
|-
| | Slide: Summary
| | In this tutorial, we have learnt about:

* '''List '''properties in''' CSS '''of '''ordered '''and '''unordered lists'''
* Customising the '''list markers'''

|-
| | Slide: Assignment
| | As an assignment

* Open the file '''webpage.html''' which you have created earlier.
* Add an '''unordered''' '''list '''with some''' list items'''

|-
| | Slide: Assignment
| |
* Open the file '''styles.css '''which you have created earlier.
* Using '''shorthand''':
** Set the '''image''' '''purplesquare.png''' as a '''marker '''and
** Position it '''inside'''.
* Link the '''styles.css''' file to '''webpage.html''' file
* Observe the output.

|-
| | Slide:

About Spoken Tutorial project
| | The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.
|-
| | Slide: Spoken Tutorial Workshops
| | The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
| | Slide: Answers for THIS Spoken Tutorial
| | Please post your timed queries on this forum.
|-
| | Slide: Acknowledgement
| | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
| | Slide: Thanks
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C3/List-in-CSS/English - Revision history

Nehasolanki: Created page with "'''Title of the script: '''List in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywords..."