p { 
   color: red; 
}

Als Wert könnt ihr Farbwörter oder einen hexadezimalen Farbwert angeben.

Die Schreibrichtung festlegen

.normal {direction:ltr;} 
.rueckwaerts {direction:rtl;}

Hier wurden zwei Klassen definiert.

<p class="normal">Text, der von links nach rechts geschrieben wird. 1 2 3 4 5 6 7 8 9 0</p> 
<p class="rueckwaerts">Text, der von rechts nach links geschrieben wird. 1 2 3 4 5 6 7 8 9 0</p>

Das Ergebnis sieht im Browser folgendermaßen aus:

Die horizontale Ausrichtung von Texten

<p style="text-align:right;">
    Herzlich willkommen
</p>

Das Ergebnis sieht so aus:

Die vertikale Ausrichtung

.baseline { 
   vertical-align: baseline; 
}

Beachtet, dass die Werte von vertical-align durch die verschiedenen Browser leider sehr ungleichmäßig interpretiert werden. Ihr solltet die Ergebnisse also unbedingt testen, bevor ihr die Seiten online stellt.

Die Textdekoration bestimmen

a:link { 
   text-decoration: none; 
}

Dadurch werden die Hyperlinks der Seite nicht mehr mit einem Unterstrich ausgestattet.

Den Abstand zwischen den einzelnen Wörtern kann man ebenfalls explizit bestimmen.

<span style="word-spacing:0.5em">Willkommen auf PSD-Tutorials.de!</span><br />
<span style="word-spacing:1em"> Willkommen auf PSD-Tutorials.de!</span>

<span style="letter-spacing:0.1em">Beispieltext mit Zeichenabstand 0.1em</span><br> 
<span style="letter-spacing:0.3em">Beispieltext mit Zeichenabstand 0.3em</span><br>

.klein { 
   text-transform: lowercase; 
}

Im Browser sieht das Ergebnis folgendermaßen aus:

Leerzeichen und Zeichenumbrüche

<pre class="brush:xml;">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;de&quot;&gt;
&lt;head&gt;
&lt;title&gt;PSD-Tutorials.de&lt;/title&gt;
&lt;meta charset=&quot;UTF-8&quot; /&gt;
&lt;style&gt;
body&gt;p {
   font-family:&quot;Courier New&quot;, Courier, monospace;
   font-size: 200%;
}
body p {
   color:#0066FF;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Absatz 1&lt;/p&gt;
&lt;p&gt;Absatz 2&lt;/p&gt;
&lt;p&gt;Absatz 3&lt;/p&gt;
&lt;div&gt;
&nbsp; &lt;p&gt;Absatz 4&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

Im Browser sieht das folgendermaßen aus:

Schatten umsetzen

text-shadow: hV vV blur #xxxxxx;

.schatten {
   color: #444;
   font-size: 34px;
   text-shadow: 2px 2px 3px #333;
}

Angewendet wird die definierte Klasse nachfolgend auf eine Überschrift der ersten Ordnung.

<h1 class="schatten">PSD-Tutorials.de</h1>