Text Colors

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<style type="text/css">
h1 {color: #00ff00}
h2 {color: blue}
p {color: rgb(255,0,0)}
</style>
 ......................

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

Highlighting Text

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<style type="text/css">
span.highlight
{
background-color: yellow
}
</style>
............................
<p>
<span class="highlight">This is some text.</span> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <span class="highlight">This is some text.</span>
</p>

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

Letter Spacing

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>

............................

<h1>This is header 1</h1>
<h4>This is header 4</h4>

This is header 1

This is header 4

Aligning Text

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
.............................

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>

This is header 1

This is header 2

This is header 3

Text Decoration

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</style>
................................

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<p>
<a href="http://www.yahoo.com">
This is a link</a>
</p>

This is header 1

This is header 2

This is header 3

This is a link

Indenting Paragraphs

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<style type="text/css">
p.indent {text-indent: 1cm}
</style>
........................

<p class="indent">
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
</p>

This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph

Transforming Text

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
...................

<p class="uppercase">
This is some text in a paragraph
</p>

<p class="lowercase">
This is some text in a paragraph
</p>

<p class="capitalize">
This is some text in a paragraph
</p>

This is some text in a paragraph

This is some text in a paragraph

This is some text in a paragraph