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

what is the CSS Selectors?

  •  CSS is Cascading Style Sheets  selector determines which HTML  elements your style apply.
  • CSS rule consists of selector and block of declaration inside{...}  define properties.

CSS Selectors

  • css selectors  patterns use css identify and select HTML element on webpage that styles can be applied to them.
  •  CSS selector type  refers to different way can select HTML  element.
  • CSS selector has specific target elements.

Learn CSS Selectors 

Type of CSS Selector (element)

 1) Universal selector (*)

   Universal selector selects all HTML elements on the page
   (code CSS )
* {
margin: 2px;
padding: 1px;
}
 
  •  * Selector all html element.
  •  * selector use to reset default browser spacing.
  •  * seletor applies styles to the entire page.
2) Element Selector
 css code
p {
 color:blue;
}
 
  •  Element Selector all (paragraph) <p> Elements.
  •  change text color of  every paragraph to blue.
 
3) Class Selector(.)
  css code
.box {
 background-color: yellow;
}

  •  . use before class name
  •   style all elements with class box
  •   classes can be used multiple 
4) ID Selector(#)
css code
 
#title
{
 font-size:30px;
}

  •   # used before ID name
  • ID unique 
5) Grouping Selector
 code css
h1,h2,p
{
color:red;
}

  •  Applies same style to multiple elements
  •  Save time and  avoids repeated css
6) Attribute Selector
code css
input[type="email"]
{
border:2px solid green ;
}

  •  selects elements based on attributes
  •  style only email input fields

7) Pseudo-class Selector
code css
a:hover{
  color: orange;
}
  •    :hover activates  mouse over the link
  •     use for interaction effects
  •    example: :focus, :active, :visited
Learn CSS Selectors 

Syntax 

css
 selector
{ 
property:   value;
property:   value;

}

Learn CSS Selectors 

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]

<head>
        <title> CSS selector </title>


  •   <head>  section 
  •   head section contains metadata about page. not visible on the page itself.
  •  <title> tag  title section set the title of the page shows the browser tab.
Step 4]

<body>

  • Contains all visible of the webpage.
  • Everything inside <body> tag visible content of the webpage.
  • User will display/see their browser.

Step 5]

  css
<style>
     p{  text-align:center;
         color:rgb(19, 47, 253);
         
             }   

    </style>

  •  <style> use to css directly (internal CSS) in the HTML  file.
  •  <style> inside anything is css code that applies to the HTML page.

  • <P> tag use to type selector.
  • target all paragrapha  <P> elements on the page.
  •  contains  CSS  {. . .} rules that apply to elements.


 text-align:center;

text-align:center this rule centers the horizontally inside each <P>

 color:rgb(19, 47, 253);

color sets text color is blue

Step 6]

<body>
 <p>Hello every one</p>
  <p>learn to programming language</p>
   <p id="pro">HTML,CSS,PHP</p>
 <p>https://webdesigningtheory.blogspot.com/</p>
 

  • <P>  stands for paragraph 
  • create  paragraph on the web page with text.
  • hello  every one
  • default paragraphs are displayed on new line.  

   <p id="pro">HTML,CSS,PHP</p>

 paragraph a unique identifier.

Step 7]

closing the Tag

</body>
</html>

Learn CSS Selectors 

Example 

<!DOCTYPE html>
<html>
<head>
<title> CSS Selector </title>

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

    </style>
</head>
<body>
 <p>Hello every one</p>
  <p>learn to programming language</p>
   <p id="pro">HTML,CSS,PHP</p>
 <p>https://webdesigningtheory.blogspot.com/</p>
 
</body>
</html>

Learn CSS Selectors Step by Step

Output

web designing theory










RelatRelated Post :-

How to use the kbd tag in html

How to use the footer tag in HTML

 How to use html search input type

Comments

Post a Comment

Popular posts from this blog

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

html iframe

-
Image
HTML <iframe> Information           1] The HTML  <iframe>   tag specifies an inline frame          2] The   src   attribute defines the URL of the page to embed          3] Always include a   title   attribute (for screen readers)          4] The html <iframe>  height   and   width   attributes specify the size of the iframe          5] html <iframe> Use  border:none;  to remove the border around the ifram Program <!doctype html> <html> <body> <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe   src=" https://webdesigningtheory.blogspot.com/2023/05/html-and-css-use-to-create-easy- webpage.html " height="300" width="500" title="iframe"> </iframe> </body> ...
Read more

CSS text-transform Property

-
Image
 CSS text-transform Property Tutorial CSS text-transform Property  CSS text-transform property   is used to control capitalization of text. change text appears visually in browser without changing  the original HTML Content.  HTML text actual in stays same, but CSS change how is displayed. Syntax  selector {   text-transform: value; } CSS text-transform Property Structure Explained with  Diagram CSS text-transform Property  1) uppercase 2) lowercase 3)capitalize CSS text-transform Property Tutorial Example <! DOCTYPE html > < html > < head > < style >   .upper {     text-transform : uppercase ;   } .lower {   text-transform : lowercase ; } .cap {   text-transform : capitalize ; } </ style > </ head > < body > < h2 class = "upper" > css text transformation </ h2 > < p class = "lower" > CSS TEXT TRANSFORMATION PROPERTY </ p > < p class = "...
Read more

Html anchor tag

-
Image
   How to Add HTML  Anchor Tag    Anchor Tag  The <a> tag define hyperlink   1]  Html anchor tag define hyperlink this use to link from one           page to another.  2]  Its create hyperlink to other web page as well as files, location   3]  Most important attribute of<a> element is the href attribute.  4]  when link is clicked it redirects the user to that page.  5]  The <a> tag creates a clickable link.  6] The href attribute sets the target page or site  example:-  webdesigningtheory.blogspot.com/ 7] The target attribute specifies in what tab ,window to open the new       page.  8]  Its href  <a>  attribute  creates a hyperlink to web page, files                 email addresses ,locations in the same page else URL address.  9] ...
Read more