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 { alignment: center }
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>
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>
One Response
I suppose being younger and thus being relatively new to the game, I personally think CSS is far and away easier than tables. I never really learned table-layouts (I wasn’t much into designing then) and I didn’t really become interested in web design for a while *because* table layouts were such a pain to figure out. If, by chance, I did design a table layout, it was only with gratuitous use of Dreamweaver. So, for the same reason they claim tables are easier, I claim CSS is easier. It’s what I learned and got comfortable with.