Colors in CSS


What are colors?

  • Colors are used to set the colors on the text.

  • In CSS, we can set colors in three types of value: i) color by name, ii) color by RGB value, and iii) color by HEX value.


Color by Name

  • In this CSS color property value, we will use name of the color to set the color of the text.
  • In this, we can use predefined color names like red, green, blue, purple, orange, etc.

.para {
       color: blue;
}


Color by RGB

  • In this color property value, we will use RGB value to set the color.
  • RGB color value represents R=RED, G=GREEN, and B=BLUE
  • rgb value can be from 0 to 255.
  • We can set rgb value by using this: rgb(red, green, blue).
  • We can also set the opacity of the color by using alpha value. The alpha value can be from 0.0 to 1.0.
  • We can set alpha value using this: rgb(red, green, blue, alpha).

.para {
       color: rgb(196, 16, 166, 0.5);
}


Color by HEX

  • In this color property value, we will use the HEX value to set the color.
  • HEX defines the hexadecimal value of the color and we can set using #rrggbb or #000000.
  • In rrggbb, rr for Red, gg for green and bb for blue. OR we can also use these values from 0 to 255.

.para {
       color: #324300;
}


Code Described in the video

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Colors in CSS </title>
    <style>
        /* Color by Name */
        /* p {
            color: green;
        } */

        /* Color by RGB Value */
        /* p {
            color: rgb(255, 0, 100, 1);
        } */

        /* Color by HEX Value */
        p {
            color: rgb(44, 193, 101);
        }
    </style>
</head>

<body>
    <p> This is a paragraph </p>
    <p> This is another paragraph </p>
    <p> This is also another paragraph </p>
</body>

</html>



Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad