Ü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

<

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.
float Verhalten des Textflusses um das Objekt. Das Objekt muss in der HTML-Datei immer vor dem Text stehen. left, right, none.