1. Technology
Send to a Friend via Email

Styles that Improve Your Text

Decorate and Transform Your Text with CSS

By

Text is much more than just the font - and with CSS you can modify lots of aspects of your text. There are three text properties that make your text fancier than the average text found on Web pages.

Decorating Your Text with text-decoration

Decorations are always fun. During the holidays many people decorate their homes, and while text decorations on Web pages aren't as interesting as that, they do change your normal looking text into something a bit special. There are five decorations you can use in CSS 2:

text-decoration: none;

This option is a bit misleading. It's the default for most text on the Web, and so people don't think to use it. But most links on Web pages have a decoration - they are underlined. So if you want to remove the underlines from links, you need to explicitly set the text-decoration to none for them. View an Example

text-decoration: underline;

What if you want to pretend there are more links on your Web page than there really are? An easy way to do that is to change the color of the text to the link color and add an underline decoration. View an Example

text-decoration: overline;

Just like underline puts a line underneath your text, overline puts a line above it. The line should display completely above all text - including capital letters and tall lowercase glyphs. View an Example

text-decoration: line-through;

When editing documents, it is common to draw a line through deleted text. XHTML has the <del> tag, and with the text-decoration: line-through; property, you can display your deleted text so that it appears deleted or crossed out. View an Example

text-decoration: blink;

Blink may be annoying, and the blink tag isn't part of the specification, but it's still possible to make text blink using CSS. Unfortunately, Internet Explorer doesn't even support the CSS version of blink. View an Example

Transforming Text with text-transform

Unlike font properties which don't affect the content of the page, when you use the text-transform property, you can affect the meaning of the content, or at least the grammar of it. This property is really useful for sites that use either databased content or content management systems to allow non-developers access to publish content. No matter how the content is input into the system, you can control how it displays with the text-transform property.

The text-transform property lets you control the following aspects of your text:

text-transform: none;

Just like text-decoration, the text-transform defaults to no transformation. So if you don't set the transformation, your text will appear in the document exactly as it is written. View an Example

text-transform: capitalize;

What if you sometimes forget to write your blog posts in title case (the first letter of every word capitalized) but you want them to always display that way? You can use this property to capitalize every word in your text. Keep in mind that CSS doesn't care what the word is, it just capitalizes it. So if you're looking for words like "the" and "a" to not be capitalized, you'll need to do it manually in the content. CSS also doesn't support "camelcase" of words (where a letter in the midddle of a compound word is capitalized) as in "MacCloud". View an Example

text-transform: uppercase;

All caps in email looks like you're shouting at the recipient, but it is often used as a stylistic device in headlines. Plus, lots of legal documents have sections written in all caps. Now you can specify where, exactly, with a style property. View an Example

text-transform: lowercase;

Why is a lot of poetry written in lowercase? With this style you can indicate where your text should be displayed as lowercase even if the original text is mixed or uppercase. View an Example

Shadowy Text

One of the most common text effects that is done with graphics is the shadow effect. This is because browsers don't support the text-shadow property. Which is really too bad, because if they did, it would be just a matter of highlighting the text you want to have a shadow with this style:

text-shadow : 1px 2px 5px silver;

There are ways to get CSS drop shadows on box elements and on text, but right now the text methods are hacks. The frustration is that text-shadow is a CSS 2 property - it's not even CSS 3.

©2014 About.com. All rights reserved.