Da wir jetzt einmal die Grundlagen erlernt haben möchte ich euch an dieser Stelle beibringen was ihr alles mit euren Texten auf der Homepage anstellen könnt. Im Prinzip könnt ihr alles machen, was ihr auch in euren Textbearbeitungsprogrammen machen könnt. Fett markierung, unterstreichen und und und. Generell habt ihr die Möglichkeit entweder einzelne Elemente über das Attribut Style direkt in eurer jeweiligen Html-Seite festlegen oder definiert Sie als Klasse im Stylesheet, was ich bevorzuge. Aber der vollständigkeit halber hier eine kleine Anleitung wie es mit dem Style-Attribut funktioniert.

Nebenbei zeige ich euch hier direkt wie ihr Texte unterstreicht.

Da wir jetzt einmal die Grundlagen erlernt haben möchte ich euch an dieser Stelle beibringen was ihr alles mit euren Texten auf der Homepage anstellen könnt. Im Prinzip könnt ihr alles machen, was ihr auch in euren Textbearbeitungsprogrammen machen könnt. Fett markierung, unterstreichen und und und. Generell habt ihr die Möglichkeit entweder einzelne Elemente über das Attribut Style direkt in eurer jeweiligen Html-Seite festlegen oder definiert Sie als Klasse im Stylesheet, was ich bevorzuge. Aber der vollständigkeit halber hier eine kleine Anleitung wie es mit dem Style-Attribut funktioniert.

Nebenbei zeige ich euch hier direkt wie ihr Texte unterstreicht.

 
<!-- Klassenerzeugung innerhalb eines Dokumentes -->
<!--
 
    .underline{text-decoration: underline;}
 
-->
 
Dieser Text wird bei euch nun unterstrichen angezeigt

So und jetzt zeige ich es euch nochmal innerhalb des Stylesheets:

.underline{text-decoration: underline;}

Wie ihr seht eigentlich kein großer Unterschied, ausser dass ihr hier die Style Elemente weglasst. Das verwenden dieser Klassen für einen bestimmten Absatz ist auch der selbe wie bei der vorherigen Definition mit den Style Elementen. Also:

 
Dieser Text wird bei euch nun unterstrichen angezeigt

Und schon gehts weiter mit dem nächsten Schritt.

Ich wähle bei meinen Projekten lieber die Definition im Stylesheet, da dies besser ist wenn ihr Formatierungen auf mehreren Seiten anwenden möchtet. Ich werde euch im Anschluss daher nur noch die Stylesheetklassen zeigen, wie ihr diese anwendet habt ihr ja gerade gelernt.

Texte unterstreichen:

.unterstreichen{text-decoration: underline;} /* Text unterstreichen*/
.durchstreichen{text-decoration: line-through;}
.ueberstreichen{text-decoration: line-through;}
.blinken{text-decoration: blink}

Wenn ihr jetzt aber Textelemente Fett markieren möchtet, dann müsst ihr diese einfach mit einem
strong Element markieren oder aber natürlich auch dies im Stylesheet mit einer Klasse festlegen.
Beispielsweise so

.fett {font-weight: bold;}

Für kursive Schrift geht das ganze so:

.kursiv{font-style: italic;}

Natürlich könnt ihr diese Elemente auch kombinieren, so lange ihr nicht wiedersprüchliche dinge einbaut wie zum Beispiel:

font-style: normal ;
font-style: italic;

Bei einer solchen Anweisung ist es so als ob ihr dem Programm versucht zu sagen, siehe nach rechts und nach links zur selben Zeit. Da dies nicht möglich ist, übernimmt das Programm ledeglich den letzten Wert, also in diesem Fall das kursive.

Es gibt einige Leute die, aus mir nicht nachvollziehbaren Gründen Ihre Texte gerne von rechts nach links laufen lassen möchten, also bitte, auch diesem Wunsch kommen wir nach.

Auch dies ist eigentlich nicht schwer, ich erzeuge euch hier mal eine seperate Klasse hierfür, ihr könnt dies aber natürlich auch in jeden Div oder in jede Klasse mit einbauen.

.reverse{direction:rtl;}

Und nein bevor ihr fragt, das hat nichts mit dem Fernsehsender RTL zu tun, das rtl steht für right to left, also für rechts nach links. Mehr steckt auch schon nicht dahinter.

Wenn Ihr es umkehren zum Normalzustand m&ouml:chtet dann sieht das ganze wie folgt aus:

.reverse{direction:ltr;}

Wenn Ihr Interesse daran habt bestimmte Textpassagen mit einem anderen Zeichenabstand als einem anderen zu definieren so bietet sich hier die Möglichkeit dies über CSS exakt zu steuern.

.schmalerabstand {letter-spacing: -2px;}
.nochschmalabernichtnormal{letter-spacing: -1px;}
.schonbreiterabernichtganzbreit{letter-spacing: 1px;}
.breiterabstand{letter-spacing: 2px;}

Auch hier wiederhole ich mich: entweder integriert ihr es direkt ins Html-Dokument oder bindet es in eine bestehende CSS Klasse ein oder erzeugt eine hierfür.

Jetzt kommt das wahrscheinlich mit wichtigste Thema der Textformatierung, die Ausrichtung des Textes. Ob ihr euren Text nun zentrieren möchtet, oder lieber linksbündig oder rechtsbündig, oder sogar *gefährlich* Blocksatz schreiben wollt, das könnt ihr alles mit einem Element definieren das unterschiedliche Attribute hierfür bereitstellt.  Dieses Element nennt sich: text-align und so wird es angewandt:

text-align: left; /* Ausrichtung nach links */
text-align: right; /* Ausrichtung nach rechts*/
text-align: center; /* Ausrichtung zentriert*/
text-align: justify; /* Ausrichtung als Blocksatz*/

Damit haben wir die wichtigsten Themen der Textausrichtung angesprochen.