CSS jounerny is Just like Roller Coaster
Tags: css, webdev, learncodeonline, tutorial
Published: 2022-11-13 08:54:54

**Table of Contents** 

- introduction of css
- Basic selector
- Pseudo-class selector

#let understand css 
Cascading Style Sheets is languages which used for described presentation of HTML.
CSS also described how the element are going to rendered on screen.
 **css types**

- External: link tag is used to `link:css`

```
!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>External CSS Example</title>
    <link rel="stylesheet" href="../styles.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>
```
**extenalcss**

```
h1 {
  background-color: yellow;
  color: blue;
  border: 1px solid black;
}

p {
  color: red;
}
```

- internal : `<style>` tag used to inside head element 

```
<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <style>
      h1 {
  
        background-color: yellow;
        color: blue;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>AXM||internal css!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>
```

- inline: style tag used html element 

```
<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title> inline CSS t</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      Hello World!
    </h1>
    <p style="color:red;"> inline CSS exm</p>
  </body>
</html>
```

## let talk about selector 
selector target the  html css to applt style/css.

## some selector we are going to understand by using example for better understanding.
let start with our first selector ,that is any guess let me give u hint it apply in whole body , u get or not , yes, we are talking or going to guseess about 

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS||AXM</title>
</head>

<body>
    <div  class="div-1">   welcome to class live   </div>
    <span > span is nothing ,it just line of code mean in-line , it doesnt take any space </span>
    <p id="para-1"> we know already what is paragraph </p>
    <ul>
        <li class ="bg-blue text-white" > AXM </li>
        <li class="sibling">AXM  2</li>
        <li>AXM 3</li>
        <li>AXM 4</li>
        <li>AXM 5</li>
    </ul>
    <div>   
        <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a id="para-1" href="#">Test</a></li>
        <li>higlisht me</li>
        
      </ul>
    </div>
    <section>
       <p class="sibling"> Test 1</p>
       <p>Test 2</p>
       <p>Test 3</p>
       <p>Test 4</p>

    </section>
</html>
```
## universal Selector
universal selector  denoted by * (Asterisk)

```
<style>
* {
            background-color: #DE4839;
            color: #ffffff;
        }
</style>
```
## individual selector
individual Selector use tag/element of html

```
<style>
 p{
           background-color: #686868;
           color: #ffffff;
        
        }
</style>
```

## class&id : using class and id we target the html element using (.) and for id #

```
<style>
.div-1{
            background-color: #ef9325;
            color: azure;
        }
 /* id */
 #para-1{
            background-color: #efefef;
            color: #e93916;
        }
</style>


```

## and selector 
is also know as chained selector
it used sub class element to target 

```
li.bg-blue.text-white{
        background-color: rgb(0, 22, 94);
        color: #f1f1f1;

       }
```
 

## combined selector : we can used more than one  html tag to target the html.

```
p,span{
        background-color:  rebeccapurple;}
        /* inside element */
        div ul li {
            background-color: #000000;
        }
```
  

## Direct child selector : child combinator (>) is placed between two CSS selectors

```
/* direct -child seclector */
        div>li{
            background-color: rgb(60, 248, 60);
            color: blue;
          
        }
    
       
```

## sibiling: sibling selector is used to select an element that is directly after another specific element

```
 .sibling+p{background-color: lightyellow;
            color:#686868 ;
        }
        /* sibling */
        .sibling+li{
           background-color: lightyellow;
            color:#686868 ;
        }
```