1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Different colored text

Discussion in 'CSS' started by amiman, Jun 17, 2012.

  1. #1
    Is there a way to show text a different colour ie

    Colored Text, the first word blue then the rest black

    Like above blue then the rest black.
    I want to make it so that the title of my boxes can be 2 different colours.
    Or is this a javascript thing??
     
    Solved! View solution.
    amiman, Jun 17, 2012 IP
  2. cons1t

    cons1t Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #2
    <span style="color:blue;">Colored</span>Text, the first word blue then the rest black
    Code (markup):
    or

    <span class="blue-text">Colored</span>Text, the first word blue then the rest black
    Code (markup):
    then add
    .blue-text {color:blue;}
    to your style sheet.
     
    cons1t, Jun 17, 2012 IP
  3. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #3
    The above answer is correct, just make sure your class doesn't inherit some unwanted properties.
     
    wiicker95, Jun 17, 2012 IP
  4. Emitstop

    Emitstop Greenhorn

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    The best, most standards-compliant to implement this would be to do the following:

    <p><color="blue>blue text</color><colors="blue,green,red">This will do a gradient of blue green and red text</colors></p>
     
    Emitstop, Jun 17, 2012 IP
  5. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #5
    I wonder who taught you to code...
     
    wiicker95, Jun 17, 2012 IP
  6. traxport121

    traxport121 Active Member

    Messages:
    1,201
    Likes Received:
    8
    Best Answers:
    1
    Trophy Points:
    63
    #6
    This is the first time I am seeing the tag "color". I tried to use it but it doesn't work (i have the latest firefox btw) :/

    Maybe it works with a certain javascript?
     
    traxport121, Jun 17, 2012 IP
  7. cons1t

    cons1t Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #7
    maybe means the <font> tag as <color> is not listed in

    w3schools.com/html5/html5_reference.asp

    or

    w3schools.com/tags/default.asp

    But, it is not supported in HTML 5 and deprecated in HTML 4, best not get to used to using <font>.
     
    cons1t, Jun 17, 2012 IP
  8. NathanCH

    NathanCH Well-Known Member

    Messages:
    806
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #8
    Worked for me!

    I did
     
    NathanCH, Jun 17, 2012 IP
  9. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #9
    Well that's the problem. You didn't! <font> is a depricated tag, and <color> doesn't even exist!
     
    wiicker95, Jun 17, 2012 IP
  10. Emitstop

    Emitstop Greenhorn

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #10
    Haven't you read the spec?

    http://www.whatwg.org/specs/web-apps/current-work/multipage/
     
    Emitstop, Jun 17, 2012 IP
  11. amiman

    amiman Well-Known Member

    Messages:
    525
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    108
    #11
    Hi guys thanks for the answers but its not what I want.

    OK I am using phpld and for instance the title in the widget is in a h3 tag so I want it to display the title in 2 colours.

    So I have

    <h3>{title}</h3>

    The {title} it brings maybe 1 word or up to lets say 10, the title is done in back-end and rendered on the front end via the {title} tag, I only want the first word colored the rest black.
    Can this be done with css or will it require JavaScript maybe.
     
    amiman, Jun 18, 2012 IP
  12. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #12
    and what's {title}?? Something like echo $title; ?
     
    wiicker95, Jun 18, 2012 IP
  13. amiman

    amiman Well-Known Member

    Messages:
    525
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    108
    #13
    Yes I missed the $ out

    {$TITLE}
     
    amiman, Jun 18, 2012 IP
  14. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #14
    Edit the variabe TITLE.
     
    wiicker95, Jun 18, 2012 IP
  15. amiman

    amiman Well-Known Member

    Messages:
    525
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    108
    #15
    How to do that, any pointers would help.
     
    amiman, Jun 18, 2012 IP
  16. #16
    traxport121, Jun 18, 2012 IP
  17. ihostia.com

    ihostia.com Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Exactly what i was thinking :)
     
    ihostia.com, Jun 18, 2012 IP
  18. amiman

    amiman Well-Known Member

    Messages:
    525
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    108
    #18
    amiman, Jun 19, 2012 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    I would assume he did, since there is no COLOR tag, even in the latest spec.

    Even if it did exist, you shouldn't use it, since that's PRESENTATION, and as such has no malfing business in the HTML in the first place -- just like the STYLE attribute used in the example or even class="blue" for that matter if you're actually going to bother coding properly practicing techniques like separation of presentation from content or semantic markup.

    My question would be WHY is it blue? What's so special about it? Does it even need a class or could you have the span inherit off the parent wrapper like the H3 in the examples? HTML is for saying what things ARE, and "blue" doesn't count as one of those. You should be saying WHY it is different, not HOW. How is either the user agent or CSS' job!

    Though it wouldn't surprise me to see that type of asshattery on the WhatWG's site, given the steaming pile of manure they vomited up we've come to know as HTML 5 -- setting coding practices back a decade or more to the bleeding edge of HTML 3... undoing all the progress STRICT has offered us the past 14 years.

    But even they:
    http://www.whatwg.org/specs/web-apps/current-work/multipage/section-index.html#elements-1

    Have no color tag. No such thing, never has been. There's the color ATTRIBUTE, but nobody has any business using that after 1998 (well, more realistically 2003 which is when we could finally kick nyetscape 4 support to the curb)-- hence it being deprecated in the most recent type of document you should be using; HTML 4.01 STRICT or XHTML 1.0 STRICT.
     
    Last edited: Jun 19, 2012
    deathshadow, Jun 19, 2012 IP