CSS Colors are used to define the color of text, backgrounds, borders, and other elements on a webpage.
Colors play a very important role in web design as they improve visual appearance, readability, and user experience.
In CSS, colors can be applied using different formats such as:
- Color names (e.g., red, blue)
- HEX values
- RGB values
selector {
color: value;
}p {
color: red;
}👉 This sets the text color of all <p> elements to red.
Attributes
| Property | Description | Example |
|---|---|---|
| color | Sets text color | color: blue; |
| background-color | Sets background color | background-color: yellow; |
| border-color | Sets border color | border-color: black; |
| outline-color | Sets outline color | outline-color: red; |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Colors Example</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
}
p {
color: green;
}
div {
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Colors</h1>
<p>This is a paragraph with green text.</p>
<div>This box has a red border.</div>
</body>
</html>Output
Browser Output
The page will have a light gray background
The heading will appear in blue color
The paragraph will appear in green color
The box will have a red border
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Notes
- CSS supports multiple color formats (name, HEX, RGB)
- Use
colorfor text andbackground-colorfor backgrounds - Choose colors carefully for better readability and accessibility
- Avoid using too many colors to keep design clean
- Use consistent color schemes for better UI/UX
Conclusion
CSS Colors are essential for making web pages visually appealing and user-friendly. By using different color properties, you can enhance design, highlight important elements, and improve the overall user experience.