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>

Read more »
Labels: ,

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

Read more »
Labels: ,

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

Read more »
Labels: ,

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

Read more »
Labels: ,

Friday, January 9, 2026

Introduction to css Syntax

Introduction to css Syntax

web designing theory

Introduction to css Syntax




  • CSS Selector points  HTML element declaration block contains  one or more declarations 
  • separated by semicolons.
  • each CSS Selector declaration includes a CSS Property name and value ,separated by colon.
  •  CSS multiple  declaration are separated with semicolons
  • CSS element declaration blocks are surrounded by curly braces.

Introduction to css Syntax

Syntax  

selector {
    property: value;

}

Introduction to css Syntax
Example  

<!DOCTYPE html>
<html>
<head>
<title> html css Syntax </title>
    <style>
     p{   color:rgb(0, 8, 255);
        text-align:center;
    }

    </style>
</head>
<body>
  <p>Hello every one</p>
  <p>My Name is web designing theory</p>
  <p>https://webdesigningtheory.blogspot.com/</p>
  <p>learn to programming language</p>
  <p>Easy understand</p>


</body>
</html>



Introduction to css Syntax

Explain Program

Read more »
Labels: , ,
Subscribe to: Comments (Atom)