ad

Showing posts with label html Tutorial. Show all posts
Showing posts with label html Tutorial. Show all posts

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

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

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

Monday, January 5, 2026

how to use the html button tag

How to use the html button tag

web designing theory

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>

Saturday, January 3, 2026

what is the HTML center tag

what is the HTML center tag

web designing theory

This Blog You Will Learn 

 What is the HTML <center> tag

 Syntax of HTML <center> tag

ஃ what is the HTML center tag Example 

Explain Program

 what is the HTML center tag Output

What is the HTML <center> tag

  1.  HTML <center> tag use horizontally center content on a web page.
  2. <center> tag such  image,tables, text.   
  3. HTML   place inside anything  information  <center> and </center>.
  4.  <center> tag display  middle of the page.
  5.  HTML <center> tag use early web development. easily center content webpage

 Syntax of HTML <center> tag

<center>.. .center text.....</center>

what is the HTML center tag

Example 

<!DOCTYPE html>
<html>
<head>
    <title> HTML Center tag  </title>
</head>
<body>
    <center>
    <h1> HTML center TAg </h1>
    <p>Your Name :</p>
    <p>Your Class: </p>
    <p> Your Address:</p>
    <p>Your ID :</p>
    </center>
</body>
</html>

what is the HTML center tag

Explain Program

Step  1] 

<!DOCTYPE html>

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

Friday, January 2, 2026

Learn CSS Selectors

Learn CSS Selectors 

web designing theory

This Blog You Will Learn 

what is the CSS Selectors?

Syntax 

ஃ Learn CSS Selectors  

Explain Program

  Output

Thursday, January 1, 2026

how to use the id selector in html and css

how to use the id selector in html and css

web designing theory

This Blog You Will Learn 

What is ID Selector ?

Syntax of HTML <id> tag

Explain Program

 Output

Tuesday, December 30, 2025

HTML label tag example

HTML  label tag example

web designing theory

This Blog You Will Learn 

What is the <label> Tag

 Syntax of HTML <label> ta

HTML  label tag example

Output

Sunday, December 28, 2025

How to create HTML Dialog Element

How to create  an HTML  Dialog Box

web designing theory blogspot.com








This Blog You Will Learn 

ஃ  what is  the <dialog> element 
ஃ Advantage  of HTML Dialog Box 
ஃ Syntax of HTML <dialog> tag
ஃ Explain Program
ஃ Explain Program

Friday, December 26, 2025

how to use textarea in HTML

how to use textarea in HTML

web designing theory

This Blog You Will Learn 

ஃ What is the <textarea> in HTML?

ஃ When Should you use <textarea> tag ?

 Syntax of HTML <textarea> tag

ஃ Summary 

ஃ Explain Program

ஃ Output

Wednesday, December 24, 2025

How To Add Border To Image in HTML

How To Add Border To Image in HTMLweb designing theory  blogspot.com

This Blog You Will Learn 

What is the Add Border Image?

why add a border to an Image.

How Borders Work in CSS

Syntax 

Summary

Explain Program

Output

Monday, December 22, 2025

how to use the HTML img tag

How To Use The HTML <img> Tag 

web designing theory

This Blog You Will Learn 

What is the <imag> tag?
Syntax of HTML <img im> tag
 How to Write HTML TAG
How src Works
Important Rules for alt
Explain Program
Output

Saturday, December 20, 2025

How to create Nested lists in HTML

How to create Nested lists in HTML

This Blog You Will Learn 

What is a Nested List in HTML

HTML <ul> tag

 Type  of Bullets

Syntax of HTML <ul> tag

Explain Program

Output

Thursday, December 18, 2025

what is HTML sup tag

What  is HTML  sup tag

This Blog You Will Learn 

What is the <sup> tag

 Syntax of HTML <sub>. . .</sub> tag

Explain Program

Output

Tuesday, December 16, 2025

how to use the kbd tag in html

How to use the  kbd tag in html

web designing theory

This Blog You Will Learn 

What is the <kbd> tag ?

Why USe the <kbd> tag?

 Syntax of HTML <kbd> tag

Explain Program

Output

Monday, December 15, 2025

CSS Comment Tag Explain

CSS Comments Tag Explain


web designing theory

This Blog You Will Learn 

What is CSS comment tag

Why use comments in CSS?

Best Practices

Syntax 

Explain Program

Output 

Sunday, December 14, 2025

how to use the footer tag in HTML

how to use the footer tag in HTML

web designing theory

This Blog You Will Learn 

What is the <footer>tag

 What Goes inside a <footer> tag?

 Syntax of HTML <footer> tag

Explain Program

Output 

Friday, December 12, 2025

How To Use Html Search Input Type

How To Use Html Search Input Type

web designing theory

This Blog You Will Learn 

What is the search input type

Attributes Search input 

 Why Use type="search" ?

How it Works 

Syntax of HTML Search tag

Explain Program

Output

Monday, December 8, 2025

what is caption tag in html

what is caption tag in html

web designing theory

This Blog You Will Learn 

What is the <caption> tag 

Why the <caption> tag important.

Why USe The <caption> tag

Syntax of HTML <Caption> tag

Explain Program

Output

Sunday, December 7, 2025

learn HTML summary tag

learn HTML summary tag

https://webdesigningtheory.blogspot.com

This Blog You Will Learn 

What is the <summary> tag?

Why Use <summary> tag?

Syntax of HTML <summary> tag

Explain Program

Output