background
|
|
Linux
Linux Support
A small area on the internet for Linux Support.
More icon

Tombstone
Tombstone Tuning
Home of tuning, projects and fast cars and boats.
More icon
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Mulder's Stylesheets Tutorial
Lesson 2
by Steve Mulder

Page 5 — Special Effects with Text

Welcome to the miscellaneous area of our font discussion. Here you'll find other font-related stylesheets properties that are perfect to add to your toolbox.

font-variant

font-variant is a simple one: You use it to display normal text as small caps.

    H2 { font-variant: small-caps }
Unfortunately, no version of Communicator or Internet Explorer currently supports this property. IE 4 and 5 come close, but they capitalize everything equally. The result is that all the letters have the same height — which isn't exactly what small caps should look like. But it seemed worth mentioning anyway, in the event that later browsers will support it.

text-transform

This property is somewhat related, and it actually works! With text-transform, you can easily control capitalization. Here's the basic code:

    B { text-transform: uppercase }

    Here are all the possible values and what they mean:

  • uppercase makes every single character capitalized. This sentence serves as an example.

  • lowercase makes all of the characters lowercased. This sentence serves as an example.

  • capitalize makes the first character of every word capitalized. This sentence serves as an example.

  • none means that any inherited text-transform value will be ignored, and the text will display normally. This sentence serves as an example. (Note: IE 3 doesn't support text-transform.)

    If your browser isn't illustrating the above examples, click here to see what they look like.

    text-decoration

    For decades (well, it feels like that long anyway), we've had no control over the fact that text links are underlined in Web browsers. I don't know about you, but I think it's ugly and annoying. Ladies and gentlemen, I give you a solution: text-decoration.

    First thing's first. Here's the basic syntax for this property:

      B { text-decoration: underline }
    Most of the options make text less readable:
    • underline makes the text, um, underlined. Check out these words.

    • overline adds a line above the text. Check out these words.

    • line-through puts a line through the text (i.e., strike through). Check out these words.

    • blink is your basic, familiar nightmare. The text blinks. Check out these words.

    • none makes sure none of the above happens.
    (Note: Communicator doesn't support overline. IE 4 and 5 don't support blink. IE 3 doesn't support either of those values.)

    If your browser doesn't support these CSS properties, click here to see what they look like.

    The none value is magical. With it, you can remove the line under text links. Here's how:

      A:link { text-decoration: none }
      A:active { text-decoration: none }
      A:visited { text-decoration: none }
    Think of these as predefined classes for the <A> tag. A:link is for normal, unvisited links; A:active is for link appearance while you're clicking; and A:visited is for previously visited links. The lines above would go in your embedded, linked, or imported stylesheet, and your HTML link code wouldn't change at all:

    <A HREF="http://www.webmonkey.com/">Link</A>

    And here's the result:

    Click here to see the above example if your browser doesn't support this CSS property.

    But wait, there's more! Not only can you remove underlining from links, you can also use any other CSS property on them using A:link, A:active, and A:visited. So, you can make unvisited links 12-point bolded Arial and visited links 10-point italicized Times. The world is your oyster.

    OK, OK, not all browsers support this heavenly feature set. Communicator supports these predefined classes with text-decoration but is very buggy with other properties. IE 3 doesn't support A:active (and the Mac version doesn't support A:visited). IE 4 and 5 do the best job, supporting just about everything.

    Despite these limitations, you have many opportunities that were never before possible! All hail the makers of CSS.

    Do you think you've mastered the world of CSS and fonts? How about a quick exercise?

    next page»