ad

Wednesday, January 21, 2026

CSS Attribute Selector Explained wiith Examples

 CSS Attribute Selector Explained wiith Examples

web designing theory logo

This Blog You Will Learn 

ஃ CSS Attribute Selector

ஃ How CSS Attribute Selector Works

 Syntax of HTML CSS Attribute Selector tag

ஃ Why Use CSS Attribute Selectors

ஃ Advantages CSS Attribute Selectors

ஃ Explain Program

ஃ Output

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

Tuesday, January 13, 2026

Introduction to CSS Universal Selector

Introduction to CSS Universal Selector

web designing theory

 Introduction to css universal selector

  1. CSS universal selector is a  represented by asterisk symbol (*) .
  2. CSS Universal selector  use to select all html element on web page and apply the same css rules to them.
  3. CSS universal selector defined (*)
  4. Every element  in the document regardless of type.
  5. Universal selector use global style.
  6. Universal reset default  browser style.

 Introduction to CSS Universal Selector
Syntax :

     *{
           property: value;
       }

Introduction to CSS Universal Selector

Example 

<!DOCTYPE html>
<html>
<head>
    <style>
     p{  text-align:center;
         color:rgb(19, 47, 253);
         
             }
             div *{
                background-color: yellow;
             }
    </style>
</head>
<body>
      <div class ="pro">
       <h2> CSS Universal Selector (*)</h2>
       <p>Hello every one</p>
      <p>learn to programming language</p>
        </div>
     <p>HTML,CSS,PHP</p>
    <p>https:
//webdesigningtheory.blogspot.com/</p>
  </body>
  </html>

Introduction to CSS Universal Selector

Explain Program

Step  1] 

<!DOCTYPE html>

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