Currently Empty: ₹0.00
CSS Lists
CSS CODES & EXAMPLES
CSS Lists
Learn how to style HTML lists with CSS. Create beautiful unordered lists, ordered lists, custom markers, icon lists, navigation menus, nested lists, hover effects and responsive list layouts.
01
What are CSS Lists?
Style HTML list elements
HTML provides two common types of lists:
<ul> for unordered lists and
<ol> for ordered lists. CSS allows you to control
their markers, spacing, alignment, colors and overall appearance.
Common elements:
<ul>
<ol>
<li>
02
Unordered Lists
Bullet-point listsAn unordered list normally displays a bullet before each list item.
unordered-list.css
ul {
list-style-type: disc;
}
li {
margin-bottom: 8px;
}- Computer Fundamentals
- Microsoft Office
- Internet & Email
- Digital Skills
03
Ordered Lists
Numbered listsOrdered lists are useful when the sequence or order of items matters.
ordered-list.css
ol {
list-style-type: decimal;
}
li {
margin-bottom: 8px;
}- Register for the course
- Attend the classes
- Complete practical work
- Take the examination
04
list-style-type
Change list markers
The list-style-type property changes the marker used
before each list item.
disc
- HTML
- CSS
- JavaScript
circle
- HTML
- CSS
- JavaScript
square
- HTML
- CSS
- JavaScript
none
- HTML
- CSS
- JavaScript
list-style-type.css
ul {
list-style-type: square;
}
05
Ordered List Types
Numbers, letters and Roman numerals
Decimal
- HTML
- CSS
- JavaScript
Upper Alpha
- HTML
- CSS
- JavaScript
Lower Alpha
- HTML
- CSS
- JavaScript
Upper Roman
- HTML
- CSS
- JavaScript
06
list-style-position
Control marker position
Outside
- The marker is placed outside the content area.
- This is the default behavior.
Inside
- The marker becomes part of the list item’s content area.
- Notice the different alignment.
list-style-position.css
ul {
list-style-position: inside;
}
07
list-style Shorthand
Combine list properties
The list-style property can combine the list marker,
position and image settings in one declaration.
list-style.css
ul {
list-style: square inside;
}- Computer Education
- Web Designing
- Programming
08
Removing List Markers
Create clean lists
remove-marker.css
ul {
list-style-type: none;
padding: 0;
margin: 0;
}- ✓ Computer Fundamentals
- ✓ Microsoft Word
- ✓ Microsoft Excel
- ✓ Microsoft PowerPoint
09
Custom List Markers
Create your own visual markers✓ Computer Training
✓ Practical Learning
✓ Career Skills
✓ Digital Education
custom-marker.css
ul {
list-style: none;
padding: 0;
}
li::before {
content: "✓";
color: #1769d5;
font-weight: bold;
margin-right: 10px;
}
10
CSS Lists with Icons
Use icons as list markers
💻
Computer Courses
📚
Study Materials
🎓
Certification
🧑🏫
Expert Instructors
🏆
Practical Learning
11
Horizontal Lists
Place list items in one row
horizontal-list.css
ul {
list-style: none;
display: flex;
gap: 20px;
}
li a {
text-decoration: none;
}
12
Navigation Menu with Lists
Build website navigation
navigation-list.css
nav ul {
list-style: none;
display: flex;
gap: 10px;
}
nav a {
display: block;
padding: 10px 15px;
text-decoration: none;
}
13
Nested Lists
Lists inside other lists-
Computer Courses
- CCA
- DCA
- ADCA
-
Web Courses
- HTML
- CSS
- JavaScript
nested-list.css
ul {
padding-left: 25px;
}
ul ul {
margin-top: 8px;
list-style-type: circle;
}
14
List Hover Effects
Create interactive list items
list-hover.css
li {
transition: .3s;
}
li:hover {
transform: translateX(6px);
}
li a {
text-decoration: none;
}
15
Professional List Cards
Modern education website list design
01
Computer Fundamentals
Understand the basics of computers and technology.
02
Office Applications
Learn Word, Excel and PowerPoint practically.
03
Internet & Digital Skills
Develop useful online and digital skills.
04
Practical Projects
Apply your learning through real-world activities.
16
Responsive Lists
Lists for mobile and desktop screens
HTML
Structure
CSS
Design
JavaScript
Interaction
PHP
Backend
17
Practical Website Examples
Where CSS lists are commonly used
Website Navigation
Create menus using unordered lists and anchor elements.
Course Modules
Display chapters, topics and learning modules.
Features
Present website features using clean icon lists.
Footer Links
Organize useful and important website links.
Instructions
Show steps using numbered ordered lists.
Course Benefits
Highlight benefits with custom markers.
18
Live CSS Lists Runner
Experiment with real CSS list examplesLIVE PREVIEW
19
Practice Task
Test your CSS Lists skills🎯 Your Challenge
Create a professional course navigation section using CSS lists.
- Create an unordered list of courses.
- Remove the default bullets.
- Add custom check icons.
- Create a horizontal navigation menu.
- Add hover effects to menu items.
- Create a nested list for course modules.
- Make the complete design responsive.
20
Quick Reference
Important CSS list propertieslist-style-type
Controls the type of list marker.list-style-image
Uses an image as a list marker.list-style-position
Controls marker position.list-style
Shorthand for list styling.display
Useful for horizontal list layouts.padding
Controls list spacing and indentation.margin
Controls spacing around list elements.::before
Useful for custom list icons and markers.