Selective Coloring of Text using CSS

[kidleethal]

Hello,

I am currently making two interchangeable CSS style templates for pixelpost.

On a typical photoblog like, say this:
http://www.greentraveler.com/photoblog/index.php

The title of the blog in the navbar is normal text in something like an <h1> tag which is within a <div> id like 'navigation'.

Say that my pixelpost is called 'The Big Cat', and the title is laid out exactly like the example above. Using an external CSS sheet, how can I make the words 'The' and 'Cat' one color, and the middle word 'Big' another color?

Also, when I mouse over the text, I'm wanting the colors to invert - i.e. 'The' and 'Cat change to the color that 'Big' was, and 'Big' changes to the color that 'The' and 'Cat' were.

I'm stumped. Any ideas?


Thanks in advance for your help,

Lee

[Joe[y]]

currently the simple template uses <SITE_TITLE> within that h1 tag. what you need to do is repace that with the actual text. ie:

The <span style="color:#c60">Big</span> Cat

you can change the color they change to on mouseover in the stylesheet:

h1 a:hover {color:whatever}

hope that works.

[kidleethal]

Hey Joey,

Thanks for your reply. I understand how to do this on the HTML template, but the thing is I want this to work in the different color schemes of the two CSS templates I'm making.

So for example, in one selectable CSS 'skin', I want it to look like:
TheBigCat
Hover: TheBigCat

And in the other one:
TheBigCat
Hover:
TheBigCat


To do this, I'm pretty sure I can't change anything in the HTML code, as the two different color themes will be dictated by the CSS sheets selectable on the website. Any ideas on how I can do this using external CSS sheets only?

[Joe[y]]

in that case use span classes. so...


<span class="the">The</span><span class="big">big</span> and so on... then in your stylesheets you can define the colour (in this case for 'the') like so:

.the {color:green;}

[kidleethal]

Awesome, thanks so much for your help! I'll go and check it out.