Liebe(r) Besucher(in), sämtliche Beispiele auf dieser Seite öffnen per JavaScript ein neues Browser-Fenster. Bitte aktiviere JavaScript in deinem Browser, wenn du die Beispiele anschauen möchtest.
Über mich
Freunde
Geld anlegen
Geld verdienen
Witze
Opt.Täuschungen
Interaktives
Tipps & Tricks
Know-How
Urlaube
Digitalfotografie
Webdesign
HTML Grundlagen
Style Sheets
Einführung
Grundlagen
Anwendungen
Befehlsübersicht
Praxis-Tipps
Egogramm
Rund ums Haus
Sonstiges
Tourist-Guides
Impressum

CSS-Befehlsübersicht

Die folgenden Unterkapitel geben eine Übersicht über die wichtigsten und gebräuchlichsten CSS-Befehle. Sie sind gegliedert in Befehle für Schrift, Absatz, Text, Hintergrund, Rahmen, Abstände, Ränder, Tabellen, Listen und Positionierung.

Bei der Übersicht habe ich bewusst auf Vollständigkeit verzichtet, nämlich aus zwei Gründen: Erstens gibt es zahlreiche Befehle, die auf normalen Webseiten wirklich nie vorkommen, die die folgenden Tabellen also nur unnötig aufblähen würden. Zweitens gibt es zahlreiche Befehle, die auch von den gängigsten Browsern noch nicht unterstützt werden. In den Tabellen gebe ich auch bewusst immer einige Beispiele für die jeweilige CSS-Eigenschaft an, nicht aber alle möglichen Werte bzw. Platzhalter.

Zu allen hier vorgestellten CSS-Befehlen gibt es jeweils in einem separaten Dokument zahlreiche Beispiele, die deren Anwendung und das Ergebnis zeigen.

Schriftformatierung

Stile, die auf fast jeder Internet-Seite in irgendeiner Form verwendet werden, betreffen die Formatierung der eigentlichen Schrift. Mit dem CSS-Befehl font-family wird bestimmt, in welcher Schriftart ein Text dargestellt werden soll. Mit font-size legt man die Größe der Schrift fest. Dies kann sowohl in absoluten als auch in relativen Größen erfolgen.

Mit font-weight hat man ein ziemlich mächtiges Mittel, um eine Schrift in 9 verschiedenen Dicken darzustellen. Voraussetzung ist natürlich, dass für die ausgewählte Schriftart so viele Varianten zur Verfügung stehen. Die Eigenschaft font-style stellt eine Schrift normal oder kursiv dar. Und als weitere Variante bietet sich font-variant, die eine Schrift in kleinen Kapitälchen darstellt.

Beispiele zur Schriftformatierung gibt es auf dieser Seite. Zuerst wird immer die verwendete Style Sheet Angabe gezeigt, anschließend das Ergebnis. Leider können nicht alle Browser bzw. Rechner alle Style Sheet Angaben richtig darstellen.

CSS-BefehlAuswahl möglicher Werte
font-family'Arial', 'Comic Sans MS', 'Verdana', 'serif', 'sans-serif'
font-size10pt, 12pt, 14pt, 10px, 30px, 0.5cm, 2cm, 8mm, 1.3in
smaller, small, medium, large, larger
font-weightlighter, normal, bold, bolder
100, 200, 300, 400, 500, 600, 700, 800, 900
font-styleitalic, normal
font-variantsmall-caps, normal

Absatzformatierung

Die wichtigste Absatzformatierung text-align bestimmt die horizontale Ausrichtung des Textes in einem Absatz, also ob Text linksbündig, rechtsbündig, zentriert oder als Blocksatz dargestellt wird. Mit text-indent kann man den Einzug der ersten Zeile bestimmen. Dieses Attribut kann auch negative Werte annehmen, wenn z.B. der Absatz als Ganzes schon eingerückt wird.

