ad

Wednesday, January 7, 2026

How to Use Class Selectors in HTML and CSS

what is a Class Selector in HTML & CSS

web designing theory

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>

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.

  1.  class name  - not use spaces (not spaces allowed)
  2.  class name - case-sensitive
  3.  class name - not start with  number.
  4. 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

Step 2 ]

<html>.... . </html>

  • html is the root element of the html page.
  •  Every thing inside it is part of the webpage.

Step 3]

<head>
     
  <title> HTML iframe tag </title>
<style>
            .header{
                 background-color: lightblue;
                 color: black;
                 text-align: center;
                 padding: 20px;
            }
        </style>

    </head>

  1.   <head>  section 

  •   head section contains metadata about page. not visible on the page itself.
  •  <title> tag  title section set the title of the page shows the browser tab. 

   2.    CSS Style  

       . header  css rule all  element with class name header.

          class is not unique 

         .header  { . . . } 

  •  .symbol represent  selecting class element .
  • .header                    :-   HTML element .
  • background-color    :-   set the background color.
  • color                        :-  set text color.
  • text-align : center    :-   text center element.
  • padding: 20px         :- 20 pixels of space inside element. (top, bottom, right, left)

Step 4]

<body>

  • < body> tag  contains all the content visible to webpage.
  • <body> tag contains  all the visible content of the page.
  • inside <body> show the browser screen.

Step 5]

 
    <body>
<h2 class="header"> HTML id Attribute</h2>
        <p> HTML id attribute  use unique name on webpage </p>
        </body>

       

  •   <h2>                     :-   heading tag .
  • <P>                         :-   create a paragraph.
  • <class="header">   :-   unique identifier name
  • CSS <style>           :-   section style element class.

                header  id attribute appears 

  •  background -color 
  • color
  • text-align
  • padding 

Step 6]

closing the Tag


</body>

  </html>

what is a Class Selector in HTML & CSS

Output

Related Post :-

html reset button example

frameset tag in html with example

how to create checbox in html

Labels: ,