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 dientnur 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>