Introduction to CSS Universal Selector

Introduction to CSS Universal Selector

Introduction to CSS Universal Selector

This Blog You Will Learn

 ஃ  Introduction to css universal selector

 ஃ  Syntax:

 ஃ CSS Universal Selector Important Points

 ஃ  Syntax:
 
ஃ structure diagram examples

 ஃ Examples

ஃ  Output


 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.

Syntax :

     *{
           property: value;
       }

CSS Universal Selector Important Points

  •  CSS Universal selector use asterisk (*)
  • Targets every  element
  • use for resetting css
  • Applies styles globally

ஃ structure diagram examples

CSS universal selector



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

Step 2]

<html>.... . </html>

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

Step 3]

<head>
    <style>
     p{  text-align:center;
         color:rgb(19, 47, 253);
         
             }
             div *{
                background-color: yellow;

             }
   

    </style>
</head>

  •   <head>  section 

  •   head section contains metadata about page. not visible on the page itself.
  •    2.    CSS Style  
  • all <P> and <h2> element applies the same style .
  • text-align:center;          =  text is centered 
  • color:rgb(19,47,253);   =  blue text color
  • paragraph <P> tag And heading <h2> tag  on the centered and Blue.

 
<div>
       <h2> CSS Universal Selector (*)</h2>
       <p>Hello every one</p>
      <p>learn to programming language</p>
        </div>

  • (*) use universal selector 
  •  div* =  Select all element inside any <div> tag .
  • background-color:yellow;
  •  yellow background color  to everything inside the </div>
  • <h2>tag and <p> tag inside the <div> tag get a yellow background color 

Step  4] 

 <p>HTML,CSS,PHP</p>
<p>https://webdesigningtheory.blogspot.com/</p>

 <p> tag  center aligned and background color blue.

Step 5] 

closing the Tag


  </body>
  </html>

Introduction to CSS Universal Selector

Output

css universal selector

Related Post :-

how to use the HTML img tag

how to create Nested lists in HTML

How to HTML sub tag

Comments

Post a Comment

Popular posts from this blog

HTML Tag

Image
 HTML Tag  Html basic tag:-   <!DOCTYPE html> Html  first line of the code <!DOCTYPE html> is called a doctype declaration the browser which version of HTML the page is written . Html tag using the doctype the HTML5 , the most up-to-date version of  HTML language.The DOCTYPE declaration of the instruction to web browser of HTML the page is written in.  <HTML>:- <Html>.   </html> <html> tag tells the browser  this is HTML document . The <html> tag represent the root of  HTML document. The <html> tag is the container for other HTML elements  <!DOCTYPE> . The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is a computer language that makes up most web pages and online applications. A hypertext text used to reference other pieces of text, while a markup language is a series of markings that tells w...
Read more

HTML Input Type Submit Syntax and Example

Image
What is Input Type Submit in HTML The input type="submit" in HTML is used to create a submit button in a form. When a user clicks this button, it sends (submits) the form data to a server for processing. In simple words, a submit button helps users send the information they entered in a form, like login details, contact forms, or registration data. Syntax : <input type= "submit" value="submit"> type ="submit"  ➡ create a submit button  value ="send"    ➡ text shown on the button A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐ HTML Input Type Submit Syntax and Example  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong >...
Read more

CSS Text Color Explained with Syntax and HTML Examples

Image
 What Is CSS Text Color This Blog You Will Learn  ஃ   What Is CSS Text Color  ஃ   Syntax   ஃ   Purpose of Text Color  ஃ    Real world Use Cases  ஃ    What Is CSS Text Color  Example    ஃ   Output What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. ஃ  structure diagram examples What Is CSS Text Color Example   <! DOCTYPE html > ...
Read more