Newbie question about multiple colors in text

[Joe Todd]

I'm writing a simple site using htlm with css. Is there a simple way to
specify header text with different colors for different letters?

Thanks in advance,

Joe Todd

 

[Harlan Messinger]

I'm writing a simple site using htlm with css. Is there a simple way to
specify header text with different colors for different letters?

You mean, is there a way to specify for, say, an H2, "Randomly color
each of the letters a different rainbow color so that no two adjoining
letters are the same color?" No. If you must have the letters in
assorted colors, you'll have to put each letter in its own span tags and
apply separate colors to those spans.

There *is* a :first-letter pseudo-element you can use to style the
*first* letter in an element differently from the remaining letters:

h2 { color: red; }
h2:first-letter { color: green; }

I don't know what cross-browser support for :first-letter is.

 

[Jukka K. Korpela]

You mean, is there a way to specify for, say, an H2, "Randomly color
each of the letters a different rainbow color so that no two adjoining
letters are the same color?" No.

Right, no, but that's a rather funny interpretation of the question.

If you must have the letters in
assorted colors, you'll have to put each letter in its own span tags
and apply separate colors to those spans.

Using <span style="color:red">x</span> has really no tangible benefit over
<font color="red">x</font>. The same applies to <span class="red">x</span>
with .red { color: red }. You might win something, theoretically at least,
by using something like
<span class="special">x</span>
inside an h2 and
h2 .special { color: red; background: white; }

There *is* a :first-letter pseudo-element you can use to style the
*first* letter in an element differently from the remaining letters:

h2 { color: red; }
h2:first-letter { color: green; }

It's of course just an example, but a manifestly poor example: it sets color
without background, and it tries to make a color distinction but is
guaranteed to fail (more or less) for people with the most common form of
color-blindness.

I don't know what cross-browser support for :first-letter is.

Fairly good, see
http://www.quirksmode.org/css/contents.html
which tells that support exists at least from IE 5.5, which is probably the
oldest browsers worth caring about in matters of visual representation.

Of course, other usual CSS caveats still apply, so I would not recommend
using CSS e.g. to generate a logo that contains colored letters. An image is
a more practical approach. But if it's just fun coloring, go ahead.

Yucca

 

[Harlan Messinger]

Right, no, but that's a rather funny interpretation of the question.


Using <span style="color:red">x</span> has really no tangible benefit
over <font color="red">x</font>.

If one intends to have a valid Strict document, however, <font> isn't
available.

 

[Joe Todd]

"span" did the trick. I was trying to make whole words different specific
colors, not random.

Thanks to all for the quick replies!

Joe

 

[Jukka K. Korpela]

If one intends to have a valid Strict document, however, <font> isn't
available.

And there is no tangible benefit from using Strict, as such. If you really
want just color some letters, without wanting to designate them as somehow
special in any other respect or any other rendering than visual presentation
with colors, <font> is the most honest markup.

I forgot to mention that one can of course use
<font class="special">x</font>
with suitable styling, if desired. Or even
<font class="special" color="red">x</font>
Here the difference between <font> and <span> is that <font> says 'I'm
playing with fonts somehow' whereas <span> says just 'I'm doing something
inline'.

Yucca

 

[Adrienne Boswell]

I'm writing a simple site using htlm with css. Is there a simple way to
specify header text with different colors for different letters?

Thanks in advance,

Joe Todd

If you have PHP available, here's a nice script that makes rainbox text.
You define the colors in a separate stylesheet. In this example, there
are 5 colors, blue, green, yellow, red and purple. Usage:

<?php echo rainbow($variable)

function rainbow($str)
{
$arr1 = str_split($str);

for ($i = 0; $i <= count($arr1)-1; $i++) {
if($i % 5 == 0)
{
$class = "class='b'";
$y = 0;}
if($y==1)
{$class = "class='g'";}
elseif($y==2)
{$class = "class='y'";}
elseif($y==3)
{$class = "class='r'";}
elseif($y==4)
{$class = "class='p'";}
echo "<span ".$class.">".$arr1[$i]."</span>";
++$y;
}
}

?>