Tutorial Article

CSS Colors

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: 👉 This sets the text color of all […]

Apr 1, 2026CSSCSS Colors & BackgroundsTutorials

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

CSS Colors Syntax

selector {
    color: value;
}

CSS Colors Example

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

CSS Colors Complete 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 color for text and background-color for 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.