CSS Lesson 6 – Text Formatting

Filed under: CSS —

Text Formatting

Where Font attributes apply to the character level Text Formatting applies to how the characters are manipulated to makeup words and how words are used to make sentences.

Indenting

The text-indent property will allow you to indent the first line of a block of text.

Values include: length, percentage

 P { text-indent: 3em }

Text Alignment

Defines how a block of text will be aligned within a containing element.

Values include: left, right, center, justify

P { text-align: center }

The text-align attribute can also be used to center a page or container.

Decoration

This property can be applied to text to add additional decorative features.

Values include: none, underline, overline, line-through, blink

Note: Blink does not work with IE and Overline does not work with NS4.

You can also use this declaration to override the default settings of the users agent. The following example will allow you to create links that are not underlined.

Also see Pseudo Class Elements.

<style>
  A:link, A:visited, A:active { text-decoration: none }
</style>

<a href="file.html">Click Here</a>

Text shadows

Allows you to define a shadow effect to your text.
Note: This Text Formatting feature does not work in IE4 or NS4.

<style>
  P { text-shadow: black }
</style>

<P>This is some text</P>

text-shadow has been deprecated in new CSS browsers.

Word Spacing

Word Spacing allows you to define the amount of space between words.
Note: This Text Formatting feature does not work in IE4 or NS4.

Values include: normal, length, auto

  H1 { word-spacing: 1em }

Letter Spacing

Letter Spacing allows you to define the amount of space between letters in each word.

Note: This Text Formatting feature does not work in NS4.

Values include: normal, length, auto

<style>
P { letter-spacing: 0.1cm }
</style>

<P>This is some text</P>

Text Transform Case

Case allows you to change how a block of text will appear. This is an easy way to override the formatting of a block of text that has already been typed and placed in the document.

Values include: capitalize, uppercase, lowercase, none

The values of this property have the following meanings:

capitalize: first character of each word is uppercase
uppercase: all characters are uppercase
lowercase: all characters are lowercase
none: element ignores parent element value

<style>
P { text-transform: uppercase }
</style>

<P>This is some text</P>

White Space

White space is used to define how a block of text will be controlled within an element. White space refers to the spaces between the words.

Note: This Text Formatting feature does not work in IE4 and has only partial support in NS4.

Values include: normal, pre, nowrap

In the example below the H1 element has been given the white-space value of pre or preformatted text. This means that additional spaces between words will be preserved as if the block was preformatted text.

<HTML>
 <HEAD>
  <STYLE type="text/css">
  H1   { white-space: pre }
</STYLE>
<BODY>

<H1>This is     some text </H1>

</BODY>
</HTML>

Note

Proper spacing of characters and words will allow the reader to visually understand the content of your pages.

Too much space can be as bad as not enough and anyone who has had to enter a comment limit word on youtube or to submit a form understands that it is not only size, color and font choice but also how the characters are presented that allows you to read and understand the words quickly.

No one wants to struggle when they are reading a few pages of text so use these style attributes conservatively not creatively.