- !important
- Animation
- Background image
- Blur() function
- Border color
- Border radius
- Border width
- Borders
- Box model
- Box shadow
- Class attribute
- Clip path
- Color
- Comment
- Cursor
- Display property
- First-child selector
- Flexbox
- Font family
- Font size
- Font style
- Font weight
- Gap
- Gradient
- Grid layout
- Height
- ID selector
- Letter spacing
- Linking a style sheet
- Margin
- Media query
- Minmax() function
- N-th-child selector
- Object fit
- Opacity
- Outline
- Overflow property
- Padding
- Pixels
- Pointer events
- Position property
- Pseudo-classes
- Pseudo-elements
- Rotate
- Rounding an image
- Scale()
- Selectors
- Specificity
- Text align
- Text shadow
- Text wrap
- Transition property
- Translate() property
- Units
- Variable
- white-space
- Width
- Z-index
CSS
CSS: Class Attribute
If we want to select one or more elements, we can set a class attribute for the exact elements we want to change.
In the stylesheet, we can set a new class rule with a . followed by the name of the class. Like here with .gray-element.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ol> TO DO: <li class="gray-element">Floss</li>
<li>Feed Cat</li>
<li class="gray-element">Nap</li>
<li>Plan holiday</li>
<li class="gray-element">Order tea</li>
</ol>
</body>
.gray-element {
background-color: lightgrey;
}