NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

CLOSE

CSS Text Properties Example

Letter Spacing and Vertical Alignment

This is a paragraph of text. Spacing letters is possible and so should word spacing. Alas, it is not always supported!

Vertical alignment can be used to make Subscript and Superscript text, but the common use of the property is for aligning text next to images.

Alignment

Align a paragraph to the left as normal.

Align paragraphs to the right as we did in HTML.

You can even set the justification of text so that it is aligned on both the left and the right side. You need to be careful with this so that you don't get rivers of white space running through your paragraphs.

Text can of course also be centered.

Indentation and Line Height

With style sheets it is possible to set indentation as well as line height. Now double spacing is a reality. This is just dummy text to show the effects of the indentation and spacing. This is just dummy text to show the effects of the indentation and spacing.

This is another paragraph that has negative indenting. Notice how you can pull a character outside the paragraph for interesting effects. This is just dummy text to show the effect of the indent. This is just dummy text to show the effect of the indent.

Surf Gun

Don't get carried away with your newfound powers. You may be tempted to show how cool you can be using text on top of other text. While this may be good for certain situations, it may also confuse the viewer.

Text Transformation

The next bit of text is transformed to all uppercase.
The next bit of text is transformedTo All Lowercase.
This text is all capitalized. It doesn't do what you think, does it?

Text Decoration

This text should blink under Netscape.

This text should be underlined.

This text should be struck.

This text should be overline.

White Space Control

This text controls space normally like HTML; it condenses all spaces and returns to a single character.

This paragraph preserves any S P E C I A L spacing.

This paragraph does not wrap at all and keeps going and going and going and going to the right until I stop typing.


CLOSE WINDOW | VIEW CODE