Topic: CSS to change text color (Page 1 of 1)

ok I know there is a way to change the back ground of a link
like here http://www.aquilo.us/index.php?module=NorthWinds_css

is there a way to use CSS to change the color of the text,
for example I have <div class="blockheader">Who?s Online</div>
can CSS dynamically change it to [color=gray]Who?s[/color] [color=blue]online[/color]

I hope I gave a good example!

Thanks for any help!
Aquilo

I'm not entirely clear on what you're asking, or what you mean by "dynamically".

The short answer is - you can specify any style attribute of any element pretty much any way you want with CSS. That's the whole idea.

The question becomes - why do you want to change the color? What is the default color? Are there more places than this one spot where you want the same effect? Etc...

The basic approach would be something like this -

the CSS -

.blockheader {
 color:grey;
}

.blockheader span {
 color:blue;
}

The HTML -

<div class="blockheader">Who's <span>online?</span></div>

Depending on what the ultimate goal is, you may want or need to add a class to the <span> as well. Or you may want to use one of the preset HTML tags, like <em> or <strong> to specify the color blue (beleive it or not, <em> does not mean italic, and <strong> does not mean bold ) -

.blockheader {
 color:grey;
}

.blockheader em {
 color:blue;
}

The HTML -

<div class="blockheader">Who's <em>online?</em></div>

You would *NOT* want to use a scheme like you proposed, where you have tags within the HTML that actually dictate the style. Otherwise we're right back to the <font> tag and there's no point to using CSS at all...



(Edited by DL-44 on 01-04-2006 05:45)

Don't forget your CSS2.1 selectors; you can't specify the first word, but you can select the first line or letter. Not that IE cares, but in case you did.

Cheers,
DC

quote:

---

DL-44 said:

code:

---

color:grey;}

---

---

gray

I thught we all were talking about events, like :hover :P

__________________________________


Sexy Demoness cel

The question was akwardly phrased, but you can still use pseudoclasses (events, like :hover) and pseudoelements (DOM extensions, like first-letter) together, tmk, just not on the same element. The question was whether you could change the color of text within an element -- the only way to achieve this (without changing the markup) are those pseudoelements.


div.somebox > p:first-line {
color: #f00;
font: 1.6em/2em; }

div.somebox:hover > p:first-line {
color: inherit; }

Though abstract cases like this aren't very helpful; reading the spec (above) should impart a better understanding. Keeping in mind that IE does everything possible to break straight-css. CSS 2.1 did make some improvements, but expect them widely supported in 2012.

Cheers,
DC

quote:

---

reisio said:

gray

---

quote:

---

divinechaos said:

(without changing the markup)

---

Of course, in many cases, there *is* a reason to reflect the reason for the color change in the mark-up (as in using the <em> tag, or applying a class to a <span> around parts of the text). Whether or not this is one of those cases is hard to say based on the original post.

(Edited by DL-44 on 01-04-2006 21:05)

I guess I was just hoping there was a way for CSS to take a line with two works and make the second word a different color then the first but thinking about it, since I'm pulling the titles from a database I can do it with php.

What I was wanting to do:


thanks!

I got it to work with php!
http://www.xtram.net/index.php

but it don't look good now that I have it!




(Edited by Aquilo on 01-05-2006 00:25)

Hey DL I always thought you were American, or do you just like to speak/write the correct English?

Yup, american.

Is this in reference to the grey as well, or did I do something wrong up there?

As for grey/gray - either spelling is acceptable. I assume resio posted due to proper use within CSS, but I'm not sure.