ad

Monday, January 19, 2026

CSS Class Selector With Practical Examples

 CSS Class Selector With Practical Examples

web designing theory







 

CSS Class  Selector is use to style one or more element HTML elements share the same class name

CSS Class Selector targets  element with specific class attribute.

CSS Class Selector denoted (Dot . ) class name.

CSS Class Selector With Practical Examples

Syntax

.class-name{

property:value;

} 

CSS Class Selector With Practical Examples
 Examples


<!DOCTYPE html>
<html>
    <head>
        <title> CSS  class  Selector </title>
   <style>
          .demo{

             color:cadetblue;
          }                  
          .intro{
            border: 5px inset gold;
            color:dodgerblue;
             text-align:center;  
             }                                                                                                  
        </style>
            </head>
            <body>
                <div class="demo">
           <h1> CSS Class Selector </h1>
     <P> learn programming language css  </P>
           </div>

         
           <p class="intro">
https://webdesigningtheory.blogspot.com/</p>
         
            </body>
</html>

CSS Class Selector With Practical Examples
 Explain Program 

Step  1] 

  <!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html

Step 2]

  <html>.... .

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

Step 3]

text tag  text appears on the browser tab.

<head>
        <title> CSS  class  Selector </title>

Saturday, January 17, 2026

CSS Element Selector Explained with Examples

 CSS Element  Selector Explained with Examples

  
web designing theory
CSS Element Selector selects and styles specific HTML  Element.
Element Selector is defined as Element name in  stylesheet.

Syntax

 CSS Element  Selector Explained with Examples


element 
{
property:value;
 
}

 CSS Element  Selector Explained with Examples

 Examples 


<!DOCTYPE html>
<html>
    <head>
        <title> css element selector</title>
        <style>
          h1{

             color:cadetblue;
          }                  
          div{
            border: 5px inset gold;
            color:dodgerblue;
             text-align:center;
           
           

          }                                                                                                  
        </style>
            </head>
            <body>
                <div>
           <h1> css element Selector </h1>
       <P> learn programming language css  </P>
         
           </div>
            </body>
</html>



 CSS Element  Selector Explained with Examples

 Explain Program 

Step  1] 

<!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html

Thursday, January 15, 2026

How to Use the Grouping Selectors in CSS With Examples

How to Use the Grouping Selectors in CSS With Examples

web designing theory

How to Use the  Grouping Selectors in CSS With Examples

Syntax 

selector1, selector2, selector3
 {

        property1:   value1;
        property2:   value2;
. . .
. . .
. . .

}

How to Use the  Grouping Selectors in CSS With Examples

Example 




<!DOCTYPE html>
<html>
    <head>
    <title> Grouping Selectors in CSS </title>
   <style>
                               
          #intro,.demo{
            border: 5px inset gold;
            color:dodgerblue;
             text-align:center;  
             }                                                                                                  
        </style>
            </head>
            <body>
                <div class="demo">
           <h1> Grouping Selectors in CSS </h1>
       <P> learn programming language css  </P>
           </div>

         
 <p id ="intro">
         
            </body>
</html>



How to Use the   Grouping Selectors in CSS With Examples

Explain Program