Introduction to CSS

There are 3 ways we can link CSS to a HTML Document -

Inline CSS

In this option we use the style property of HTML elements to provide style

<h1 style="color: yellow">Hello</h1>
<!-- The code above makes the text yellow -->

`<style></style>` Tag

We use the style tag to write multi line and multi element CSS inside our HTML code

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <style>
            h1{
                color: #fcfcfc; /* makes the text gray */
            }
            body{
                background-color: #212121; /* A dark black baground */
            }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>this is some sample text</p>
    </body>
</html>

Seperate `.css` file

We can also store our css in a different file. To link the css we can use the link tag as below -

<link rel="stylesheet" href="style.css" />

This will reference a style.css file for the styles.

Few base CSS properties

background-color in CSS can be used to set background color of target element(s) in CSS.
color in CSS can be used to set text color of target element(s) in CSS

Ways to represent color in CSS

By Name: There are a lot of css colors mentioned by name. For example: “red”, “blue”, “beige”
By Hex value We can use a hex value of 6 digits to represent colors. First two digit denote red channel, next two denote the green channel and the last two denote the alpha channel. Now each two digit go from 00 to FF i.e. 0 to 255 in decimal, Giving us the 8 bit colors. For example: #fc2492 denote a high mix of red and blue with some green giving us a magenta color.
By rgb() same thing as hex but uses the decimal numbers - rgb(252, 36, 146) is the same color as the hex.

There are other color representations in CSS you can read about them form this link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Color_values