Geek Answers Handbook

What is the best practice for multiple colors in a sentence in HTML / CSS?

I know that I want to keep my style and my content separate, so suppose I want to display:

<h1>ROYGBV</h1>

on a page where each letter also matches the color, what would be better for this?

Will it be:

<h1><font color="red">R</font><font color="orange">O</font>

etc? And assuming that I have a few words in the paragraph that need to be colored as:

Sally found all the RED shells on the blue coast in the YELLOW sun ...

Can I use font tags throughout HTML? The only alternative I can come up with is to put it in span tags and add a class. This would allow me to change my definition of red in the css file for all iterations of red.

+4
source share
3 answers
Tag

<font> . MDN

. span .

.red {
  color: red;
}
.blue {
  color: blue;
}
.yellow {
  color: yellow;
}
<p>Sally found all the <span class="red">RED</span> seashells down by the <span class="blue">BLUE</span> seashore out in the <span class="yellow">YELLOW</span> sun ...</p>
Hide result
+8

:

<style type="text/css">
.classForColor {
color: red;
}
</style>

...

<body>
<span class="classForColor">txt</span>
</body>
0

You can always do this.

Here is the fiddle .

Here is a snippet.

.red {
  color: red;
}
.blue {
  color: blue;
}
.yellow {
  color: yellow;
}
<div>Sally found all the <span class="red">RED</span> seashells down by the <span class="blue">BLUE</span> seashore out in the <span class="yellow">YELLOW</span> sun</div>
Run codeHide result
0
source

More articles:


All Articles