Textgestaltung mit CSS (Tutorial)

Mit CSS ist ein Text schnell formatiert. Einfach den Text zwischen die HTML-Tags <p>, <div> oder <span> setzen, eine kurze CSS-Anweisung dazu — fertig.

Schriftfamilie - Schriftgröße - Schrift-Gewicht - Schrift-Stil - Schrift-Position - Kapitälchen - Schriftfarbe - Hintergrundfarbe - Hintergrundbild - Farbverlauf - Text-Dekoration - Text-Transformation - Text-Schatten - Textausrichtung - Vertikale Textausrichtung - Rahmen - Außenlinie - Radius - Innenabstand - Wortabstand - Zeichenabstand - Zeilenhöhe - Außenabstand - Texteinrückung - Textumbruch

Schriftfamilie

font-family: Schriftfamilie
<span style="font-family: Verdana"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-family: Schriftfamilie
<span style="font-family: Arial"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-family: Schriftfamilie
<span style="font-family: Tahoma"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-family: Schriftfamilie
<span style="font-family: Times New Roman"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-family: Schriftfamilie - Schriftart-Typen (monospace, cursive, fantasy, sans-serif, serif)
<span style="font-family: monospace"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration (monospace).

Dieser Text dient nur zur Demonstration (cursive).

Dieser Text dient nur zur Demonstration (fantasy).

Dieser Text dient nur zur Demonstration (sans-serif).

Dieser Text dient nur zur Demonstration (serif).
font-family: Schriftfamilie
<span style="font-family: 'Comic Sans MS', fantasy"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Schriftgröße

font-size: Schriftgröße (px)
<span style="font-size: 9px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (px)
<span style="font-size: 20px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (rem)
<span style="font-size: 2rem"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (em)
<span style="font-size: 2em"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (em)
<span style="font-size: 4em"> Dieser Text ... </span>

Dieser Text ...
font-size: Schriftgröße (cm)
<span style="font-size: 2cm"> Dieser ... </span>

Dieser ...
font-size: Schriftgröße (large)
<span style="font-size: large"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (x-large)
<span style="font-size: x-large"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (xx-large)
<span style="font-size: xx-large"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (medium)
<span style="font-size: medium"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (small)
<span style="font-size: small"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (x-small)
<span style="font-size: x-small"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-size: Schriftgröße (xx-small)
<span style="font-size: xx-small"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Schrift-Gewicht

font-weight: bold (Fett), normal
<span style="font-weight: bold"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Schrift-Stil

font-style: italic (Kursiv), Normal
<span style="font-style: italic"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-style: oblique (Schräg)
<span style="font-style: oblique"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Schrift-Position

font-variant-position: sub
<span style="font-variant-position: sub"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
font-variant-position: super
<span style="font-variant-position: super"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Kapitälchen

font-variant: small-caps (Kapitälchen)
<span style="font-variant: small-caps"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Schriftfarbe

color: Schriftfarbe (Hexadezimale Farbangabe)
<span style="color: #0000FF"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
color: Schriftfarbe (Farbnamen)
<span style="color: Limegreen"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
color: Schriftfarbe (RGB (Red, Green, Blue))
<span style="color: rgb(228, 149, 37)"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
color: Schriftfarbe, (RGBA (+transparent))
<span style="color: rgba(228, 149, 37, 0.5)"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Hintergrundfarbe

background-color: Hintergrundfarbe (Hexadezimale Farbangabe)
<span style="background-color: #FFFFAA"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
background-color: Hintergrundfarbe (Farbnamen)
<span style="background-color: Powderblue"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
background-color: Hintergrundfarbe (RGB (Red, Green, Blue))
<span style="background-color: rgb(228, 149, 37)"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
background-color: Hintergrundfarbe, (RGBA (+transparent))
<span style="background-color: rgba(228, 149, 37, 0.5)"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Hintergrundbild

