Colors in CSS

What are colors?

  • As the name defines colors are used to set the colors on the text.

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

  • In today's tutorial, we will see how we can use these color values.

This will be our basic boilerplate code for colors property

index.html

<!DOCTYPE html>
<html>
<head>
    <title> Colors in CSS </title>
    <style>
       
    </style>
</head>
<body>
    <p class="para"> This is a paragraph </p>
</body>
</html>


Color by name

  • In this CSS color property, we will use the color name to set the color of the text.

  • In this, we can use predefined color names like red, green, blue, purple, orange, etc.

.para {
       color: red;
}

Output:

This is a paragraph


Color by RGB:

  • In this color property, we will use RGB value to set the color.

  • RGB color value represents RED, GREEN, and BLUE. And 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);
}

Output:

This is a paragraph


Color by HEX

  • In this color property, 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: #201219;
}

Output:

This is a paragraph



Colors in CSS Part-5 PDF

Post a Comment

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

Top Post Ad

Below Post Ad