Web Designing Theory

Thursday, January 29, 2026

What is Radial Gradient in CSS

What is Radial Gradient in CSS Syntax & Examples

This Blog You Will Learn

ஃ What is the HTML radial gradient in CSS
ஃ Core Components Explained

ஃ Advantage
ஃ Real -world Use cases
ஃ Syntax
ஃ Key Points
ஃ Examples
ஃ Explain Program
ஃ Output

What is Linear Gradient in CSS

What Is Linear Gradient in CSS

What is a Linear Gradient in CSS

✅linear Gradient in CSS function that creates a smooth transition between
✅Two or more colors along a straight line
✅ linear gradient is treated as background image,not a background color.
✅Defined using the linear-gradient() function in CSS
✅Direction controls how colors flow (top,bottom,left,right or diagonal)
✅linear gradients use angles such as 45deg ,90deg,180deg
✅Angles rotate clockwise starting from bottom to top at 0deg
✅At least two colors are required to create a linear gradient.
✅Multiple color to create rich gradient effects
✅Each color in gradient is called a color stop
✅Linear gradients are resolution-independent and scale prefectly on all devices

✅They are widely used for buttons,headers , banners and background

What is Linear Gradient in CSS

Syntax

    background:linear-gradient(direction, color1, color2,color3 ...);

Why Use Linear Gradients?

✔ Easy to customize
✔ No Images required
✔ Improves Ul design
✔ Supported by all modern browsers
✔ Fully responsive

What is Linear Gradient in CSS
Example

<!DOCTYPE html>
   <html>
    <head>
        <title> css element selector</title>
            <style>
            #grad{
               height:200px;
               background-image:linear-gradient(pink ,red,yellow);
            }                                                                             
           </style>
            </head>
            <body>
                <div  id="grad">
           <h1>Linear Gradient CSS  -- top to Bottom</h1>
              
 <a href="https://webdesigningtheory.blogspot.com/">Web Designing Theory 
    <br> https://webdesigningtheory.blogspot.com/ </a>
            
           <P> learn programming language css  </P>
           </div>
            </body>
    </html>

What Is Linear Gradient in CSS

Explain Program

Step 1]
<!DOCTYPE html>
This declare the document type.
browser that the document is written in html

What is CSS Gradient? Definition ,Types and Example

This Blog You Will Learn

ஃ What is CSS Gradient? Definition

ஃ Why CSS Gradients are use.

ஃ Syntax

ஃ Type of CSS Gradients

ஃAdvantages of CSS Gradients

What is CSS Pseudo-Class Selector Explained with Examples

This Blog You Will Learn

ஃ What is CSS Pseudo-Class Selector Explain

ஃ Syntax

ஃ Why Pseudo-Class Selectors

ஃ Key Characteristics of Pseudo-Class Selectors

ஃ Common CSS Pseudo-Class Selectors with Examples

ஃ Structural Pseudo-Classes

What is CSS Pseudo-Class Selector Explain

CSS Pseudo-class selector is special keyword added to css selector that allows developers to apply styles to HTML element based on state behavior ,position or use interaction static structure

Syntax:

  
  selector:pseudo-class {
     property: value;
   }

Why Pseudo-Class Selectors

✅Browser history

✅Keyboard interaction

✅Mouse movement

✅Form validation states

✅Element order

Key Characteristics of Pseudo-Class Selectors

✔ Use a Single colon (:)

✔ Represent temporary or logical states

✔ React to user behavior

✔ Improve UX/UI without JavaScript

✔ Do not modify HTML content.

Common CSS Pseudo-Class Selectors with Examples

1) :hover

Applies style when user places the mouse over element

 
button:hover {
  background-color: pink;
  color: red;
}

2) :active

Applies styles when element is being clicked

 a:active {
  color: purple;
}

3) :visited

Styles links that have already been visited

a:visited {
 color: orange;

4) :focus

Used when an input field gets focus.

input:focus {
  border: 2px solid blue;
}

5) :link

Select links that have not been visited by the user yet

a:link{
  color:yellow
}

6) :checked

Applies to checked checkbox or radio button

input:checked {
  outline:2px solid red;
}

7) :disabled

styles disabled form elements

input:disabled{
  background-color:lightpink
}

8) :enabled

Styles enabled form elements

input:enabled {
 background-color:white;
}

Structural Pseudo-Classes

1) :first-child

Selects the first child of a parent element

 p:first-child {
  color: blue
}

2) :last-child

Selects the last child element

  p:last-child {
 color :green;
}

3) :nth-child()

Selects elements based on their position

 li:nth-child(1){
  color:red;
}

Wednesday, January 21, 2026

CSS Attribute Selector Explained wiith Examples

CSS Attribute Selector Explained wiith Examples

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

CSS Class Selector With Practical Examples

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>

