How is multi-color text/font done in CSS?

[eastcoastguyz]

I'm a newbie to CSS, so be kind. :-)

I have looked at examples of CSS and have not seen this yet. How can
you change the colors of the text in the same word in CSS? For example,
when how can you take the word "infosystem s" and make the "info" part
red, and the "systems" part blue? I don't want to have to hard-code
this in HTML which is why I'm looking to CSS to do this. Thanks!

[Evertjan.]

eastcoastguyz wrote on 18 jan 2007 in
comp.infosystem s.www.authoring.stylesheets:

I'm a newbie to CSS, so be kind. :-)

I have looked at examples of CSS and have not seen this yet. How can
you change the colors of the text in the same word in CSS? For example,
when how can you take the word "infosystem s" and make the "info" part
red, and the "systems" part blue?

<span style='color:re d;'>
info</span><span style='color:bl ue;'>systems</span>

I don't want to have to hard-code
this in HTML which is why I'm looking to CSS to do this. Thanks!

"hard-code" ?
CSS is no softy!

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Andreas Prilop]

On Thu, 18 Jan 2007, eastcoastguyz wrote:

How can
you change the colors of the text in the same word in CSS? For example,
when how can you take the word "infosystem s" and make the "info" part
red, and the "systems" part blue?

Example:
http://www.unics.uni-hannover.de/nht.../rainbow.html6

[Andy Dingley]

eastcoastguyz wrote:

For example,
when how can you take the word "infosystem s" and make the "info" part
red, and the "systems" part blue?

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

<p>
<span class="highligh t" >info</span><span class="lowlight "

>systems</span>

</p>

I don't want to have to hard-code
this in HTML which is why I'm looking to CSS to do this.

Hard-code suitably abstract class or id values into the HTML, then
attach the specific styles through CSS.
If your classes are appropriate, it's not aproblem to have hard-coded
them

[eastcoastguyz]

Andy Dingley wrote:

eastcoastguyz wrote:

For example,
when how can you take the word "infosystem s" and make the "info" part
red, and the "systems" part blue?

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

<p>
<span class="highligh t" >info</span><span class="lowlight "

systems</span>

</p>

I don't want to have to hard-code
this in HTML which is why I'm looking to CSS to do this.

Hard-code suitably abstract class or id values into the HTML, then
attach the specific styles through CSS.
If your classes are appropriate, it's not aproblem to have hard-coded
them

Thanks to all for replying.

What if you had the same word in this example, "infosystem s" and wanted
each letter to be a different color, would this require each letter be
addressed to a different span class? Thanks!

[Jukka K. Korpela]

Scripsit eastcoastguyz:

What if you had the same word in this example, "infosystem s" and
wanted each letter to be a different color, would this require each
letter be addressed to a different span class? Thanks!

Yes, though in principle you could use some other tags than <span(but
<spanis safest since it means nothing and has no default styling in any
reasonable browser).

The very idea is so weird that it's perhaps just fine that it's cumbersome
to implement in CSS.

Note, by the way, that people who posted you some sample codes forgot to set
the background. You will now probably be inclined into making the same
common mistake. Doing _technically correctly_ the thing you want is actually
even more awkward than the simplistic examples suggest.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[dorayme]

In article
<11************ **********@51g2 000cwl.googlegr oups.com>,
"Andy Dingley" <di*****@codesm iths.comwrote:

eastcoastguyz wrote:

For example,
when how can you take the word "infosystem s" and make the "info" part
red, and the "systems" part blue?

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

<p>
<span class="highligh t" >info</span><span class="lowlight "

systems</span>

</p>

and put in a background colour too where while at it, eg.

..highlight { color: red; background: #fff;}

Since old K and I teamed up, he leaves me to mention the little
stuff, I am not to be trusted with anything bigger.

--
dorayme

[Andy Dingley]

Jukka K. Korpela wrote:

Note, by the way, that people who posted you some sample codes forgot to set
the background.

I didn't forget, I omitted it deliberately as being inappropriate.

There is no reason to set background colour in every CSS block. There's
no reason why every time colour is set, background colour needs to be
set too. The need is to ensure that unviewable combinations don't
arise. This can be achieved by crudely setting in pairs, or by by
carefully studying the overall stylesheet.

Usually it's a good idea to set both. Most uses of CSS blocks are
driven by applying the whole block to an element in a fairly simple
manner, with a "blanket" set of rules to apply. Setting only one
colour here would be likely to cause conflicts with inherited
backgrounds etc.

In this case though, the CSS is a little more obscure. We're applying a
simple "highlight" by actively controlling only one color. The other
color _should_ be left as inherited - we have no interest in changing
it. It's also a problem from maintenance reasons if we did set the pair
of colours. This breaches the good software principle of "Don't Repeat
Yourself" which is just as important as the CSS principle of "Don't set
only one colour next to an unknown inherited background".

It's necessary to know the scope in which this CSS rule is used. It's
necessary to know that the backgrounds possible in this scope can't
generate a conflict with the possible colours. If these conditions are
met by studying the page design, then there's no reason to duplicate a
hard-coded background setting into every block.

Of course this isn't perfect, in the case of some heavyweight user
stylesheet colour and background settings. But nor is the "set
everything twice" behaviour.

[Andreas Prilop]

On Fri, 19 Jan 2007, Jukka K. Korpela wrote:

Yes, though in principle you could use some other tags than <span(but <span>
is safest since it means nothing and has no default styling in any reasonable
browser).

Even <spanmay break the joining of Arabic letters.

Note, by the way, that people who posted you some sample codes forgot to set
the background. You will now probably be inclined into making the same common
mistake.

Background for what? For span? Not even http://jigsaw.w3.org/css-validator/
with "Warnings: Normal report" reports this as warning, let alone as
"mistake" (= error).

[Andy Dingley]

Andreas Prilop wrote:

Even <spanmay break the joining of Arabic letters.

I'd suggest that the idea of alternately colouring arabic letters is so
aberrant that this simply isn't a problem. Even if it's an arabic
calligraphy instruction book and might _possibly_ want to apply some
sort of highlight. For a language like arabic that has stopped being
expressible as a character-based text problem and has become a
graphical issue.