8 replies [Last post]
barbaloot
Offline
newbie
Last seen: 16 years 11 weeks ago
Joined: 2004-07-11
Posts: 2
Points: 0

Is there a way in a style sheet to format the color of a specific letter? Like making every letter C on the site be green where the rest of the text is black.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

formatting specific text

Hi barbaloot,
You would have to wrap each letter in a span.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

formatting specific text

Not necessarily.

Not many people realise that you can use whatever existing tags you wish, such as the bold, italic, or underline tag, as long as you specify what you want it to do.

For example, if your div was called 'content', you could use the following code:

#content {color: black; }
#content b {color: green; }

and every bold letter in the div would become green.

It's more or less the same principle as wrapping it in a span but saves a few letters here and there.

Verschwindende wrote:
  • CSS doesn't make pies

barbaloot
Offline
newbie
Last seen: 16 years 11 weeks ago
Joined: 2004-07-11
Posts: 2
Points: 0

formatting specific text

instead of just doing bold stuff how would I be able to do just one character . What I want to so is make all the periods on the page orange.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

formatting specific text

I think you misunderstood what I was getting at.

in my example, it will not change all the bold letters to green. Rather, if you use the <b> tag on any letter or word, it will not make it bold (in this example), but only change the word to green.

unfortunately you cannot do this without wrapping each letter in a <span>, or as I have stated, another tag. For instance:

#content {color: black: }
#content b {color: green; font-weight: none; }

<div id="content"> Pie <b> H</b> ello </div>

This will give the following text:

Pie Hello

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

formatting specific text

But you really should use <span> it's one of the reasons for it, an empty tag, if you start taking existing tags and changing their meaning you start to loose semantic structure, that which were always being told to pay attention to with CSS/Standards markup.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 34 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

formatting specific text

Yep, with Hugo on that one. CSS is powerful enough to swap the <b>, <u>, <i> tags around, but then you have no idea what the code means. Keep it clear and use SPANs.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

formatting specific text

I knew that, I was merely pointing out that <span> is not the only way to do it.

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 14 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

formatting specific text

Surely the <em> tag is more appropriate, you are after all giving emphasis to the bit of text in question?