---

Gute Textformatierung ist für einen Artikel sehr wichtig.
Denn ein wenig formatierter Text ist schlecht zu lesen und wird folgedessen auch einfach nicht gelesen.
 
Wie lassen sich also Texte attraktiv gestalten?
 
Dafür gibt es eine Reihe an CSS Befehlen. Man kann die Schriftfarbe, die Schriftgröße, den Zeilenabstand und noch einiges mehr beeinflussen.
 

Befehlsübersicht

Hier eine Liste der Befehle, die ich am häufigsten bei meiner Textformatierung benutze.

color: #666666;
font-size: 12px;
font-weight: normal;
font-style: italic;
font-family: Arial, Tahoma, Verdana, sans-serif;
text-decoration: none;

 

Textfarbe

Die Farbe eines Textes wird mit dem Befehl color definiert. Der Farbwert wird als Hexadezimalcode (#000000 -> schwarz) angegeben. Alternativ kann man auch den Farbnamen angeben (black – wird so nicht mehr benutzt).
 

Schriftgröße

In Texten ist die Schriftgröße ein wichtiger Aspekt bei der Textformatierung. Als Minimum bei einem Fließtext sollte eine Schriftgröße von 12px gewählt werden. Alles darunter ist deutlich zu klein zum entspannten Lesen.

Als Angabe der Schriftgröße können zwei verschiedene Einheiten angegeben werden:
 
Pixel (px)
Ein Pixel ist die kleinste Einheit an dem Bildschirm. Pixel ist eine statische Einheit.
 
em
Die Einheit em hingegen ist flexibel und immer relativ zu dem im Stylesheet definierten Schriftgröße.
Du hast z.B.: in deiner Stylesheet Datei im Body Tag die Schriftgröße auf 12px gesetzt. Wenn deine Überschrift aber 24px groß sein soll, sind das 2em!
12px = 1em = 100%
24px = 2em = 200%
 
Um das nicht im Kopf umzurechnen, gibt es eine tolle Internetseite.
Auf PXtoEM werden die Größen umgerechnet.
 

 

Schriftstärke

Die Schriftstärke lässt sich mit dem Befehl font-weight verändern. Typische Werte hierfür sind bold, bolder, lighter und normal.
 

Schriftstil

Mit font-style kann der Schriftstil einer Schrift bestimmt werden. Folgende Angaben sind dabei möglich:

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

 

Schriftart

Zu den Schriftarten gehören z.B.: Arial, Tahoma, Verdana usw. Schriftfamilien wie sans-serif usw. gehören ebenfalls dazu.
Mit font-family lässt sich also die Schriftart und Schriftfamilie festlegen.

font-family: Arial, Tahoma, Verdana, sans-serif

Mit diesem Befehl wird nun primär die Schriftart Arial bevorzugt. Ist diese auf dem Computer nicht vorhanden wird Tahoma ausgewählt. Ist diese ebenfalls nicht vorhanden wird auf Verdana zurückgegriffen. Die Schriftfamilie ist sans-serif (ohne Serifen), welche für Text auf dem Bildschirm übrigens besser zu lesen ist.
 

Textdekoration

Mit dem Befehl text-decoration kann man den Text lediglich unter, -über oder durchstreichen.

text-decoration: underline;
text-decoration: overline;
text-decoration: line-trough;
text-decoration: none;

 

 
Um die Übersetzungsfunktion auf W3Schools einzusetzen, auf “TRANSLATE” klicken und die entsprechende Sprache auswählen:
 

 

Mehr

Die 15 CSS3-Buttons (zu sehen auf GitHub Social-Coding) sind auf dem Screenshot zu sehen und der entsprechende Code der Buttons kann eingesehen werden:

Der CSS-Code für die Buttons ist hier einzusehen.

1. 
2. 
3. 

Mehr

CSS-Tipps zur Gestaltung von Text (Teil 1)

Themenübersicht:

• Mehrspaltigen Text
• Initiale (engl. Drop Caps) mit dem CSS Pseudoklassen-Selektor
• Eingerückte Absätze
• Schönere &-Zeichen
• Text-Verläufe

 

CSS-Tipps zur Gestaltung von Text (Teil 2)

Themenübersicht:

• CSS3 text-shadow
• Eingestanzter Text
• Kreative Möglichkeiten mit text-shadow
• Vertikaler Text mit Text-Rotation
• CSS-Styles für Zitate
• Text-Animation mit CSS3 transitions

 

CSS: externe Links kennzeichnen

Links zu anderen Webseiten per CSS kennzeichnen.
 

 

CSS3 – Information und Beispiele und Browserkompatibilität

 

Praktische CSS Kurzschreibweisen im Überblick

CSS-Kurzschreibweisen und folgende Beispiele:

1. font
2. margin und padding
3. back­ground
4. list-style
5. border
6. out­line
7. transition

 

CSSDesk: Sandbox

Online-Tool zum testen von HTML- und CSS-Regeln.

 

CSS Layout Generator

Die Struktur einer Website mit validem HTML und CSS erstellen.

 

CSS3 Click Chart

Ein Klick auf die Überschrift eines CSS3-Element liefert Informationen und eine Beispiel-Syntax dafür.

 

CSS3 Tutorial von W3schools

Das Tutorial zeigt die Features von CSS3 in verschiedenen Sprachen.

Mehr

Beliebigen Texten verschiedene Style-Elemente zuweisen und den CSS-Code generieren lassen:

• den zu gestaltenden Text in das obere Feld eingeben
• gewünschte Style-Elemente(Größe,Farbe,Rahmen,…) auswählen

 
Das Aussehen des Textes mit den gewählten Einstellungen wird angezeigt (zwischen “start” -> “end”).

Ein Klick auf “Get code” erzeugt den CSS-Code.
 

Mehr

CSS-Codes komprimieren und somit die Ladezeiten der Webseite verringern.

 
Die gewünschten Einstellungen vornehmen:

 
Den CSS-Code in das Feld einfügen:

 
Ein Klick auf “Compress-it!”, und der optimierte CSS-Code wird angezeigt:

 
“Highlight-Code” markiert den gesamten CSS-Code zum kopieren.

Die Ergebnisse der Kompression werden angezeigt.

---

 
“Advanced-Mode” (Erweiterter Modus):

Folgende Optionen bietet der Modus:

 

Mehr