CSS/C3/List-in-CSS/English

From Script | Spoken-Tutorial
Jump to: navigation, search

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


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:


<h2> Vegetables </h2>

<ul>

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

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

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


<h2> Fruits </h2>

<ol>

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

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

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

</ol>

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.

Contributors and Content Editors

Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C3/List-in-CSS/English&oldid=54389"