background-image: Hintergrundbild
<span style="background-image: url(bild.gif); padding: 7px"> Buttontext </span>

Buttontext

Farbverlauf » Farbverlauf mit CSS

background: linear-gradient() Farbverlauf
<span style="background: linear-gradient(#FF00E9, #3DB7FF);
padding: 7px; color: #FFFFFF"> Buttontext </span>

Buttontext

Text-Dekoration

text-decoration: Unterstrichen (underline)
<span style="text-decoration: underline"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
text-decoration: Überstrichen (overline)
<span style="text-decoration: overline"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
text-decoration: Durchgestrichen (line-through)
<span style="text-decoration: line-through Blue"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
text-decoration: Welle (Wavy) - Mozilla Firefox, Google Chrome
<span style="text-decoration: Underline Wavy Fuchsia"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

text_decoration-wavy.png - 321 x 27 Pixel - 899 Byte

Text-Transformation

text-transform: Wortanfänge als Großbuchstaben
<span style="text-transform: capitalize"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
text-transform: Großschrift
<span style="text-transform: uppercase"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
text-transform: Kleinschrift
<span style="text-transform: lowercase"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Text-Schatten » Text mit Schatten

text-shadow: Text-Schatten
<span style="text-shadow: 1px 1px 0px #FECA60; font-size: 22px;"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
text-shadow: Text-Schatten
<span style="text-shadow: 3px 5px 0px #59BFFF; font-size: 22px;"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
text-shadow: Text-Schatten
<span style="text-shadow: -7px -7px 2px #EF14FF; font-size: 22px;"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
text-shadow: Text-Schatten
<span style="text-shadow: 0px 0px 8px #FFFF00; color: #FFD700; font-size: 20px;"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
text-shadow: Text-Schatten (doppelter Schatten)
<span style="text-shadow: black 0 0 5px, red 5px 5px 3px; font-size: 25px;"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Textausrichtung

text-align: Textausrichtung (zentriert)
<div style="text-align: center"> Dieser Text dient nur zur Demonstration. </div>

Dieser Text dient nur zur Demonstration.
text-align: Textausrichtung (rechts)
<div style="text-align: right"> Dieser Text dient nur zur Demonstration. </div>

Dieser Text dient nur zur Demonstration.
text-align: Textausrichtung (links)
<div style="text-align: left"> Dieser Text dient nur zur Demonstration. </div>

Dieser Text dient nur zur Demonstration.
text-align: Textausrichtung (Blocksatz)
<div style="text-align: justify"> Weit hinten, hinter den Wortbergen, ... </div>

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

Vertikale Textausrichtung

vertical-align: Vertikale Textausrichtung (super = höherstellen)
Dieser Text dient <span style="vertical-align: super">nur</span> zur Demonstration.

Dieser Text dient nur zur Demonstration.
vertical-align: Vertikale Textausrichtung (sub = tieferstellen)
Dieser Text dient <span style="vertical-align: sub">nur</span> zur Demonstration.

Dieser Text dient nur zur Demonstration.
vertical-align: Vertikale Textausrichtung (top, middle, bottom, baseline, text-top, text-bottom)
Dieser Text dient <img src="bild.gif" alt=""> <span style="vertical-align: top">nur zur Demonstration.</span>

Dieser Text dient nur zur Demonstration.

Rahmen

border-style: Rahmen, Stil (solid, dotted, dashed, double, inset, outset, ridge, none)
<span style="border-style: solid"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-style: Rahmen, Stil
<span style="border-style: dotted"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-style: Rahmen, Stil
<span style="border-style: dashed"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-style: Rahmen, Stil
<span style="border-style: outset"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-style: Rahmen, Stil
<span style="border-style: inset"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-style: Rahmen, Stil
<span style="border-style: ridge"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-style: Rahmen, Stil
<span style="border-style: double"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-style: Rahmen, Stil
<span style="border-style: groove"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-width: Rahmenbreite
<span style="border-style: solid; border-width: 1px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-color: Rahmenfarbe
<span style="border-style: solid; border-color: #0000FF"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border: Rahmen
<span style="border-style: solid; border-color: #FF0000; border-width: 1px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border: Rahmen (Kurzschreibweise)
<span style="border: dashed 1px #FF00CC"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border: Rahmen
<span style="border: solid 1px #FF00CC"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border: Rahmen
<span style="border: dotted 1px #FF00CC"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border: Rahmen (thin, medium, thick)
<span style="border: solid medium lightskyblue"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Außenlinie

outline: Außenlinie (Kurzschreibweise)
<span style="outline: dotted 1px #FF00CC"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
outline: Außenlinie (Kombination aus outline und border)
<span style="outline: dotted 1px #FF00CC; border: solid 1px #0000FF"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
outline-offset: Außenlinie
<span style="outline: dotted 1px #FF00CC; outline-offset: 10px; border: solid 1px #0000FF"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Radius

border-radius: Rahmen, Radius
<span style="border: solid 1px #21DE97; border-radius: 15px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-radius: Rahmen, Radius
<span style="border: solid 1px #4EACCB; border-radius: 25px 10px 40px 5px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
border-radius: Rahmen, Radius
<span style="border: solid 1px #F2C611; border-radius: 25px 25px 0px 0px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Innenabstand

padding: Innenabstand (padding-top, padding-right, padding-bottom, padding-left)
<span style="border: solid 1px #0000EE; padding: 10px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

padding: Innenabstand
<span style="border: solid 1px #0000EE; padding: 25px"> Dieser Text dient nur zur Demonstration. </span>


Dieser Text dient nur zur Demonstration.

padding: Innenabstand
<span style="border: solid 1px #00EE00; padding-left: 65px"> Dieser Text dient nur zur Demonstration. </span>


Dieser Text dient nur zur Demonstration.
padding: Innenabstand
<span style="border: solid 1px #00EE00; padding-bottom: 35px"> Dieser Text dient nur zur Demonstration. </span>


Dieser Text dient nur zur Demonstration.


padding:   Innenabstand (top, right, bottom, left im Uhrzeigersinn!)
<span style="padding: 1px 100px 18px 45px; border: solid 1px #FFA07A;"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Wortabstand

word-spacing: Wortabstand
<span style="word-spacing: 10px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Zeichenabstand

letter-spacing: Zeichenabstand
<span style="letter-spacing: 3px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

Zeilenhöhe

line-height: Zeilenhöhe
<span style="line-height: 22px"> Dieser Text dient nur <br>
zur Demonstration. </span>

Dieser Text dient nur
zur Demonstration.
line-height: Zeilenhöhe
<span style="line-height: 35px"> Dieser Text dient nur <br>
zur Demonstration. </span>

Dieser Text dient nur
zur Demonstration.

Außenabstand

margin: Außenabstand
<span style="margin: 40px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
margin:   Außenabstand (margin-top, margin-right, margin-bottom, margin-left)
<span style="margin-left: 170px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
margin:   Außenabstand (top, right, bottom, left im Uhrzeigersinn!)
<span style="margin: 140px 30px 10px 50px"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.
margin: Außenabstand
<p style="margin: auto; width: 210px; border: solid 1px #000000;"> Dieser Textblock wird zentriert. </p>

Dieser Textblock wird zentriert.

Texteinrückung

text-indent: Texteinrückung
<p style="text-indent: 10em"> Weit hinten, hinter den Wortbergen, fern der Länder ... </p>

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

text-indent: negative Texteinrückung
<p style="text-indent: -3em"> Weit hinten, hinter den Wortbergen, fern der Länder ... </p>

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

Textumbruch

white-space: Textumbruch (pre, nowrap, pre-wrap, normal)
<p style="white-space: pre">  (\__/) (='.'=) (")_(") </p>