Topic: CSS to change text color (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27249" title="Pages that link to Topic: CSS to change text color (Page 1 of 1)" rel="nofollow" >Topic: CSS to change text color <span class="small">(Page 1 of 1)</span>\

 
Aquilo
Bipolar (III) Inmate

From: las vegas, nevada, us
Insane since: Nov 2000

posted posted 01-04-2006 01:11

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


DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 01-04-2006 05:43

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 -

code:
.blockheader {
 color:grey;
}

.blockheader span {
 color:blue;
}



The HTML -

code:
<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 ) -

code:
.blockheader {
 color:grey;
}

.blockheader em {
 color:blue;
}



The HTML -

code:
<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)

divinechaos
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2001

posted posted 01-04-2006 13:43

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

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 01-04-2006 18:53
quote:
DL-44 said:

code:
color:grey;}



gray

Alevice
Paranoid (IV) Inmate

From: Mexico
Insane since: Dec 2002

posted posted 01-04-2006 19:09

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

__________________________________


Sexy Demoness cel

divinechaos
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2001

posted posted 01-04-2006 19:35

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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 01-04-2006 21:02
quote:

reisio said:

gray



DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 01-04-2006 21:04
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)

Aquilo
Bipolar (III) Inmate

From: las vegas, nevada, us
Insane since: Nov 2000

posted posted 01-04-2006 23:59

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!


Aquilo
Bipolar (III) Inmate

From: las vegas, nevada, us
Insane since: Nov 2000

posted posted 01-05-2006 00:25

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)

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted posted 01-05-2006 10:52

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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 01-05-2006 18:43

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu