Übersicht über wichtige CSS-Befehle

Hier haben wir eine Auswahl an wichtigen und nützlichen CSS-Befehlen. Natürlich gibt es noch viele mehr, die man bei Bedarf selbst recherchieren kann.
Um sie etwas zu strukturieren, werden sie hier nach Anwendungsgebieten unterteilt.

Befehle zur Gestaltung des Körpers / des Hintergrunds (einer Seite, einer Tabelle etc.)

Eigenschaft Bedeutung Erläuterung Beispielwerte
background-color Hintergrundfarbe Angabe durch Name oder RGB-Wert Namen: red, blue,...
RGB-Wert: #00FF33,...
background-image Hintergrundbild Link zur Bilddatei muss angegeben werden. url(../Bilder/Hintergund.PNG)
background-repeat Wiederholung Das Hintergrundbild kann z.B. gekachelt werden. repeat, repeat-x, repeat-y, no-repeat
background-attachment Fixierung Gibt an, ob das Hintergrundbild mitscrollen soll. scroll, fixed
background-position Position Z.B. kann man das Bild zentrieren. top, center, bottom, left, right
background-size Größe Z.B. kann man das Bild so strecken, dass der gesamte Hintergrund ausgefüllt wird. Angabe in Prozent, Angabe in px, auto, cover, contain

<

Befehle zur Gestaltung von Text

Schrift

Eigenschaft Bedeutung Erläuterung Beispielwerte
font-family Schriftart genauer Name der Schriftart oder eine Schriftfamile serif, sans-serif, cursive, fantasy, monospace
font-style Schriftstil Kursiv-, Schräg- oder Normaldruck italic, oblique, normal
font-size Schriftgröße Kann man z.B. in pt angeben oder per Bezeichnung (siehe rechts). xx-small, x-small, small, medium, large, x-large, xx-large
font-weight Schriftgewicht Stärke des Fettdrucks bold, light, Zahlenwerte von 100 (dünn) bis 900 (fett)
text-decoration Dekoration zum Beispiel Unter- oder Durchstreichen underline, overline, line-through, none
color Schriftfarbe Angabe durch Name oder RGB-Wert Namen: red, blue,...
RGB-Wert: #00FF33,...
letter-spacing Zeichenabstand Abstand der einzelnen Schriftzeichen Angabe z.B. in px.

Ausrichtung

Eigenschaft Bedeutung Erläuterung Beispielwerte
text-align horizontale Ausrichtung Ausrichtung wie man sie von einer Textverarbeitung gewohnt ist. left, center, right, justify
text-indent Einrückung Damit kann man die erste Zeile eines Absatzes etwas nach rechts einrücken. Angabe z.B. in px.
line-height Zeilenhöhe um den Zeilenabstand zu erhöhen Angabe z.B. in px.

Befehle zur Gestaltung von Listen

Eigenschaft Bedeutung Erläuterung Beispielwerte
list-style-type Typ Hier kann man den Typ der Aufzählungszeichen bzw. Nummerierung angeben. Aufzählungszeichen: disc, circle, square, none
Nummerierung: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha

Befehle zur Gestaltung von Abständen, Rahmen und des Textflusses (bei Bildern, Tabellen,...)

Dieses Bild ist eine gute Veranschaulichung der drei in der Praxis relevantesten Befehle:

Ein Bild zur Veranschaulichung
Quelle: http://www.avajava.com/tutorials/lessons/how-are-margins-borders-padding-and-content-related.html

Eigenschaft Bedeutung Erläuterung Beispielwerte
margin,
margin-top, margin-left,... 		Außenabstand um den Rahmen Gibt es Außenabstand eines Elementes zu den darumliegenden Elementen an. Angabe z.B. in px.
border-width,
border-top-width, border-left-width,... 		Breite des Rahmens Kann entweder auf einen Schlag auf allen Seiten angegeben werden oder einzeln (und dann auch unterschiedlich). Angabe z.B. in px oder thin, medium, thick.
border-color,
border-top-color, border-left-color,... 		Farbe des Rahmens Kann entweder auf einen Schlag auf allen Seiten angegeben werden oder einzeln (und dann auch unterschiedlich). Angabe wie bei Farben gewohnt.
border-style,
border-top-style, border-left-style,... 		Stil Kann entweder auf einen Schlag auf allen Seiten angegeben werden oder einzeln (und dann auch unterschiedlich). none, solid, dotted, dashed, double
padding,
padding-top, padding-left,... 		Innenabstand bis zum Rahmen. Kann entweder auf einen Schlag auf allen Seiten angegeben werden oder einzeln (und dann auch unterschiedlich). Angabe z.B. in px.
border-radius Abrundung der Ecken des Rahmens Kann entweder auf einen Schlag auf allen Seiten angegeben werden oder einzeln (mit border-top-left-radius etc.). Angabe z.B. in px.
float Verhalten des Textflusses um das Objekt. Das Objekt muss in der HTML-Datei immer vor dem Text stehen. left, right, none.