Der CSS-Befehl line-height hat wesentlichen Einfluss auf die Optik einer Seite, da mit ihm der Zeilenabstand festgelegt wird. Diesen kann man absolut oder als Faktor zur Normalzeilenhöhe angeben. Der Zeilenabstand kann nicht nur vergrößert, sondern auch verkleinert werden. Wird dieser zu klein, werden die einzelnen Zeilen übereinander gedruckt.

Mit vertical-align kann man die vertikale Ausrichtung von Text festlegen. Dieses Attribut wird jedoch erst interessant, wenn Text in Tabellenzellen dargestellt wird. Auch für diese CSS-Befehle gibt es zahlreiche Beispiele auf einer Extra-Seite.

CSS-BefehlAuswahl möglicher Werte
text-alignleft, right, center, justify
text-indent10pt, 50px, 5mm, 1cm, -50pt, -1cm
line-height1.5, 20pt, 30px, normal
vertical-alignbaseline, super, sub, bottom, middle, top

Textformatierung

Das wichtigste Mittel der Textformatierung ist die Textfarbe. Diese kann entweder durch eine direkte Farbangabe wie blue oder durch eine Rot-Grün-Blau-Mischung angegeben werden. Mit text-decoration kann man einen Text unterstreichen, überstreichen oder gar durchstreichen. Der CSS-Befehl text-transform transformiert den Inhalt eines Textes sämtlich in Groß- oder Kleinbuchstaben oder beginnt jedes Wort mit einem Großbuchstaben.

Mit letter-spacing kann man eine gewisse Laufweiter der Schrift erzwingen. Die Möglichkeit, zwischen den einzelnen Wörtern einen bestimmten Abstand zu erzwingen (word-spacing) wird noch nicht von allen Browsern unterstützt. Beispiele zur Textformatierung gibt es auf dieser Seite.

CSS-BefehlAuswahl möglicher Werte
colorred, blue, yellow, green, lightgrey, #ffff00, rgb(100,50,200)
text-decorationunderline, overline, line-through, blink, none
text-transformuppercase, lowercase, capitalize, none
letter-spacing2pt, 3mm
word-spacing10pt, 10mm, 50%

Hintergrundformatierung

Hintergrundfarben und -bilder kann man sowohl für das ganze Dokument als auch für Teilbereiche, zum Beispiel einzelne Textabsätze, Tabellen oder Bereiche festlegen. Eine Hintergrundfarbe kann man entweder direkt mit einer Farbbezeichnung angeben oder als RGB-Wert. Ein Hintergrundbild bindet man ein, indem man den Pfad und den Namen mit dem url() Befehl angibt. Verwendet man nicht den CSS-Befehl background-repeat, so wird das Bild so oft wiederholt, bis die ganze Fläche gefüllt ist. Mit background-repeat kann man jedoch selbst bestimmen, ob und in welche Richtung das Hintergrund wiederholt werden soll. Hier gibt es Beispiele zur Verwendung der Befehle.

Hat man mittels background-repeat: no-repeat ausgewählt, dass der Hintergrund nicht wiederholt wird, kann man das Hintergrundbild beliebig auf der Seite positionieren. Erlaubt sind absolute Positionsangaben in Punkt, Pixel oder cm oder relative Angaben wie <center>. Mit dem Befehl background-attachment:fixed kann man aus dem Hintergrundbild sogar ein Wasserzeichen machen wie das folgende Beispiel zeigt.

CSS-BefehlAuswahl möglicher Werte
background-colorred, green, blue, #ffee50, rgb(200,100,50), transparent
background-imageurl("Pfadangabe+Dateiname"), none
background-repeatrepeat, repeat-x, repeat-y, no-repeat
background-position50px, 200pt, 30%, top, center, bottom, left, center, right
background-attachmentfixed, scroll

Rahmen, Innenabstände und Ränder

