CSS/C3/List-in-CSS/English
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:
|
Slide:
System Requirements |
This tutorial is recorded using,
However you may use any other editor or browser of your choice. |
Slide: Prerequisite | 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 |
|
Slide: List | CSS list properties are as follows:
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:
<ul> <li> Onion <br> 1kg </li> <li> Potato <br> 1kg </li> <li> Tomato <br> 1kg </li></ul>
<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 |
|
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;}
background-color: red;} |
Now I will set the background color for the lists to green and red.
|
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;}
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 |
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.
|
Slide: shorthand |
|
Slide: shorthand |
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:
|
Slide: Assignment | As an assignment
|
Slide: Assignment |
|
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. |