CSS Element Selector Explained with Examples

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>
         
<p>https://webdesigningtheory.blogspot.com/</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

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">
https://webdesigningtheory.blogspot.com/</p>
          
            </body>
</html>

How to Use the Grouping Selectors in CSS With Examples

Explain Program

Introduction to CSS Universal Selector

Introduction to css universal selector

CSS universal selector is a represented by asterisk symbol (*) .
CSS Universal selector use to select all html element on web page and apply the same css rules to them.
CSS universal selector defined (*)
Every element in the document regardless of type.
Universal selector use global style.
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

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

How to Use Class Selectors in HTML and 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>

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

how to use the html button tag

How to use the html button tag

This Blog You Will Learn

ஃ What is the <button> tag in HTML?

ஃ Syntax of HTML <dialog> tag

ஃ Why USe the <button> tag ?

ஃ Important Attributes <button>

ஃ Type of <button> tag in HTML

ஃ how to use the html button tag Example

ஃ Explain Program

ஃ how to use the html button tag Output

What is the <button> tag in HTML?

✅The <buttons> tag are one of the most important elements on website.

✅HTML <button> tag used create clickable buttons than perform actions such as submitting forms.

✅ HTML <button> tag is use to create a clickable button that can submit forms, reset data or trigger actions.

Syntax of HTML <dialog> tag

<button type="button"> Button text </button>

Why USe the <button> tag ?

✔ Creates interactive elements.

✔ Is accessible by keyboard and screen readers.

✔ Works with forms and Javascript.

✔ Can contain text, icons and HTML.

Type of <button> tag in HTML

1) Submit Button (type= "submit ")

submit form data to server.
button acts submit button by default.

<form>
  <button type="submit">Submit</button>
</form>

2) Reset Button (type= "reset")

Resets all form fields to default values .
reset buttons carefully as they can erase user input.

 <form>
 <input type="text" value="hi everyone">
  <button type="reset">Reset</button>
 </form>

3) Normal Button (type="button")

perform custom actions usually with javascript

<form>
<button type="button"
onclick="alert(button clicked")>Click ME
</button>
</form>

Important Attributes <button>

1) type

 <form>
  <button type="submit"></button>
 </form>

2) disabled

Disables the button.

<form>
  <button disabled>Disabled</button>
</form>

3) name and value

use to send button data during form submission

<form>
<button name="action" value ="login">
login</button>
</form>

4) autofocus

automatically focuses the button when page loads.

<form>
  <button autofocus>Click</button>
</form>

ad

Thursday, January 29, 2026

What is Radial Gradient in CSS Syntax & Examples

This Blog You Will Learn

Tuesday, January 27, 2026

What Is Linear Gradient in CSS

Why Use Linear Gradients?

What is Linear Gradient in CSSExample

What Is Linear Gradient in CSS

Explain Program

Step 1] <!DOCTYPE html> This declare the document type.browser that the document is written in html

Sunday, January 25, 2026

What is CSS Gradient? Definition ,Types and Example

Friday, January 23, 2026

Related Post :-

Wednesday, January 21, 2026

Monday, January 19, 2026

CSS Class Selector With Practical Examples Examples

CSS Class Selector With Practical Examples Explain Program

Saturday, January 17, 2026

CSS Element Selector Explained with Examples

Syntax

CSS Element Selector Explained with Examples

element {property:value; }

CSS Element Selector Explained with Examples

Examples

Explain Program

Step 1]

Thursday, January 15, 2026

How to Use the Grouping Selectors in CSS With Examples

How to Use the Grouping Selectors in CSS With Examples

Example

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 SelectorSyntax :

*{ property: value; }

Introduction to CSS Universal Selector

Example

Introduction to CSS Universal Selector

Explain Program

Friday, January 9, 2026

Introduction to css Syntax

Introduction to css Syntax

Syntax

Introduction to css Syntax

Explain Program

Wednesday, January 7, 2026

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)

Syntax of HTML <class> tag <div class="example">.......</div>

Why Class Selector is important.

Rules for Class Name.

what is a Class Selector in HTML & CSS

Example

what is a Class Selector in HTML & CSS

Explain Program

Monday, January 5, 2026

How to use the html button tag

Syntax of HTML <dialog> tag <button type="button"> Button text </button>

Why USe the <button> tag ?

Type of <button> tag in HTML

What is Linear Gradient in CSS
Example

Step 1]
<!DOCTYPE html>
This declare the document type.
browser that the document is written in html

CSS Class Selector With Practical Examples
Examples

CSS Class Selector With Practical Examples
Explain Program

element
{
property:value;

}

Introduction to CSS Universal Selector
Syntax :

*{
property: value;
}

Syntax of HTML <class> tag

<div class="example">.......</div>

Syntax of HTML <dialog> tag

<button type="button"> Button text </button>