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>
