Cascading Style Sheets: Tutorial - Page 04

Formatting Text

Text can be aligned to the left, right, center or justify. These are self explanatory. To center a header:

<h1 style="text-align:center;">Heading Centered</h1>

Heading Centered

Text can have a shadow added to it. For text shadow use the text-shadow property:

#header {
	text-shadow: 10px 10px 3px rgba(0,0,0,0.5);
}

#header {
	text-shadow: -10px 10px 3px rgba(0,0,0,0.5);
}

#header {
	text-shadow: 10px -10px 3px gray;
}

#header {
	text-shadow: -10px -10px 3px gray;
}

Do not allow breaks in white space by using the white-space property.

a {
	white-space: nowrap;
}

Turn off the italicizing nature of HTML elements like <em> and <i> using the font-style property. For example:

<p>This is <em style="font-style: normal;">emphasised</em> text with italics turned off.</p>

This is emphasised text with italics turned off.

Similarly, turn on italicizing for HTML elements like headers (<h1>, <h2>, <h3>, etc.)

<h1 style="font-style: italic;">This heading is italic</h1>

This heading is italic

To turn off bolding of, for example, HTML header elements, which are always bold by default:

<h1 style="font-weight: normal;">This heading is not bold</h1>

This heading is not bold

Use the text-decoration property to overline, underline and strike text.

<p style="text-decoration: overline underline line-through;">This text is highly decorated.</p>

This text is highly decorated.

Capitalizing, lowercase and uppercase are all set by the text-transform property. For example:

<p style="text-transform:capitalize;">this text is capitalized</p>
<p style="text-transform:lowercase;">THIS TEXT IS LOWERCASE</p>
<p style="text-transform:uppercase;">this text is uppercase</p>

this text is capitalized

THIS TEXT IS LOWERCASE

this text is uppercase

For small caps effect use the font-variant property.

<p style="font-variant:small-caps;">This Text Is Small Caps</p>

This Text Is Small Caps

Comment