CSS Text & Fonts
CSS Text Color
The CSS Text Color property is used to change the color of text displayed on a webpage.
By using the color property, you can apply different colors to headings, paragraphs, links, buttons, and other text elements. The supporting concepts are explained in CSS Colors and CSS Font Family.
Text color plays an important role in:
- Improving readability
- Enhancing visual design
- Highlighting important content
- Creating a consistent color scheme
Syntax
CSS Text Color Syntax
css
selector {
color: value;
}CSS Text Color Example
css
h1 {
color: blue;
}This changes the color of all <h1> elements to blue.
Attributes
| Property | Description | Example |
|---|---|---|
| color | Sets the text color | color: red; |
| color | Using HEX value | color: #ff0000; |
| color | Using RGB value | color: rgb(255, 0, 0); |
| color | Using HSL value | color: hsl(0, 100%, 50%); |
| color | Using transparent color | color: rgba(255, 0, 0, 0.5); |
Example
CSS Text Color Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Color Example</title>
<style>
h1 {
color: blue;
}
h2 {
color: #ff6600;
}
p {
color: rgb(0, 128, 0);
}
span {
color: red;
}
</style>
</head>
<body>
<h1>Blue Heading</h1>
<h2>Orange Subheading</h2>
<p>This paragraph uses an RGB color value.</p>
<p>This paragraph contains a <span>red highlighted text</span>.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| color | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- The
colorproperty affects only the text color. - CSS supports color names, HEX, RGB, RGBA, HSL, and HSLA values.
- Always ensure sufficient contrast between text and background colors for accessibility.
- The
colorproperty is inherited by child elements unless overridden. - Use consistent colors throughout a website to maintain a professional appearance.
Conclusion
The CSS Text Color property allows you to control how text appears on a webpage. By choosing appropriate colors and maintaining good contrast, you can improve readability, accessibility, and the overall visual appeal of your website.