CSS Class Selectors: The '.' Prefix
Learn how to use class selectors to efficiently style multiple HTML elements in CSS.
Styling Groups: Class Selectors
Class selectors are like team jerseys for your HTML elements. You can give a group of elements the same "jersey" (a class) and then style all of them at once!
Syntax
The basic syntax for selecting a class in CSS is: .class-name { property: value; }. You must always use the dot (`.`) to refer to a class.
Purpose
Class selectors are used to apply styles to any number of elements, regardless of their tag name. This is crucial for creating reusable styles that can be applied across your entire website.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
yellow
.highlight
background-color:
Completa el código:
Defines a style for a class.______
Indicates the characteristic to modify.______{
Specifies the value.______}
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
.highlight { background-color: ; }
Practice Example: Code Editor
Write a CSS rule to make all elements with the class .important have a font-weight of bold.