help with font color please

R

R2G2

Hi

If font color is being depreciated, can anyone tell me how I can
change the colour of one word in my page please?

TIA
 
S

SpaceGirl

R2G2 said:
Hi

If font color is being depreciated, can anyone tell me how I can
change the colour of one word in my page please?

TIA

<p><span style="color:red">hello</span> world!</p>

or use a CSS class

<p><span class="redformattedtext">hello</span> world!</p>

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
 
D

Dan Abrey

R2G2 said:
Hi

If font color is being depreciated, can anyone tell me how I can
change the colour of one word in my page please?

TIA

Use a CSS class - for example, between the <head> tags, add the declaration.
i.e.:

<style type="text/css">
<!--
..white {
color: #FFFFFF;
}
-->
</style>

Replace the 'white' with any old name, and the colour with the colour you
want it to be coloured. Colour. Funny old word.

Anyway, then just add:

<span class="white">your word</span>

Replacing 'white' with the class name you used, minus the full stop.

HTH
Dan
 
J

Jukka K. Korpela

Dan Abrey said:
Use a CSS class - for example, between the <head> tags, add the
declaration. i.e.:

<style type="text/css">
<!--
.white {
color: #FFFFFF;
}
-->
</style>

Note that "<!--" and "-->" are dated techlore - they don't help anyone,
they just put a burden on the author (who occasionally e.g. mistypes
them, with odd results), and in XHTML they could really hurt.

Background should _always_ be specified when color is specified, and vice
versa. (Someone doesn't see this immediately? Maybe thinking that the
background is the same as the page's overall background? But
understanding this is a good criterion for understanding how the C in CSS
works.)
Replace the 'white' with any old name, and the colour with the colour
you want it to be coloured. Colour. Funny old word.

Yeah, CSS is _modern_ and uses the American Way. :)

But indeed, _replace_ 'white' with something that reflects the _meaning_
(semantic role) of the word. Only the author knows what it should be.
Once in a century, 'white' could be a meaningful class name - when the
word is quoted from a printed source and we wish to have the quotation
rendered in the same colors as the original. (Or maybe in a context where
the text mentions white and black people and you wish to distinguish
visually the names of the white from the names of the black.)

So this would be better (assuming the word is a person's name, for the
sake of concreteness):

<style type="text/css">
..person { color: #ffffff;
background: #333333; }
</style>

Using an external style sheet would normally be even better, but let's
leave something for lesson 2. :)
<span class="white">your word</span>

Replacing 'white' with the class name you used, minus the full stop.

And replacing <span> markup with some semantically significant markup,
such as <em> for emphasis, <strong> for strong emphasis, <kbd> for
presentation of keyboard input, etc., noting that such markup may imply
some default rendering and you need to take a position on that (e.g., by
overriding the common default of using italics for <em>, by setting
em.person { font-variant: normal; }).
 
C

Chris Morris

R2G2 said:
If font color is being depreciated, can anyone tell me how I can
change the colour of one word in my page please?

Use CSS.

<span style="color: #f00; background: #fff">red</span>

Better to use an external stylesheet and classes, though. And possibly
not <span> but <em> or <strong> or something else depending on why the
colour change is wanted.
 
R

R2G2

Use CSS.

<span style="color: #f00; background: #fff">red</span>

Better to use an external stylesheet and classes, though. And possibly
not <span> but <em> or <strong> or something else depending on why the
colour change is wanted.

Got it - I've used <strong> and red in the external style sheet -
wasn't sure what I could use that wouldn't put it in a new paragraph
(all I had in my ss until now were paragraphs, headings and table data
- still v green at this).

Cheers peeps
 
N

nice.guy.nige

While the city slept, R2G2 ([email protected]) feverishly typed...
Got it - I've used <strong> and red in the external style sheet -
wasn't sure what I could use that wouldn't put it in a new paragraph
(all I had in my ss until now were paragraphs, headings and table data
- still v green at this).

I think you mean you are "still v #00ff00 at this" ;-)

Cheers,
Nige
 
C

Chris Morris

R2G2 said:
Got it - I've used <strong> and red in the external style sheet -
wasn't sure what I could use that wouldn't put it in a new paragraph
(all I had in my ss until now were paragraphs, headings and table data
- still v green at this).

http://www.htmlhelp.com/reference/html40/ has descriptions of the
various elements and what they mean.

Basically, anything that's displayed 'inline' won't create a new
paragraph - the 'Special Inline', 'Phrase' and 'Font Style' parts of
the organisational list from that URL are inline.

HTML specification: http://www.w3.org/TR/html401/
CSS specification: http://www.w3.org/TR/CSS2/

If you search the group archives you should find pointers to various
tutorials, FAQs, etc.
 
N

Neal

