Adding classes and proposed exercise: Different styles for each list

CSS classes allow you to apply different styles to specific elements:

label
What are CSS classes?
Classes are reusable identifiers that can be applied to multiple HTML elements
format_paint
Why use classes?
Apply consistent styling across multiple elements or create variations of the same element type
1
Add different class attributes to your list elements
2
Create CSS rules for each class with unique styling
3
Apply different colors, bullet styles, and spacing to each list
4
Experiment with combining multiple classes on a single element
lightbulb Pro Tip
You can apply multiple classes to an element by separating them with spaces: class="class1 class2"
/* CSS classes for different list styles */
.list-primary {
  color: #0052cc;
  list-style-type: disc;
  font-weight: 600;
}

.list-secondary {
  color: #5b7fdb;
  list-style-type: circle;
  padding-left: 30px;
}

.list-accent {
  color: #d32f2f;
  list-style-type: square;
  background-color: #ffebee;
  padding: 10px;
}
Different List Styles with Classes
Primary List
  • First primary item
  • Second primary item
  • Third primary item
Secondary List
  • First secondary item
  • Second secondary item
  • Third secondary item
Accent List
  • First accent item
  • Second accent item
  • Third accent item