Wer jetzt denkt, beim Thema Rahmen, Innenabständen und Rändern sind wir bei Tabellen angelangt, der muss noch etwas warten. Denn mit CSS kann man nicht nur Tabellen einen Rahmen verpassen, sondern jedem beliebigen Textabsatz, jeder Überschrift oder jedem <div> Bereich.

Alle hier gezeigten CSS-Formatierungen haben gemeinsam, dass man sie immer auf alle 4 Seiten zugleich anwenden kann oder auf jede Seite einzeln. Die Rahmendicke gibt man allgemein mit border-width an. Will man jedoch nur die Dicke des rechten Rahmens angeben, so verwendet man border-right-width. Den Stil des Rahmens gibt man mit border-style an. Ein Rahmen kann jedoch auch unsichtbar sein. Die Angabe einer Rahmenfarbe kann direkt oder in Form von RGB-Werten erfolgen.

Mit margin gibt man den Rand eines Absatzes, einer Überschrift oder eines Blockes an. Hat man dem Absatz einen Rahmen gegeben, so bestimmt margin den Abstand vom Rahmen nach außen hin. Mit padding dagegen legt man den Abstand des Rahmens nach innen fest, also zum Beispiel den Abstand des Textes zum Rahmen.

Mit Rahmen, Innenabständen und Rändern sind so viele Gestaltungsmöglichkeiten vorhanden, dass man die Anzahl der Beispiele gar nicht groß genug machen kann. Hier wird anhand zahlreicher Beispiele gezeigt, was für Möglichkeiten einem diese CSS-Befehle bieten.
CSS-BefehlAuswahl möglicher Werte
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
5pt, 3px, 0.5cm, 2mm
thin, medium, thick
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
solid, dashed, dotted, hidden, none
double, groove, ridge, inset, outset
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
red, green, blue, yellow, lightblue, darkgrey
#9933a0, rgb(100,220,80)
margin
margin-top
margin-bottom
margin-left
margin-right
20pt, 50px, 1.5cm, 20mm
padding
padding-top
padding-bottom
padding-left
padding-right
10pt, 20px, 1.5cm, 20mm

Tabellenformatierung

Diverse Tabellen wurden bereits als Beispiele der vorigen Unterkapitel formatiert. Für ganze Tabellen, für einzelne Tabellenzeilen oder Zellen können Formatierungen wie Rahmen, Innenabstände und Außenabstände, Schriftart, Hintergrund etc. angewendet werden. CSS bietet jedoch noch zahlreiche weitere Formatierungsmöglichkeiten für Tabellen an.

Mit dem HTML-Tag <caption> kann eine Tabelle beschriftet werden. Mit dem CSS-Kommande caption-side kann festgelegt werden, an welcher Stelle die Beschriftung stehen soll. Ältere Browser wie Netscape 4.7 oder Internet-Explorer 5.5 verstehen dieses Kommando jedoch noch nicht. Von diesen Versionen der gängigsten Webbrowser wird auch der Befehl border-spacing noch nicht verstanden; er entspricht dem HTML-Attribut cellspacing.

Die vielleicht wichtigsten Formatierungsbefehle für Tabellen sind text-align und vertical-align. Mit diesen richtet man nämlich den Inhalt einer Zelle aus. Dies kann gewöhnlicher Text sein, aber auch Bilder, Untertabellen, Links etc.

Hier gibt es einige Beispiele zur Anwendung dieser Befehle. Mehr über die Formatierung von Tabellen gibt es jedoch in einem extra Anwendungs-Kapitel.

CSS-BefehlAuswahl möglicher Werte
caption-sidetop, bottom, left, right
border-spacing5pt, 10px, 1cm, 5mm
vertical-aligntop, center, bottom
text-alignleft, center, right, justify

Listenformatierung