Got it - I've used <strong> and red in the external style sheet -
wasn't sure what I could use that wouldn't put it in a new paragraph
(all I had in my ss until now were paragraphs, headings and table data
- still v green at this).

You know, you can use any element you want. Span is neutral - it has no
meaining or presentation, so it looks like a good choice.

But what are you really doing? Are you trying to highlight this word in
some way? Emphasize it? Red sure would do that. Is that what you're really
doing?

I don't know for sure, but I'll assume you say, "Yes, I AM trying to
emphasize this word in context!" So use the em element.

em {font-style: none; color: #f00; background-color: #fff;}

In CSS environments, the text will be red and the bg white, and the text
will not be italic as em normally is rendered. In no CSS environments, the
word will still stand out.

Always go back to the reason you're using a visual effect. If it's for a
semantic purpose, use semantic markup. If, on the other hand, you decided
you don't want the word emphasized, but simply decorated, span is correct.
 
R

R2G2

You know, you can use any element you want. Span is neutral - it has no
meaining or presentation, so it looks like a good choice.

But what are you really doing? Are you trying to highlight this word in
some way? Emphasize it? Red sure would do that. Is that what you're really
doing?

It's a website for kids - I want to make words that trigger an action
pink - so they know that if any words on the page are pink they will,
say, make something appear, or open a new information window.
 
N

Neal

It's a website for kids - I want to make words that trigger an action
pink - so they know that if any words on the page are pink they will,
say, make something appear, or open a new information window.

Now we're getting somewhere!

Ok, how will clicking the colored text trigger things? Javascript? If so,
won't be available in all environments. Plain links? Class the a and style
it. Server-side scripting? Depends on what it is.

But caution. Colorblind users will have reduced utility. People who are
stuck with black and white monitors won't get the colors. It's a general
rule of thumb to never rely on color, images or font familiess alone to
deliver pertinent information.

Also, as CSS is a totally optional part of the rendering and is designed
to be overrideable by the user, you need a fallback. As all browsers do
something with em and strong, I'd use them. You can style them as you
prefer.

You may want to provide an alternate stylesheet. Unfortunately, the most
used browser won't support it. But those that do, you can have a test page
where they see the color layout. If they cannot differentiate, they can
choose another stylesheet which uses more typical italics and boldface to
differentiate the text.

You thought this would be easy...

What you need to do is have a page with nothing but raw semantic HTML and
make it work. Try it in a modern graphical browser. Try it in IE. Try it
in Lynx. Be sure it functions in all possible UA environments. Then style
that page to be what you want.

Actually, it is easy. But most authors make it hard by starting with style
instead of communicating the content. If you start with the foundation,
the house is much easier to build than if you try to lay concrete after
the fact.
 
R

R2G2

Now we're getting somewhere!

Ok, how will clicking the colored text trigger things? Javascript? If so,
won't be available in all environments. Plain links? Class the a and style
it. Server-side scripting? Depends on what it is.

Some plain links, (to open up glossary-type pages), some javascript,
to reveal hints or additional information etc. I've noticed if I try
to use the style sheet for this, the link seems to override it (turns
it blue and underlines it) said:
But caution. Colorblind users will have reduced utility. People who are
stuck with black and white monitors won't get the colors. It's a general
rule of thumb to never rely on color, images or font familiess alone to
deliver pertinent information.

Hadn't thought of colorblind users - guess it's a good idea to use said:
Also, as CSS is a totally optional part of the rendering and is designed
to be overrideable by the user, you need a fallback. As all browsers do
something with em and strong, I'd use them. You can style them as you
prefer.

So I should be covered if I use strong *and* a color...?
You may want to provide an alternate stylesheet. Unfortunately, the most
used browser won't support it. But those that do, you can have a test page
where they see the color layout. If they cannot differentiate, they can
choose another stylesheet which uses more typical italics and boldface to
differentiate the text.
would I add that in this bit somewhere?
You thought this would be easy...

No, I realised about 2 days ago it's far from it - but I enjoy a
challenge (within reason...)
What you need to do is have a page with nothing but raw semantic HTML and
make it work. Try it in a modern graphical browser. Try it in IE. Try it
in Lynx. Be sure it functions in all possible UA environments. Then style
that page to be what you want.

Actually, it is easy. But most authors make it hard by starting with style
instead of communicating the content. If you start with the foundation,
the house is much easier to build than if you try to lay concrete after
the fact.

Not a problem, if I understand you right - I've been building the site
- lots of pages - in dreamweaver (and way overusing the layers, hence
the re-style) without css, and now I'm re-styling it to suit more
browsers, screen sizes, resolutions, text sizes etc., so the content's
there, with the styles, I just need to remove as many layers as
possible; create severel different style sheets and remove the styles
in the head... Actually, it seems like I'm trying to lay the concrete
now :-S
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top