CSS Color Properties:
1. color Property:The color property is used to set the text color of an element. You can specify colors using color names, hexadecimal codes, RGB values, RGBA values, HSL values, or HSLA values.
Example:
color: blue; /* Using color name */
}
2. background-color Property:
The background-color property sets the background color of an element. Like the color property, it supports various color formats.
Example:
background-color: #ff0000; /* Using hexadecimal code */
}
3. border-color Property:
The border-color property sets the color of an element's border. It can be applied individually to each side (top, right, bottom, left) using properties like border-top-color, border-right-color, etc., or all sides collectively using border-color.
Example:
div {
border: 2px solid green; /* Using color name */
}
4. box-shadow Property:
The box-shadow property creates a shadow effect around an element. It includes a color value to specify the color of the shadow.
Example:
div {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Using RGBA color */
}
Specifying Colors:
1. Color Names:
CSS provides predefined color names like red, blue, green, etc., which can be directly used to set colors.
Example:
color: red; /* Using color name */
}
2. Hexadecimal Codes:
Hexadecimal codes are six-digit codes that represent colors in RGB format. They start with a # symbol followed by six hexadecimal digits.
Example:
div {
background-color: #00ff00; /* Using hexadecimal code for green */
}
3. RGB Values:
RGB values represent colors using a combination of red, green, and blue values. Each value ranges from 0 to 255.
Example:
color: rgb(255, 0, 0); /* Using RGB value for red */
}
4. RGBA Values:
RGBA values are similar to RGB but include an additional alpha channel to specify opacity. The alpha value ranges from 0 to 1.
Example:
background-color: rgba(0, 0, 255, 0.5); /* Using RGBA value for semi-transparent blue */
}
5. HSL Values:
HSL (Hue, Saturation, Lightness) values represent colors using a different color model. Hue is represented as an angle between 0 and 360 degrees, saturation and lightness are represented as percentages.
Example:
color: hsl(120, 100%, 50%); /* Using HSL value for green */
}
6. HSLA Values:
HSLA values are similar to HSL but include an additional alpha channel for opacity.
Example:
background-color: hsla(0, 100%, 50%, 0.7); /* Using HSLA value for semi-transparent red */
}
Applying Colors with Examples:
1. Text Color:
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>This is a blue heading</h1>
</body>
</html>
2. Background Color:
<html>
<head>
<style>
.container {
background-color: #ffcc00;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<p>This is a yellow background</p>
</div>
</body>
</html>
3. Border Color:
<html>
<head>
<style>
.box {
border: 2px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<p>This box has a green border</p>
</div>
</body>
</html>
4. Box Shadow:
<html>
<head>
<style>
.shadow-box {
width: 200px;
height: 200px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="shadow-box"></div>
</body>
</html>
Practice Excercise Practice now