help with font color please

Discussion in 'HTML' started by R2G2, Sep 21, 2004.

  1. R2G2

    R2G2 Guest

    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
    R2G2, Sep 21, 2004
    #1
    1. Advertising

  2. R2G2

    SpaceGirl Guest

    R2G2 wrote:
    > 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 #
    SpaceGirl, Sep 21, 2004
    #2
    1. Advertising

  3. R2G2

    Dan Abrey Guest

    "R2G2" <9.co.uk> wrote in message
    news:...
    > 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
    Dan Abrey, Sep 21, 2004
    #3
  4. "Dan Abrey" <> wrote:

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


    (The <font> element _has been_ _deprecated_. Just to get the wording an
    the idea right.)

    > 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; }).

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Sep 21, 2004
    #4
  5. R2G2

    Chris Morris Guest

    R2G2 <9.co.uk> writes:
    > 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.

    --
    Chris
    Chris Morris, Sep 21, 2004
    #5
  6. R2G2

    R2G2 Guest

    On 21 Sep 2004 12:59:09 +0100, Chris Morris <>
    wrote:

    >R2G2 <9.co.uk> writes:
    >> 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.


    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
    R2G2, Sep 21, 2004
    #6
  7. While the city slept, R2G2 (9.co.uk) 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

    --
    Nigel Moss
    http://www.nigenet.org.uk
    Mail address not valid. , take the DOG. out!
    In the land of the blind, the one-eyed man is very, very busy!
    nice.guy.nige, Sep 21, 2004
    #7
  8. R2G2

    Chris Morris Guest

    R2G2 <9.co.uk> writes:
    > 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.

    --
    Chris
    Chris Morris, Sep 21, 2004
    #8
  9. R2G2

    Neal Guest

    On Tue, 21 Sep 2004 15:01:59 +0100, R2G2 <9.co.uk> wrote:

    > 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.
    Neal, Sep 21, 2004
    #9
  10. R2G2

    Neal Guest

    On Tue, 21 Sep 2004 15:01:59 +0100, R2G2 <9.co.uk> wrote:

    In my last post, make that font-style: normal. Oops.
    Neal, Sep 21, 2004
    #10
  11. R2G2

    R2G2 Guest

    On Tue, 21 Sep 2004 11:47:52 -0400, Neal <> wrote:

    >On Tue, 21 Sep 2004 15:01:59 +0100, R2G2 <9.co.uk> wrote:
    >
    >> 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?


    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.
    >
    >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.
    R2G2, Sep 22, 2004
    #11
  12. R2G2

    R2G2 Guest

    On Tue, 21 Sep 2004 15:29:38 +0100, "nice.guy.nige"
    <> wrote:

    >While the city slept, R2G2 (9.co.uk) 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" ;-)
    >

    I must be - that took me a while! :-s
    >Cheers,
    >Nige
    R2G2, Sep 22, 2004
    #12
  13. R2G2

    R2G2 Guest

    On 21 Sep 2004 16:29:17 +0100, Chris Morris <>
    wrote:

    >R2G2 <9.co.uk> writes:
    >> 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.


    Thanks - that site seems to have lots that I need!
    >
    >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.
    R2G2, Sep 22, 2004
    #13
  14. R2G2

    Neal Guest

    On Wed, 22 Sep 2004 12:07:03 +0100, R2G2 <9.co.uk> wrote:

    > 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.
    Neal, Sep 22, 2004
    #14
  15. R2G2

    R2G2 Guest

    On Wed, 22 Sep 2004 11:36:56 -0400, Neal <> wrote:

    >On Wed, 22 Sep 2004 12:07:03 +0100, R2G2 <9.co.uk> wrote:
    >
    >> 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.


    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), whereas if I put a <font-face or whatever>
    before it in the page itself, it seems ok.
    >
    >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 <b>
    as well.
    >
    >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?
    <link rel="stylesheet" type="text/css" href="main.css">
    >
    >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


    --
    Beccy

    Bec but...
    R2G2, Sep 22, 2004
    #15
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Karl Hungus

    Font class, external font files question

    Karl Hungus, Feb 4, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    513
    Karl Hungus
    Feb 4, 2004
  2. =?Utf-8?B?Tmlja3k=?=
    Replies:
    2
    Views:
    692
    Matt Berther
    Feb 20, 2005
  3. KK
    Replies:
    2
    Views:
    522
    Big Brian
    Oct 14, 2003
  4. mttc
    Replies:
    2
    Views:
    2,367
    Roedy Green
    Jul 3, 2009
  5. Kamaljeet Saini
    Replies:
    0
    Views:
    380
    Kamaljeet Saini
    Feb 13, 2009
Loading...

Share This Page