Two colors of Font in one Sentence

[Certificates]

I am new to CSS but have managed to convert my page to this satisfactorily from the old HTML format which I had.

I am struggling though with one problem and that I want to have part of a sentence in two different colors; one red and one blue.

In the head, I have got

span.red{ color: red; }

which caters for the red bit, but I cannot figure out what I need to do to get the font to type in blue.

I know that I can do

<p style="color:blue;">blue</p>

But this gives a new paragraph which I don't want.

Any help please ?

Thanks

[lucy24]

Uhm... What's the problem with

span.blue {color: blue;}

?

[alt131]

Hi Certificates, and welcome to WebmasterWorld :)

What Lucy is saying (in a lot less words) is that you can just wrap the other words in another span, and add a style to make the colour blue:

<p><span class="red>Red</span> <span class="red>Red</span></p>
with
span.blue {color:blue}

The reason for spans is that they are inline element, so they will flow inline rather than starting on a "new line" like a paragraph. However spans are a generic container that don't add any meaning to the HTML. Depending on what you are trying to achieve, it might be better to use another element. For example, if this is only for visual impact, style a <b> or <i> instead. If the words are being coloured because you want them to be emphasised for all users (including non-visual users of assistive technology) then style am <em> or even <strong>.

Also, to reduce the amount of mark-up, and all of the words in the para are red and only a couple are blue, it saves code and coding time to style the whole <p> red, and then use only one span or other element to change those few words to blue.

Finally, also consider class names. Best practise is to name classes according to their function rather than the style so things don't get confusing if you change the styles. So span.blue might be better named span.highlight (poor example) - which indicates the purpose of the style, and will make sense later on if you decide to change the colour to something else.

[Certificates]

Thanks to you both.

The span option appears to the best for me,.

It seems quite simple and thus easy for me to use.

Thanks again.

You have helped me no end.

Kind regards

Antony

[edited by: alt131 at 8:17 pm (utc) on Oct 16, 2011]
[edit reason] Thread tidy [/edit]

[alt131]

Hi Certificates, pleased we helped, and must have been good luck because I messed up my example - it should have read:
<p><span class="red>Red</span> <span class="blue">Blue</span></p>

It seems quite simple and thus easy for me to use

Just recall that coding isn't about what is easiest for the coder - it's about what is going to deliver best for the users.

[lucy24]

must have been good luck because I messed up my example

Hours later, alt whaps herself upside the head as she remembers that she has moderatorial superpowers and can therefore edit her original post at any time
:)

[rocknbil]

I implore you to take the semantic container approach. :-) When you say "head" I'm not sure if you really mean heading, or in the head area of the document. You almost had it at the start.

But this gives a new paragraph which I don't want.

But you do. :-) You just needs to style out any spacing you don't want.

.some-heads span { color: red; }
p.some-heads { color: blue; margin:0; padding: 0; }


<p class="some-heads">blue <span>I am red</span></p>

As I said if this is an actual heading, use the semantic container for it, one of the H family.

<h3 class="some-heads">blue <span>I am red</span></h3>

That will work exactly the same as a <p> - you just might have to fiddle with the sizing a bit.

A note on naming your selectors: try not to use selectors that define an attribute, such as color. If the color changes next week, you will have a confusing selector, span.red might be orange, or blue, or gold . . .

Another reason is sooner or later you will create a selector that conflicts with dom scripting, for example, if you ID a form "search"

<form method="post" action="mysearch" id="search">

it will likely cause errors because search() is a Javascript function - as is submit(). Use names like search-form or submitButton.