Skip to Content

How to color HTML text?

By: Author Color With Leo

Coloring text on a webpage is a great way to make your content more visually engaging. With HTML and CSS, you have a lot of options for customizing the color of your text to fit your website’s design.

In this comprehensive guide, we’ll cover everything you need to know about coloring text in HTML, including:

  • Using inline HTML style attributes
  • Styling text with CSS
  • Choosing color values
  • Coloring text with class and id selectors
  • Creating contrast between text and background colors
  • Applying color to links, visited links, hover states, and more

Follow along and you’ll learn how to make your web content stand out with creative text colors.

Coloring Text with Inline HTML Styles

The easiest way to color text in HTML is to use inline style attributes. Here’s the basic syntax:

<p style="color: blue;">This text will be blue.</p>

The style attribute allows you to specify CSS properties like color. This will color just the text within this paragraph tag blue.

You can use inline styles like this anywhere you want colored text. Some examples:

<h1 style="color: red;">Heading</h1>

<div style="color: green;">This div text will be green.</div> 

<span style="color: purple;">You can even color inline <span> elements!</span></span>

While inline styles are easy, they aren’t best practice for coding websites. A better way is to use CSS.

Coloring Text with CSS

Cascading Style Sheets (CSS) allow you to control the style and layout of multiple elements in one place. This makes it easier to maintain formatting across your site.

To color text with CSS, you’ll need to:

  1. Define CSS rules with a selector and color property
  2. Link the stylesheet to your HTML page

Here’s an example CSS rule to color all h1 elements red:

h1 {
  color: red; 
}

And the HTML to link this stylesheet:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Now any h1 tags on that HTML page will be styled red. You can create CSS rules for any tags or elements you want.

Choosing Color Values

When specifying a color in CSS, you can use various color value formats:

  • Color names – like blue or purple
  • HEX codes – like #000000 for black or #ffffff for white
  • RGB values – like rgb(255, 0, 0) for red
  • HSL values – like hsl(0, 100%, 50%) for red
  • RGBA values – RGB with alpha transparency like rgba(255, 0, 0, 0.5) for semi-transparent red

HEX codes and RGB values are most commonly used, as they allow for millions of possible color combinations. Here are some examples of different color formats:

Color Color Name HEX RGB HSL
  Purple #581845 rgb(88, 24, 69) hsl(288, 43%, 34%)
  Maroon #990000 rgb(153, 0, 0) hsl(0, 100%, 30%)
  Yellow #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)

Use any of these formats in your CSS color properties. Play around with different color picker tools to find the exact colors you want.

Coloring Text with Class and ID Selectors

You can also use classes and ID attributes to color text in your HTML. This allows you to apply colors to specific elements without affecting all instances of a tag.

For example, to color some paragraphs red and others blue:

<p class="red">This paragraph will be red.</p>

<p class="blue">This one will be blue.</p>

Then in your CSS:

.red {
  color: red;
}

.blue {
  color: blue; 
}

The class selector will style all elements matching that class. You can also use ID selectors:

  
<p id="green">This paragraph will be green.</p>

#green {
  color: green;
}

The ID selector only selects the element with that specific ID attribute. This allows complete control over each individual element’s text color.

Creating Contrast Between Text and Background Colors

When picking text and background colors, it’s important to ensure there is enough contrast for the text to be readable.

Low contrast text is difficult to read and harms accessibility. The WCAG recommended minimum contrast ratio for body text is 4.5:1.

Here are some examples of text/background color combinations that meet minimum contrast ratios:

  • White text on a black background (21:1)
  • Black text on a white background (21:1)
  • Dark blue #00008b text on a white background (14:1)
  • White text on a medium purple #9370db background (4.5:1)

There are many online contrast checking tools you can use to determine if your color combinations provide enough contrast.

It’s also a good idea to avoid using only color to convey meaning, as colorblind users may not be able to differentiate. Always use additional indicators like bolding or icons if color is meant to signify an action.

Coloring Hyperlinks

Links are colored by default to differentiate them from normal text. Here are some ways to customize link colors:

  • a { color: red; } – Make unvisited links red
  • a:visited { color: grey; } – Visited links grey
  • a:hover { color: green; } – Hovered links green
  • a:active { color: yellow; } – Active links yellow

You can combine these states to have full control over link coloring. Make sure to test visited and hover states properly.

It’s best to use standard blue for unvisited links and purple for visited links, as those are what users expect. But you can customize the rest to fit your design.

Applying Color to Text Shadows

Using text shadows can make your text stand out. Text shadows work just like regular CSS box shadows. You can add multiple layered shadows with different colors.

Here’s an example with a blue text shadow:

h1 {
  color: white;
  text-shadow: 2px 2px 4px blue;  
}

This adds a 2px x 2px blue shadow offset 4px behind the text. Play around with the blur radius, spread radius, and X/Y offsets to adjust the shadow.

Using darker shadows on lighter text and vice versa ensures the best contrast. Make sure your shadows support the vibrancy of your content rather than hiding it.

Animating Text Colors

For an extra cool effect, you can animate text color changes using CSS transitions. For example, this will fade the text in and out from blue to red:

p {
  transition: color 2s;
}

p:hover {
  color: blue; 
}

p:active {
  color: red;
}

The transition property makes the color change gradual over 2 seconds. Try out different easing values like ease-in-out for smooth transitions.

Subtle color animations can make your pages feel more dynamic. But use them sparingly, as too much movement can make text harder to read.

Compatibility Considerations

Most text coloring techniques work across modern browsers. But there are a few compatibility issues to keep in mind:

  • RGBA color values don’t work in IE 8 and earlier versions.
  • CSS gradients and shadows may not be supported in IE 9 and below.
  • Animations and transitions have limited support in IE 9 and earlier.

Your website visitors likely won’t be on such outdated browsers. But it’s still a good idea to provide fallbacks where necessary.

For example, you can specify a solid background color as a fallback before declaring a gradient background.

Use feature detection to selectively apply effects only for browsers that support them. This will allow older browsers to still view properly styled content.

Conclusion

Coloring text in HTML and CSS gives you many possibilities for customization. Use inline styles for quick changes or implement CSS for complete control over your site’s text colors.

Ensure adequate contrast between your text and background colors. Style your links properly and consider animating your text colors for added flair.

Following the techniques in this guide, you can make your web content vibrant, easy to read, and uniquely branded. Think creatively when applying colors to HTML text to make the content engaging for your readers.