In HTML gibt es unsortierte und sortierte Listen. Mit CSS kann man für unsortierte Listen aus 3 verschiedenen Bullet-Zeichen auswählen oder man wählt eine externe Grafik als Bullet-Zeichen. Sortierte Listen können mit CSS auf unterschiedliche Weise durchnummeriert werden. Von Zahlen, Buchstaben, griechischen Buchstaben bis hin zu japanischen Hiragana und Katakana ist alles möglich.

Mit dem CSS-Befehl list-style-position kann auf die Position des Bullets Einfluss genommen werden. Wählt man den Wert inside, so wird das Bullet und damit auch der Listentext etwas eingerückt. Das folgende Beispiel zeigt die zahlreichen Möglichkeiten der Listenformatierung auf.

CSS-BefehlAuswahl möglicher Werte
list-style-typedisc, circle, square, none
decimal, upper-roman, upper-alpha, lower-alpha, decimal-leading-zero
lower-roman, lower-greek, lower-latin, upper-latin
list-style-imageurl("Pfadangabe+Dateiname"), none
list-style-positioninside, outside

Positionierung von Elementen

Ein faszinierendes Feature von CSS ist die Möglichkeit, Elemente beliebig im Browser-Fenster zu platzieren. Mit position:absolute; kann ein Element in absoluten Koordinaten im Fenster platziert werden. Mit position:relative wird ein Element relativ zum letzten Block positioniert. Mit position:fixed wird ein Element absolut positioniert; ein solches Element behält auch seine Position, wenn der Fensterinhalt durchgescrollt wird. position:static ist die normale Positionierung, d.h. einfach im Fließtext folgend.

Positionsangaben werden in typischen Maßeinheiten oder Prozent-Werten angegeben. Gleiches gilt für die Breite und Höhe. Theoretisch kann man auf diese Weise beliebige Elemente (Textabsätze, Überschriften, Tabellen etc.) positionieren. Besser ist es jedoch, wenn man immer zuerst <div> Bereiche positioniert und dann diese Bereiche mit Inhalt füllt.

Mit overflow kann man selbst bestimmen, was mit Inhalten eines Bereiches passiert, der im vorgegebenen Bereich eigentlich gar keinen Platz mehr hat. So ist es zum Beispiel möglich, Scrollbalken einzublenden. Mit float wird festgelegt, wie andere Elemente um den positionierten Bereich fließen sollen.

Zum Verbergen eines Elementes gibt es zwei CSS-Befehle: visibility und display; beide verstecken ein Element, jedoch mit einem wesentlichen Unterschied: Ein Element, das mit visibility=hidden ausgeblendet wird, nimmt dennoch im Browserfenster seinen zugewiesenen Platz weg. Ein Element, das mit display:none ausgeblendet wird, nimmt auch keinen Platz mehr im Fenster ein. Während mit visibility=hidden bewusst Leerbereiche im Fenster erzeugt werden können, positioniert man Elemente mit display:none hauptsächlich aus dem Grunde, um sie später z.B. durch JavaScript sichtbar zu machen.

Das erste Beispiel zeigt den Effekt dieser CSS-Befehle. Mit position:absolute kann man auch Elemente übereinander, nebeneinander und ineinander platzieren. Mit der CSS-Eigenschaft z-index kann man jedem Element eine Zahl zuweisen, die die Priorität in der Darstellung angibt. Auf diese Weise kann man bestimmen, welches Element über welchem liegen soll. Das folgende Beispiel zeigt, wie man mit z-index bestimmt, welches Element über welchem liegen soll.

CSS-BefehlAuswahl möglicher Werte
positionstatic, relative, absolute, fixed
top, bottom
left, right
10pt, 20px, 15mm, 2cm, 30%
width, height10pt, 20px, 15mm, 2cm, 30%
overflowhidden, visible, auto, scroll
floatleft, right, none
visibilityvisible, hidden
displaynone, block
z-indexZahl

Zurück zum Inhaltsverzeichnis CSS-Style-Sheets