How to move some initial letter styling into CSS?

[jamesw]

I have inherited a pretty badly written site that I am trying to clean up to strict XHTML standards and I am trying to get my head round moving the styling for the following HTML into CSS.

I suspect that I need some kind of pattern matching but I just can't seem to get my head round how that works.

<p>
<strong><font color="#fe0000">E</font></strong>xample
<strong><font color="#000098">W</font></strong>idget
<strong><font color="#ffcc00">B</font></strong>lue
<strong><font color="#98cc00">S</font></strong>tuff
</p>

Any help would be totally fantastic.

Thanks

James

[edited by: swa66 at 10:57 am (utc) on Jan. 23, 2009]
[edit reason] examplyfied blue widget stuff [/edit]

[BeeDeeDubbleU]

You should perhaps remove the specifics.

[jamesw]

Hi,
Thankyou but I'm unsure as to what you mean by the specifics?
The colouring of the initial letters of the associations name is part of the identity.

The code snippet is part of the heading and matches the associations logo.

What I don't understand is why it seems so difficult to do basic styling like this using CSS?
I am of the opinion that I just need to get up to speed on how to do it and the problem is my lack of knowledge in this area rather than a CSS limitation.

Please correct me if I'm wrong.

[simonuk]

He is saying you shouldn't be mentioning the name of the company/website in your post. Change the last two lines to "widget" and you'll be ok.

To style the first letter simply wrap it in a span and style the span.

[swa66]

Take a look at the :first-letter pseudo class, but it'll only work for the first letter of text in an element, not for the first letter of every word, without putting each word in a containing element.
[w3.org...]

Still CSS can be used to get rid of the depreciated font tags:

<p>
<strong style="color:#fe0000">E</strong>xample
<strong style="color:#000098">W</strong>idget
<strong style="color:#ffcc00">B</strong>lue
<strong style="color:#98cc00">S</strong>tuff
</p>

Shown here with inline CSS for simplicity. The different colors make it that you'd need 4 classes.

[simonuk]

Must be Friday; I didn't spot the multiple colours :-)

[jamesw]

So if I understand you correctly I can define 4 classes with the correct colours and then assign the appropriate class to a span tag that spans the forst letter of each word.

I'll have a play with
<p>
<span class="letter-a">E</span>xample <span class="letter-w">W</span> etc...
</p>

Thanks again.

[swa66]

A <span> is an option, but if any other tag makes more sense, use it. IMHO a <div> and a <span> is something to use if you have no better element to use instead. You can style any element.