what is a Class Selector in HTML & CSS
what is a Class Selector in HTML & CSS
✅css apply the same style to many elements example- multiple buttons, paragraphs, or card.
✅class element is group multiple element to apply same style or behavior.
✅class can be use many element.
✅css class selector denoted by dot ( . ) symbol use before the class name.
✅A class selector is used css to apply styles to multiple HTML element that share same class name.
✅A class selector targets HTML elements using the class attributes and applies css styles to them.
How Class selector works (concept)
✔ class name to HTML element using the class attribute.
✔ CSS target that class using a dot (.).
✔ all elements with class.
✔ one class ➡ many elements
✔ one element ➡ multiple classes
Syntax
Syntax of HTML <class> tag
<div class="example">.......</div>
<div class="example">.......</div>
Why Class Selector is important.
- Reduce repeated css code
- Allow reusable style
- Improve maintainability
- Help build consistent layouts.
- HTML code keep clean
Rules for Class Name.
- class name - not use spaces (not spaces allowed)
- class name - case-sensitive
- class name - not start with number.
- class name - use meaningful names
what is a Class Selector in HTML & CSS
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML id Attribute </title>
<style>
.header{
background-color: lightblue;
color: black;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h2 class="header"> HTML id Attribute</h2>
<p> HTML class attribute use unique
name on webpage </p>
</body>
</html>
what is a Class Selector in HTML & CSS
Explain Program
Step 1]
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
