Class 6 Exam > Class 6 Notes > CSS for Beginners > CSS Lists
CSS Lists | CSS for Beginners - Class 6 PDF Download
HTML Lists and CSS List Properties
In HTML, there are two main types of lists:
- unordered lists (<ul>) - the list items are marked with bullets
- ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
- Set different list item markers for ordered lists
- Set different list item markers for unordered lists
- Set an image as the list item marker
- Add background colors to lists and list items
Different List Item Markers
The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
Example
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Note: Some of the values are for unordered lists, and some for ordered lists.
An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:
Example
ul {
list-style-image: url('sqpurple.gif');
}
Position The List Item Markers
The list-style-position property specifies the position of the list-item markers (bullet points).
"list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:
"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:
Example
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Remove Default Settings
The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:θ and padding:θ to <ul> or <ol>:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
Example
ul {
list-style: square inside url("sqpurple.gif");
}
When using the shorthand property, the order of the property values are:
- list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
- list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
- list-style-image (specifies an image as the list item marker)
If one of the property values above are missing, the default value for the missing property will be inserted, if any.
Styling List With Colors
We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items:
Example
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
Result:
More Examples
Customized list with a red left border
This example demonstrates how to create a list with a red left border.
Full-width bordered list
This example demonstrates how to create a bordered list without bullets.
All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.
Test Yourself With Exercises
Exercise:
Set the list style for unordered lists to "square".
<style>
ul {
_____ : _____ ;
}
</style>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
<style>
ul {
list-style-type : square ;
}
</style>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
All CSS List Properties
The document CSS Lists | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
|
10 videos|41 docs|23 tests
|
About this Document
|
Nov 19, 2024 Last updated |
Document Description: CSS Lists for Class 6 2024 is part of CSS for Beginners preparation.
The notes and questions for CSS Lists have been prepared according to the Class 6 exam syllabus. Information about CSS Lists covers topics
like and CSS Lists Example, for Class 6 2024 Exam. Find important definitions, questions, notes, meanings, examples, exercises and tests below for CSS Lists.
Introduction of CSS Lists in English is available as part of our CSS for Beginners
for Class 6 & CSS Lists in Hindi for CSS for Beginners course.
Download more important topics related with notes, lectures and mock test series for Class 6
Exam by signing up for free. Class 6: CSS Lists | CSS for Beginners - Class 6
Description
Full syllabus notes, lecture & questions for CSS Lists | CSS for Beginners - Class 6 - Class 6 | Plus excerises question with solution to help you revise complete syllabus for CSS for Beginners | Best notes, free PDF download
Information about CSS Lists
In this doc you can find the meaning of CSS Lists defined & explained in the simplest way possible. Besides explaining types of
CSS Lists theory, EduRev gives you an ample number of questions to practice CSS Lists tests, examples and also practice Class 6
tests
|
Explore Courses for Class 6 exam
|
|
Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
Related Searches
study material
,video lectures
,Viva Questions
,MCQs
,Semester Notes
,CSS Lists | CSS for Beginners - Class 6
,CSS Lists | CSS for Beginners - Class 6
,shortcuts and tricks
,Previous Year Questions with Solutions
,Extra Questions
,Important questions
,Objective type Questions
,ppt
,Free
,Sample Paper
,past year papers
,Exam
,practice quizzes
,CSS Lists | CSS for Beginners - Class 6
,mock tests for examination
,Summary
;
Additional Information about CSS Lists for Class 6 Preparation
CSS Lists Free PDF Download
The CSS Lists is an invaluable resource that delves deep into the core of the Class 6 exam.
These study notes are curated by experts and cover all the essential topics and concepts, making your preparation more efficient and effective.
With the help of these notes, you can grasp complex subjects quickly, revise important points easily,
and reinforce your understanding of key concepts. The study notes are presented in a concise and easy-to-understand manner,
allowing you to optimize your learning process. Whether you're looking for best-recommended books, sample papers, study material,
or toppers' notes, this PDF has got you covered. Download the CSS Lists now and kickstart your journey towards success in the Class 6 exam.
Importance of CSS Lists
The importance of CSS Lists cannot be overstated, especially for Class 6 aspirants.
This document holds the key to success in the Class 6 exam.
It offers a detailed understanding of the concept, providing invaluable insights into the topic.
By knowing the concepts well in advance, students can plan their preparation effectively.
Utilize this indispensable guide for a well-rounded preparation and achieve your desired results.
CSS Lists Notes
CSS Lists Notes offer in-depth insights into the specific topic to help you master it with ease.
This comprehensive document covers all aspects related to CSS Lists.
It includes detailed information about the exam syllabus, recommended books, and study materials for a well-rounded preparation.
Practice papers and question papers enable you to assess your progress effectively.
Additionally, the paper analysis provides valuable tips for tackling the exam strategically.
Access to Toppers' notes gives you an edge in understanding complex concepts.
Whether you're a beginner or aiming for advanced proficiency, CSS Lists Notes on EduRev are your ultimate resource for success.
CSS Lists Class 6 Questions
The "CSS Lists Class 6 Questions" guide is a valuable resource for all aspiring students preparing for the
Class 6 exam. It focuses on providing a wide range of practice questions to help students gauge
their understanding of the exam topics. These questions cover the entire syllabus, ensuring comprehensive preparation.
The guide includes previous years' question papers for students to familiarize themselves with the exam's format and difficulty level.
Additionally, it offers subject-specific question banks, allowing students to focus on weak areas and improve their performance.
Study CSS Lists on the App
Students of Class 6 can study CSS Lists alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the CSS Lists,
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of CSS Lists is prepared as per the latest Class 6 syllabus.
|
© EduRev
|
Education Revolution
|
Follow Us
|
Signup to see your scores
go up within 7 days!
Access 1000+ FREE Docs, Videos and Tests
Takes less than 10 seconds to signup