Class Selector
The CSS class selector (.) is used to apply styles to multiple elements that share the same class name. It allows for reusable and consistent styling across a webpage.
Syntax
.classname {
property: value;
}
Example:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-align: center;
}
/* Styling a specific element (paragraph) with a class */
p.notice {
font-size: 18px;
color: red;
}
Explanation
- .button applies styles to all elements with the button class.
- p.notice applies styles only to <p> elements with the notice class.
Multiple Classes
You can assign multiple classes to an element and apply styles accordingly.
.primary {
color: white;
background-color: green;
}
.rounded {
border-radius: 10px;
}
<button class="primary rounded">Click Me</button>