askvity

How do I Make All Letters a Different Color in CSS?

Published in CSS Styling 2 mins read

To make each letter a different color in CSS, you need to wrap each letter in its own HTML element (like a span) and then use CSS to target each element and assign a unique color.

The HTML Structure

First, structure your HTML so that each letter you want to color is enclosed in a separate span element:

<p>
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span> <span>W</span><span>o</span><span>r</span><span>l</span><span>d</span>
</p>

The CSS Styling

Next, use CSS, specifically the :nth-child selector, to target each span and assign it a different color. You can use a predefined list of colors or explore programmatic color generation.

p span:nth-child(1) { color: red; }
p span:nth-child(2) { color: orange; }
p span:nth-child(3) { color: yellow; }
p span:nth-child(4) { color: green; }
p span:nth-child(5) { color: blue; }
p span:nth-child(6) { color: indigo; }
p span:nth-child(7) { color: violet; }
p span:nth-child(8) { color: brown; }
p span:nth-child(9) { color: black; }
p span:nth-child(10){ color: gray; }

In this CSS:

  • p span targets all span elements that are direct children of a paragraph (p) element. Adjust the parent selector (e.g., div span) to match your HTML structure.
  • :nth-child(n) selects the nth child element. So :nth-child(1) selects the first span, :nth-child(2) the second, and so on.
  • color: [color name] sets the text color for the selected span. Replace [color name] with the color you want.

Example in Action

Here's a complete example combining the HTML and CSS:

<!DOCTYPE html>
<html>
<head>
<title>Colorful Letters</title>
<style>
p span:nth-child(1) { color: red; }
p span:nth-child(2) { color: orange; }
p span:nth-child(3) { color: yellow; }
p span:nth-child(4) { color: green; }
p span:nth-child(5) { color: blue; }
p span:nth-child(6) { color: indigo; }
p span:nth-child(7) { color: violet; }
p span:nth-child(8) { color: brown; }
p span:nth-child(9) { color: black; }
p span:nth-child(10){ color: gray; }
</style>
</head>
<body>

<p>
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span> <span>W</span><span>o</span><span>r</span><span>l</span><span>d</span>
</p>

</body>
</html>

Considerations

  • Automation: For longer strings of text, manually adding span elements can be tedious. You can use JavaScript to automate this process.
  • Accessibility: Ensure sufficient color contrast for readability, especially for users with visual impairments.

Related Articles