CSS / Tipps / Textgestaltung mit CSS

von: Werner Zenk

Mit CSS ist ein Text schnell formatiert.
Einfach den Text zwischen die HTML-Tags <span> und </span>
setzen, eine kurze CSS-Formatierung dazu — fertig.

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
<span style="font-family: Comic Sans MS"> Dieser Text dient nur zur Demonstration. </span>

Dieser Text dient nur zur Demonstration.

 

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

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

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

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

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

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

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

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

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

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

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

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

Dieser Text dient nur zur Demonstration.

 

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

Dieser Text dient nur zur Demonstration.

 

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

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

Dieser Text dient nur zur Demonstration.

 

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

Dieser Text dient nur zur Demonstration.

 

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

Dieser Text dient nur zur Demonstration.
color: Schriftfarbe
<span style="color: limegreen"> Dieser Text dient nur zur Demonstration. </span>

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

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

Dieser Text dient nur zur Demonstration.

 

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

Dieser Text dient nur zur Demonstration.
background-color: Hintergrundfarbe
<span style="background-color: powderblue"> Dieser Text dient nur zur Demonstration. </span>

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

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

Dieser Text dient nur zur Demonstration.

 

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

    Buttontext      

 

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

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

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

Dieser Text dient nur zur Demonstration.

 

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-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-align: Textausrichtung
<div style="text-align: center"> Dieser Text dient nur zur Demonstration. </div>

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

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

Dieser Text dient nur zur Demonstration.
text-align: Textausrichtung
<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.
vertical-align: Vertikale Textausrichtung
Dieser Text dient <span style="vertical-align: super">nur</span> zur Demonstration.

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

Dieser Text dient nur zur Demonstration.

 

border-style: Rahmen, Stil
<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
<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.
outline: Außenlinie
<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.
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.

 

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.

 

 

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

Dieser Text dient nur zur Demonstration.

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

Dieser Text dient nur zur Demonstration.

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.
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
<div style="margin: auto; width: 210px; border: solid 1px #000000;"> Dieser Textblock wird zentriert. </div>

Dieser Textblock wird zentriert.

 

Weitere Beispiele unter: Mit Farbe Unterstreichen
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?  
Kommentare: 14 » aufmachen   
haertel :
gut für den Gebrauch

danke echt mist:
Nein überhaubt nicht den: keine rede von wie man eine jpg in einer CSS einbaut. das was ich hier lese ist krimskram zeug was jeder kleine html editor schon drin hat.

holger :
Für viele Anfänger ist das kein "krimskram"... Ich will CSS können und nicht irgendein Editor.

Flashgirl:
sehr hilfreich, danke

ANGX Webmaster:
Wirklich sehr hilfreich, danke.

Susanne:
Hilfreiche Sache, wenn man schnell eine Anleitung zur Hand braucht. Thanks

Amaryllion:
Eine feine Übersicht - vergiß die Spinner, die an allem was zu kritisieren haben, was jemand für andere tut. =)

Peter:
Hallo Äußerst hilfreich in allen Bereichen, selten so eine gute Seite gesehen deren Inhalt auch noch gut erklärt ist. Weiter so.

McDonalds:
Echt hammer, hat mir gut geholfen! PS: text-decoration und nicht tecoration !

html-anfänger:
Danke für die tipps! sie waren sehr hilfreich

CSS-Anfänger:
Besten Dank. - Bin Anfänger und mir wurde hier geholfen.

ich lerne noch:
Vielen Dank, für mich war es sehr hilfreich!

Mash:
Besten Dank auch

Ernst:
Nachdem ich hier auf dem Schreibtisch zwei dicke Bücher liegen habe und dachte, muss ich nun wirklich für eine kleine Seite all das wissen, alles können und vor allen Dingen alles durchlesen? So schnell und effektiv das gefunden was ich wissen wollte und auch gebrauchen kann habe ich nur hierauf dieser Seite.All dieser Krimskrams ist absolut Super zusammengestellt,hilfreich und effizient zum einsetzen.Vielen Dank Werner das es Leute gibt wie dich, die kurz und bündig auf das Wesentliche kommen, uns es solchen DAU's, wie mir , auch nahe bringen Danke und viele Grüße Ernst
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
CSS Hyperlink #24  Eingabefeld ohne Rahmen  CSS Hyperlink #29  CSS Hyperlink #41  Bildlaufleisten (Scrollbar) ausschalten  Loch im Browser! - Löcher mit Grafiken und CSS.  Zeilen-Zwischenraum in HTML-Tags veringern  Masseinheiten für CSS  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner