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

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

css id selector

-
Image
        CSS ID Selector 1] css id selector  attribute  is the unique identifier in an html document. 2] id selector use # character. 3] css id selector is used to apply style specific HTML element. Syntax :- #id  { // css property } CSS id selector  Example:- <! DOCTYPE html > < html > < head >     < title > css id selector </ title >     < style >         #web         {             text-align : center ;             color : brown ;         }     </ style > </ head > < body >     < h2 id = "web" >         hello https://webdesigningtheory.blogspot.com/ </ h2 >         < h3 > This is program of Css ID Selector </ h3 >     </ h2 >     </ body ...
Read more

HTML pre tag

-
Image
                                    HTML pre Tag Information   1. The <pre> tag defines preformatted text.  2. Text in a <pre> element is displayed in a fixed-width font. 3.  text preserves both spaces and line breaks.  4. syntax with :- <pre>.......</pre> tag 5. displayed in a fixed-width font. 6 .The text will be displayed exactly as written in the HTML source code. Program     HTML <pre> tag <html> <head> <title>html pre tag </title> </head> <body> <pre> My name is ram my college name is satara   I like Apple My favourity color is skyblue </pre> </body> </html> OUTPUT          Related Post :-   html aside tag inline css in html html login in form
Read more

Inline css in html

-
Image
                       Inline CSS   Information: 1]    Inline CSS is used to apply a  unique style to a single HTML element . 2]   In inline CSS uses the    Style attribute of an HTML element. 3]   Css Apply in a Single element by inline css Technique.  4]  Inline css also use method to insert style sheets in HTML document Inline Css        Program <html> <head> <title>inline property</title> </head> <body> <h1 style="color:red; background-color:pink;">html</h1> <p style="color:purple;">hyper text markup language</p> <h3>Information</h3>s <dl>INLINE CSS APPLY</dl> <dd>inline csss use</dd> <P>Css Apply in a Single element by inline css Technique.<br>  inline css also use method to insert style sheets in HTML document.  </P> ...
Read more

CSS text-emphasis-color Property

-
Image
 Learn CSS text-emphasis-color Property  Learn CSS text-emphasis-color Property The text-emphasis-color property in Cascading Style Sheets (CSS) is used to set the color of emphasis marks applied to text. Syntax: selector  {   text-emphasis-color : color ;  }   Learn CSS text-emphasis-color Property Example <! DOCTYPE html > < html > < head > < style > h1 {     text-emphasis-style : circle ;   text-emphasis-color : blue ; } p {   text-emphasis-style : triangle ;   text-emphasis-color : red ; } h2 {   text-emphasis-style : double-circle ;   text-emphasis-color : orange ; } h3 {     text-emphasis-style : sesame ;   text-emphasis-color : red ; } </ style > </ head > < body > < h1 > CSS text-emphasis-color Property </ h1 > < p > https://webdesigningtheory.blogspot.com/ </ p > < h2 > Web Designing Theory </ h2 > < h3 > ...
Read more

how to add background image in html.

-
Image
how to insert background image in html Program    Background Image  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < style >     p { background-image : url ( 'https://cdn.wallpapersafari.com/27/83/hGWHei .jpg' ); <!-- image path --> height : 600px ; <!--height of image-->         width : 50% ;     }     p {         color : red ;         text-align : center ;     } </ style > < body >     < h1 > Background Image </ h1 >     < BR<BR >< BR > < p > < BR<BR >< BR >< BR >< BR > how to insert background image ...
Read more