Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Recently
Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

Coloring text-decoration

Realazy | 27 January 2007

Consider the following example:

HTML

foo bar zoo

CSS

a { color:blue; text-decoration:underline; }

Question: How can the phrase ‘bar’ and its text-decoration be changed to a different color?

In the past—the days of font codes—it was easy (example here, and unfortunately, it only works in IE).

HTML

foo bar zoo

In those days, we just set the attribute color of font, and in IE, the color of text-decoration(such as underline) followed the font's setting. But in modern times, we try not to use font, so one possible answer to our question may be:

span { color:red; }

Does it work? Please view example 2 in your favorite browser. As you can see, the color of the word ‘bar’ has been made red, but, the underline under it is still blue, even in IE.

Very confusing or interesting, right? So how can we solve our problem? Bring back the font tag from the trash? No way! There is a very easy solution: Also set the text-decoration for span:

span { color:red; text-decoration:underline; }

In our previous example, why did setting only the color not affect the text-decoration's color? Because if it isn't declared, the text-decoration belongs to the parent element, which is a here, not span itself.

About the Author

Articles by Realazy

10 Comments

| Post a comment | Comments Feed

  1. EnblogopediaُEnblogopediaُ�s site : http://www.enblogopedia.com/

    27 January 2007, 09:02 : Permanent link to comment

    Hmmm nice catch!

  2. SteveSteve�s site : http://sr-ps.com

    27 January 2007, 13:51 : Permanent link to comment

    From a usability standpoint wouldn’t this cause more confusion for an end user than any benefit from using this technique – for example if you had a glossary for your site and marked up words and abbrerviations on first appearance on the page, and the first appearance was as part of the link text and you styled the abbreviation differently wouldn’t that lead to confusion on the part of the end user. Since the link to the gloassary is broken and in light oif the limited styling possibilities and the color you chosse make this appear to be 2 seperate links. and then How do you indicate a visited link.

  3. Derek AllardDerek Allard�s site : http://www.derekallard.com

    27 January 2007, 16:10 : Permanent link to comment

    Interesting! I can’t think off hand of a time that this would be particularly useful, but I love the fact that you’ve thought of another way to bend html around. Nicely done.

    Another thought that came to mind would be to use an image to represent the underline, but I guess the disadvantage of that is that it wouldn’t scale if the user bumped up their text size.

    Well done.

  4. realazyrealazy�s site : http://realazy.org/blog/

    28 January 2007, 02:23 : Permanent link to comment

    @Enblogopedia

    thanks :)

    @Steve

    Nice though, very thing has its limitation. But in fact, in some cases such as a keyword in a link ( take a look at google’s search results), this technique is very very useful.

  5. SteveSteve�s site : http://sr-ps.com

    28 January 2007, 04:19 : Permanent link to comment

    Realezy

    Your Google example isn’t exactly the same thing as they don’t change the color but simply display the searched text as bold.

    in your example the color changes within a link text without an apparent reason. Making it appear as 2 or 3 seperate links.

    It also suffers from the accessibility problem of using color alone to convey some information.

  6. Binny V ABinny V A�s site : http://www.openjs.com/

    30 January 2007, 06:38 : Permanent link to comment

    What about using
    border-bottom:1px solid red;
    instead of using text-decoration?

  7. Andy JamesAndy James�s site : http://www.serioussoft.com

    6 February 2007, 13:10 : Permanent link to comment

    In a matter of fact, this way is how it already goes in CSS, right?

  8. SKSK�s site : http://

    7 February 2007, 01:42 : Permanent link to comment

    This looks like an interesting bit. It’s too bad that all the example links are broken, resulting in 404 errors.

    Can you please fix?

    Cheers,

    -SK

  9. SvTSvT�s site : http://svt.name

    7 February 2007, 16:13 : Permanent link to comment

    Thanks!! ;)

  10. PozycjonowaniePozycjonowanie�s site : http://www.profesjonalna-reklama.pl

    12 February 2007, 13:39 : Permanent link to comment

    Thanks for the code i will use it on my webblog. Keep up the good work. Greetings


Commenting is closed for this article.

© Copyright 2006 Bite Size Standards and Authors