1. Technology
Send to a Friend via Email

Adjust Text with CSS

By

Coloring Text:

You can change the text or foreground color with the CSS color property. You can define your colors as hexadecimal codes, RGB, or color keywords. Like this:

color: red;

Aligning Text:

Changing the alignment of text is a bit easier than aligning block-level elements on Web pages. There is a text-align property in CSS that will allow you to align your text right, left, centered, or justified:

text-align: justify;

Dressing Up the Text:

Just because you have text on a Web page doesn't mean you can't modify it to look different than what was written. With CSS you can add decorations like underlines, overlines, and blinking as well as change the case of the text and eventually we'll have the ability to add drop-shadows with CSS.

text-decoration: underline;
text-transform: capitalize;

Spacing Text:

Adding white space in and around text is an important ability in designing powerful pages. With CSS you can affect the leading, tracking, kerning, and indenting of your text with different properties. You can even tell the browsers how to interpret white space making it different from the standard method.

text-indent: 1em;
letter-spacing: 0.2em;
word-spacing: 0.5em;
line-height: 1.5em;
white-space: normal;

What About Non-English Text?:

It's easy to forget that the Web is a global entity, but the reality is that even if your Web site is intended only for a small community, it is possible to be seen by people all around the world. You should always indicate the language of your Web pages. But once you have set the language, you can use CSS to change text found inside the page to a different direction or style. There are two style properties to do this:

unicode-bidi: override;
direction: ltr;

Cursors Aren't Exactly Text:

They aren't text, but they are what happens with the pointer when it moves over text and other elements of your Web page. You can modify your cursors to show additional information when someone mouses over a link or image. And changing the cursor is a lot less annoying to people than popup windows and other DHTML techniques.

cursor: wait;
Related Video
How to Align Text in a CSS document

©2014 About.com. All rights reserved.