How Do I Change The Text Colour In CSS?

In CSS (Cascading Style Sheets), changing the text colour is a fundamental aspect of web design and styling. CSS provides several methods to alter the colour of text, allowing web designers to create visually appealing and readable content. By modifying the text colour, you can enhance the overall look and feel of your website, improve contrast for accessibility, and establish a cohesive visual identity. In this comprehensive guide, we will explore various techniques to change the text colour using CSS and demonstrate how to use them effectively to create stunning and accessible web typography.

1. The `color` Property

The primary method to change the text colour in CSS is by using the color property. The colour property allows you to specify the colour of the text content using various formats, such as named colours, hexadecimal, RGB, or HSL values.

/* Example: Changing the text color of a paragraph to red */
p {
  color: red;
}

In this example, the text inside <p> elements will be displayed in red.

2. Named Colours

CSS includes a set of 147 predefined named colours that you can use directly in the color property.

/* Example: Using a named color for a heading */
h1 {
  color: darkblue;
}

Named colours are easy to remember and provide a quick way to apply specific colours to your text.

3. Hexadecimal Colours

Hexadecimal colours are another widely used method for defining colours in CSS. They consist of a hash (#) followed by six hexadecimal digits representing the RGB values.

/* Example: Using hexadecimal color for a link */
a {
  color: #007bff;
}

In this example, the text colour of all hyperlinks (<a> elements) will be set to a blue shade defined by the hexadecimal value.

4. RGB and RGBA Colours

RGB (Red, Green, Blue) and RGBA (RGB with alpha channel) colours provide more control over the colour components. RGB colours are defined using the rgb() function, while RGBA colours include an additional alpha value (opacity) defined using the rgba() function.

/* Example: Using RGBA color for a paragraph */
p {
  color: rgba(255, 0, 0, 0.8); /* Red with 80% opacity */
}

RGBA colours are particularly useful when you want to create semi-transparent text or text overlays.

5. HSL and HSLA Colours

HSL (Hue, Saturation, Lightness) and HSLA (HSL with alpha channel) colours provide an alternative way to describe colours based on their hue, saturation, and lightness values.

/* Example: Using HSLA color for a span */
span {
  color: hsla(120, 100%, 50%, 0.7); /* Green with 50% lightness and 70% opacity */
}

HSL colours are beneficial for generating variations of colour while maintaining consistency in saturation and lightness.

6. Text Shadow

The text-shadow property allows you to add a shadow effect to the text, creating a visually appealing and stylish look.

/* Example: Adding a text shadow to a heading */
h2 {
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

In this example, the text of <h2> elements will have a subtle shadow effect.

7. Text Color and Accessibility

When changing the text colour, it is essential to consider accessibility. Ensuring sufficient contrast between the text colour and the background is crucial for readability, especially for users with visual impairments.

WCAG (Web Content Accessibility Guidelines) provides specific contrast ratios that should be met to ensure accessibility. For example, the minimum contrast ratio for normal text and large text is 4.5:1 and 3:1, respectively.

/* Example: Ensuring accessibility with contrast */
p {
  color: #333; /* Dark text color */
  background-color: #f0f0f0; /* Light background color */
}

By testing your text colour combinations against accessibility guidelines, you can ensure that your content is readable by a wider audience.

8. Changing Text Color on Hover

CSS allows you to change the text colour when a user hovers over an element using the :hover pseudo-class.

/* Example: Changing text color on hover for links */
a:hover {
  color: orange;
}

In this example, the text colour of hyperlinks will change to orange when the user hovers over them.

9. Combining Text Color with Background Images

Another creative way to change text colour is by combining it with background images or gradients. This technique can be used to create visually engageing headers or call-to-action sections.

/* Example: Changing text color with background image */
.header {
  background-image: url("header-background.jpg");
  color: white;
}

In this example, the text inside the element with class .header will be displayed in white on top of the background image.

10. Transparent Text with Background Blur

To create an eye-catching effect, you can use the backdrop-filter property along with a transparent text colour to display text on top of a blurred background.

/* Example: Creating transparent text with background blur */
.hero {
  background-image: url("hero-background.jpg");
  backdrop-filter: blur(5px);
  color: transparent;
}

In this example, the text inside the element with class .hero will be transparent and appear on top of a blurred background.

11. Conclusion

Changing the text colour in CSS is a versatile and powerful tool for web designers to customise the appearance and style of their web content. By using various colour formats, adding text shadows, and combining text with background images or gradients, you can create visually appealing and engageing typography.

However, it is crucial to consider accessibility when changing text colour. Ensuring sufficient contrast between the text and background colour is essential for readability, especially for users with visual impairments. By following accessibility guidelines, you can create a user-friendly and inclusive web experience for all your visitors.

1. The color Property