what is css selectors

First we need to know what is css? and How it Works with html pages. so start with basics of css.

CSS stands for Cascading Style Sheet. Basically CSS gives styling on our web pages. styling means gives background color , text color and many more... So our web page is now looking good. Also Make easy to use user Interface(UI).

Let's jump on to how css works?

so Basically, we need to add CSS in our HTML page. there are 3 ways to add css in our html.

Style tag-

We declare style tag within head tag and after the title tag and write all css in this tag.

Example -

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         h1 {
             color: red;
         }
     </style>
 </head>
 <body>
     <h1>this is style tag</h1>
 </body>
 </html>

Separate CSS File-

It is Standard practice of writing css.
Make css file with extension .css , then link with HTMl page.

Example :

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <h1>this is style tag</h1>
 </body>
 </html>

 h1 {
     color: blue;
     background-color: black;
 }

Inline CSS-
1. Inline css it know by name write css in line means write css and HTML together.
2. Inline css priority is greater than than above 2 type.
3. example -
```
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <h1 style="color: red; background-color: black;">this is style tag</h1>
 </body>
 </html>
```
  Let`s Jump On to what is Selector in CSS?
  
  First we need to know is what is selector and why we use them. so selector means how to select particular element or tag , yes it is very simple , no apply rocket science here. also we discuss why we use them because how to style element or tag , i think you find your answer, and yes you are right , beacuse we select the element or tag and than write css for them.
4. There are so many types of Selector in Css?
  1. Universal Selector :-
    1. Universal Selector is used for Remove styling which automatically applied by Browser.
      
      * { style properties }
```
 /* Universal Selector :- */
 * {
     padding: 0;
     margin: 0;
 }
```
  2. Invidual Selector :-
    1. Individual Selector is used for Selcting individual tag.
      
      p { style properties }
```
 /* Invidual Selector :- */
 p {
     background-color: #fff;
     color: black;
 }
```
  3. Class and Id Based Selector :-
    1. Class and Id Based selector is used by element class and id name. Class is denoted by . (dot) and Id is denoted by # (Pound).
    2. .class_name { style properties }
      
      #id-Name { style properties }
```
 /* Class and ID Based Selector */
 .class-name {
     font-size: 20px;
     font-weight: bold;  
 }
 #id-name {
     background-color: #fff;
     color: black;
 }
```
      1. Chained Selector :-
        
        Chained Selector is used for apply only to elements that matches all criteria.
        
        /* chained selctors */ li.bg-black.text-white{ background-color: #000; color: #fff; }
  4. Combined Selector :-
    1. Combined Selector is used for applying same Styling on more than one elements or tag.
    2. it is denoted by , (comma).
    3. p , h1 { style properties }
    4. ```
     p , h1 {
         background-color: #fff;
         font-size: 20px;
     }
```
5. Inside an element :-
  1. Inside an element is used for target element by element , in other words select top to down via each element.
  2. it is denoted by one space.
  3. div ul li { style properties }
  4. ```
   /* Inside an element */
   div ul li {
       background-color: aqua;
   }
```
  6. Direct Child :-
    1. Direct Child is used for direct targeting the element.
    2. it denotes by > (greater than).
    3. div > li { style properties }
    4. ```
     /* Direct Chaild */
     div > li {
         background-color: brown;
     }
```

Sibling selector :-
1. Sibiling Selector is used for targeting just after it elements. Means select it's sibilings elements.
2. it is denoted by + or ~ .
3. .sibiling > p { style properties }
4. ```
 /* Sibiling Selector */
 .sibiling > p {
     background-color: #313131;
 }
```

What is CSS and Selectors in CSS?

Table of contents

Let`s Jump On to what is Selector in CSS?

Subscribe to my newsletter

Shakti Dube

Shakti Dube