CSS Basic #1

CSS - Inline, Internal, and External CSS

Inline CSS: allows you to apply a unique style to one HTML element at a time. You can assign the Inline CSS to a specific HTML element by using the style attribute with any CSS properties defined within it.
```
  <body>
           <h1>Inline CSS</h1>
            <p style= “color: red;”>My name is Akash Pawar</p>
  </body>
```

Internal CSS is used to define a style tag for a single HTML page. It is defined in the <head> section within an <style> element.

  <head>
       <style>
                p{
                     color: purple;
                   }
       </style>
  </head>

External CSS is used to make changes on multiple pages. We will add the stylesheet in the <head> section using the <link> tag.
```
  <head>
         <link rel= “stylesheet” href= “style.css”>
  <head>
```
CSS Selectors
- CSS element Selector
- CSS id Selector
- CSS class Selector

The CSS grouping Selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Selectors</title>
    <style>
        /* Element selector */
        p{
            border: 2px solid red;
        }

        /* Id selector */
        #firstPara{
            color: green;
        }

        /* Class selector */
        .bgBlue{
            color: yellow;
            background-color: blue;
        }

        /* Grouping selector */
        footer, span{
            background-color: pink; 
        }
    </style>
</head>
<body>
    <h3>CSS Selectors</h3>
    <p id="firstPara">This is a simple paragraph to demonstrate css selectors</p>
    <p id="secondPara" class="redElement bgBlue">This is a another simple paragraph to demonstrate css selectors</p>
    <div>
        <p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
        <span>this is span</span>
    </div>
    <footer>This is footer</footer>
</body>
</html>

Colors in CSS

The methods of defining the color in the CSS

Directly writing the particular color name.
With the help of ‘RGB,’. The RGB color range varies from 0 to 255.
By giving hex colors.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Colors in CSS</title>
    <style>
        #firstPara{
            color:blueviolet; /* Color by name */
        }

        #secondPara{
            color: rgb(223, 130, 54); /* Color by rgb value */
        }

        #thirdPara{
            color: white;
            background-color: #ff4532; /* Color by hex value */
        }
    </style>
</head>
<body>
    <h2>This is my first box</h2>
    <p id="firstPara">This is a paragraph from first box</p>

    <h2>This is my first box</h2>
    <p id="secondPara">This is a paragraph from second box</p>

    <h2>This is my first box</h2>
    <p id="thirdPara">This is a paragraph from third box</p>
</body>
</html>