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>
Qus. 1 : Which selector is being used to specify a group of elements
- Name
- ID
- Class
- Tag
- tag
- class
- id
- div
- #classname
- .classname
- element.classname
- *classname
- tag
- id
- class
- both class and tag