Für das Erstellen von Websites sind die ver­schie­dens­ten CSS-Befehle notwendig. Wir bieten einen Überblick über wichtige und häufig ver­wen­de­te CSS-Befehle, ergänzt mit einigen kurzen, an­pass­ba­ren Bei­spie­len für die Webdesign-Praxis.

CSS-Befehle: Große Vielfalt mit CSS 3

Ging es an­fäng­lich darum, mit CSS-Befehlen Schrift­ar­ten und -farben fest­zu­le­gen, Tabellen schöner zu machen oder Elemente von einem Text umfließen zu lassen, haben sich die Mög­lich­kei­ten stark erweitert. Heute lassen sich Farb­ver­läu­fe erzeugen, Bilder frei­stel­len, Schatten und Rundungen erzeugen, Ani­ma­tio­nen einsetzen – alles mit CSS-Befehlen.

Hinweis

Ohne Cascading Style Sheets (CSS) geht beim Aufbau von Webseiten heut­zu­ta­ge nichts mehr. Was CSS ist und wie Sie CSS in HTML einbinden, wird aus­führ­lich in den ver­link­ten Guides dar­ge­stellt. Ein­stei­gern sei der Ratgeber CSS lernen leicht gemacht empfohlen. Schauen Sie auch in unsere CSS-Tricks mit weiteren Snippets für spezielle CSS-Lösungen.

Ein CSS-Befehl, auch CSS-Regel genannt, ist wie folgt aufgebaut:

Selektor öffnende Klammer Ei­gen­schaft Ei­gen­schafts-Wert schlie­ßen­de Klammer
p { color: navy; }

Ei­gen­schaft und Ei­gen­schafts-Wert bilden gemeinsam die so­ge­nann­te De­kla­ra­ti­on.

Wer CSS schreibt, sollte stets im Hin­ter­kopf behalten, dass trotz vieler Ver­bes­se­run­gen und An­glei­chun­gen nicht alle Browser alles „verstehen“. Dafür gibt es im CSS die so­ge­nann­ten Browser-Präfixe, mit denen die Befehle die Browser-Engines dezidiert an­spre­chen. Diese Präfixe lauten:

  • -moz-: für Firefox
  • -ms-: für den Internet Explorer
  • -khtml-: für Konqueror
  • -o-: für alte Opera-Versionen
  • -webkit-: für Safari, Chrome, neue Opera-Versionen

Ein einfaches Beispiel:

.box {
	-moz-border-radius: 10px; /* Anweisung für Firefox */
	border-radius: 10px;
}

Auf der Webseite CANIUSE lässt sich die Ver­träg­lich­keit von CSS-Befehlen mit allen gängigen Browsern kostenlos prüfen.

Tipp

Alle Angaben im CSS zwischen /* … */ werden vom Browser nicht aus­ge­führt. Damit können sowohl Kom­men­ta­re platziert als auch CSS-Befehle für Test­zwe­cke einfach „aus­ge­blen­det“ werden, ohne löschen und neu schreiben zu müssen.

Für die re­spon­si­ve Ge­stal­tung von Websites sind u. a. die CSS Flexbox, das CSS Grid und die Media-Queries hin­zu­ge­kom­men, die mit neuen CSS-Befehlen helfen, das Prinzip „Mobile First“ um­zu­set­zen.

Farben im CSS

Die Welt der Farben im Internet beruht auf dem RGB-Farbraum. Für die Fest­le­gung der Farben gibt es CSS-Befehle für einzelne Be­stand­tei­le einer Website. Fast jedes Element lässt sich mit einer Farbe oder sogar einem Farb­ver­lauf versehen.

Hinweis

Die Klassen- und ID-Namen in CSS-Befehlen sind „case sensitive“, reagieren also auf Groß- und Klein­schrei­bung. Es ist also ein Un­ter­schied, ob die Anweisung für eine ID als „#GELB { … }“ oder „#gelb { … }“ ge­schrie­ben wird. Sie muss dann im HTML-Element genauso verwendet werden.

Mög­lich­kei­ten zur Angabe der Farbwerte

  • Hexcode: #63f0ac
  • Farbnamen: red, green, blue, coral, white, black …
  • RGB: rgb(238,130,238) und RGB-Trans­pa­renz mit rgba(238,130,238, 0.7)
  • HSL mit Trans­pa­renz: hsla(140,20%,50%,0.5)
    • Hue (Farbton) von 0 bis 360 Grad auf dem Farbkreis
    • Sa­tu­ra­ti­on (Sättigung): von 0 % farblos bis 100 % höchste Farb­stär­ke
    • Lightness (Hel­lig­keit): von 0 % als Schwarz bis 100 % als Weiß
    • nu­me­ri­scher Trans­pa­renz-Wert bis 1.0 = volle Farb­de­ckung

Beispiele für die Fest­le­gung von Farben für HMTL-Elemente

Für die Schrift­far­be wird die Ei­gen­schaft color verwendet:

p { color: red; } /* ein Absatz in Rot */
div { color: #ffc3dd; } /* DIV-Container mit Schrift in hellem Rosa */
h1 { color: rgba(220,0,218,0.85); } /* Überschrift im kräftigem Violett mit Transparenz 85 % */

Auch Farb­ver­läu­fe sind möglich

Was früher mit Bild­da­tei­en erzeugt werden musste, geht heute ganz einfach per CSS-Befehl: Farb­ver­läu­fe. Dazu dient die Anweisung back­ground-image: gradient oder in Kurzform back­ground: gradient. Der gradient re­prä­sen­tiert einen Wert für ein Bild ohne Maße und erzeugt einen Farb­ver­lauf, der an de­fi­nier­ten Stellen verändert werden kann.

CSS-Befehl Be­schrei­bung mögliche Werte
linear-gradient linearer Verlauf von einer Farbe zur anderen oder mit mehreren Farben to-top, to-right, 45deg (beliebige Win­kel­an­ga­be), Farben mit % als Stopp-/Über­gangs­punk­te
radial-gradient kreis­för­mi­ger Verlauf von einer Farbe zur anderen circle, ellipse mit Pi­xel­wer­ten und Farben
conic-gradient konisch an­ge­ord­ne­ter Wechsel von einer Farbe zu anderen Farben mit %-Werten und Start­win­kel als Zahl

Die Tabelle zeigt nur einen Teil der möglichen Attribute. Als Farb­an­ga­ben können alle gängigen Werte verwendet werden, ein­schließ­lich der Farbwerte mit Trans­pa­renz.

Die Schreib­wei­se als kom­plet­ter CSS-Befehl lautet bei­spiels­wei­se:

.box { background-image: linear-gradient(to top, white 0%, black 50%); }

CSS-Befehle für Schriften

Mit dem CSS-Befehl font lassen sich die sechs Ei­gen­schaf­ten einer ver­wen­de­ten Schrift auf einen Schlag verändern.

p { font: italic small-caps 700 1.2em/1.5em Arial, Helvetica, sans-serif; }

Diese zu­sam­men­ge­fass­te CSS-Anweisung lässt sich einzeln auflösen, und zwar in der Rei­hen­fol­ge der Angaben:

CSS-Befehl Be­schrei­bung Mögliche Werte
font-style Schrift­la­ge normal, italic, oblique
font-variant Schrift­va­ri­an­te normal, small-caps
font-weight Dicke der Buch­sta­ben normal (= 400), bold, bolder, lighter, 100 bis 900 (in 100-er Schritten)
font-size / line-height Schrift­grö­ße Angaben in px, %, em, rem, vw, vh
font-family Schrift­art Schrift­ar­ten je nach Be­triebs­sys­tem, Browser oder zu­sätz­lich in­stal­lier­ten Er­wei­te­run­gen

Die Fest­le­gung der font-family für den Body der Website wird auf alle darunter liegenden An­wei­sun­gen vererbt. Die Schrift­far­be wird nicht mit einer font-Anweisung, sondern mit color:Farb­an­ga­be; fest­ge­legt.

Tipp

Be­zeich­nun­gen von Schrift­ar­ten mit Leer­zei­chen sollten im CSS-Befehl mit einfachen oder doppelten Hoch­kom­mas um­schlos­sen werden, z. B. font-familiy: "Lobster Two".

Wei­ter­ge­hen­de In­for­ma­tio­nen über die zu ver­wen­den­den Maß­ein­hei­ten für font-size entnehmen Sie dem Ratgeber Ty­po­gra­fie im Re­spon­si­ve Webdesign.

CSS-Befehle für die Text­ge­stal­tung

Neben der Schrift­art, ihrer Farbe und Größe sind weitere ty­po­gra­fi­sche Fein­hei­ten für die Les­bar­keit einer Website wichtig. Dazu zählen:

CSS-Befehl Be­schrei­bung Mögliche Werte
text-align Text­aus­rich­tung left, right, center, justify (Blocksatz)
text-de­co­ra­ti­on Text­ge­stal­tung underline, overline, line-through
word-spacing Wort­ab­stand nu­me­ri­scher Wert in pt (Punkt) mm, cm, px, em, rem
letter-spacing Zei­chen­ab­stand nu­me­ri­scher Wert in pt (Punkt) mm, cm, px, em, rem
text-indent Ein­rü­ckung 1. Zeile nu­me­ri­scher Wert in pt (Punkt) mm, cm, px, em, rem
text-transform Textart ca­pi­ta­li­ze, uppercase, lowercase, none

CSS-Befehle für Linien und Rahmen

Um Rahmen zu gestalten, wird das CSS-Element border ein­ge­setzt, in dem – ähnlich wie bei font – mehrere Ei­gen­schaf­ten zu­sam­men­ge­fasst sind.

Beispiel: Ein Bild – mit dem HTML-Tag img – wird mit einer 5 Pixel starken Linie in Navy-Blau umgeben. Die Kurz­schreib­wei­se lautet:

img { border: 5px solid #000080; }

Auch dieser CSS-Befehl lässt sich wie folgt auflösen:

CSS-Befehl Be­schrei­bung Mögliche Werte
border-width Li­ni­en­di­cke px, mm, in, em, rem
border-style Linienart none, hidden, dotted, dashed, double, groove, ridge, inset, outset
border-color Li­ni­en­far­be siehe Abschnitt zu Farben

Linien entlang der einzelnen Kanten eines Bildes oder Rechtecks werden mit border-top, border-right, border-bottom und border-left einzeln mit den gleichen At­tri­bu­ten wie in der Kurz­schreib­wei­se bei border platziert.

CSS-Befehle, um Abstände zu de­fi­nie­ren

Es gibt zwei Arten von Abständen:

  • padding als der innere Abstand des Inhalts zum um­ge­ben­den Element
  • margin als der äußere Abstand eines Elements zum nächsten

Der In­nen­ab­stand

Mit padding (dt.: „Pols­te­rung“) wird der Abstand von einem Textblock oder Bild zum um­ge­ben­den Rahmen fest­ge­legt. Es gibt die Kurzform und de­fi­nier­te Angaben für alle Seiten eines Content-Blocks.

CSS-Befehl Be­schrei­bung Mögliche Werte
padding: 1px all­ge­mei­ner In­nen­ab­stand px, em, mm, in, pt, pc, %
padding: 1em 2.5em; In­nen­ab­stand oben & unten (1. Wert), links & rechts (2. Wert) px, em, mm, in, pt, pc, %
padding: 5px 2px 4px; In­nen­ab­stand oben (1. Wert), links & rechts (2. Wert), unten (3. Wert) px, em, mm, in, pt, pc, %
padding-top: 1mm; In­nen­ab­stand nach oben px, em, mm, in, pt, pc, %
padding-right: 1pc; In­nen­ab­stand nach rechts px, em, mm, in, pt, pc, %
padding-bottom: 3pt; In­nen­ab­stand nach unten px, em, mm, in, pt, pc, %
padding-left: 2in; In­nen­ab­stand nach links px, em, mm, in, pt, pc, %

Wenn in der Kurzform padding alle vier Po­si­tio­nen mit Werten besetzt sind, wird von oben beginnend im Uhr­zei­ger­sinn vor­ge­gan­gen, also in der Schreib­wei­se:

p { padding: 5px 0 5px 0; } /* oben und unten 5 Pixel, rechts und links kein Innenabstand */

Der Au­ßen­ab­stand

Der CSS-Befehl margin (dt.: „Spanne“) legt fest, wie weit ein Layout-Element vom nächsten entfernt ist. Die Schreib­wei­se und Auf­zäh­lung einzelner Werte ist identisch mit padding.

CSS-Befehl Be­schrei­bung Mögliche Werte
margin: 5px; all­ge­mei­ner Au­ßen­ab­stand px, em, mm, in, pt, pc, %
margin: 2em 1.5em; Au­ßen­ab­stand oben & unten (1. Wert), links & rechts (2. Wert) px, em, mm, in, pt, pc, %
margin: 2px 10px 15px; Au­ßen­ab­stand oben (1. Wert), links & rechts (2. Wert), unten (3. Wert) px, em, mm, in, pt, pc, %
margin-top: 2pc; Au­ßen­ab­stand nach oben px, em, mm, in, pt, pc, %
margin-right: 5mm; Au­ßen­ab­stand nach rechts px, em, mm, in, pt, pc, %
margin-bottom: 7pt; Au­ßen­ab­stand nach unten px, em, mm, in, pt, pc, %
margin-left: 1in; Au­ßen­ab­stand nach links px, em, mm, in, pt, pc, %
Hinweis

Bei der Be­rech­nung der Elemente eines Layouts müssen alle Be­stand­tei­le ein­be­zo­gen werden –­ das heißt: die Breite des Textes bzw. Bildes (width) plus In­nen­ab­stand padding plus Li­ni­en­di­cke border-width plus Au­ßen­ab­stand margin.

CSS-Befehle für Links

Wenn Sie die Ge­stal­tung von Links im CSS festlegen, können Sie jeden Status eines Links gesondert designen. Neben dem normalen Aussehen legen Sie auch fest, wie ein Link beim Drü­ber­fah­ren mit der Maus, während des Klicks und beim Auswählen – etwa mit der Tab-Taste – dar­ge­stellt wird.

a:link   { background-color: black; color: white;}

In der Regel nimmt man Än­de­run­gen an diesen so­ge­nann­ten Pseu­do­klas­sen vor, um die Farbe von Verweisen zu ändern. Prin­zi­pi­ell lassen sich aber alle möglichen CSS-Befehle in diese Klassen einbinden.

CSS-Befehl Be­schrei­bung Mögliche Werte
a:link Link im Aus­gangs­zu­stand lässt sich mit CSS-Befehlen kom­bi­nie­ren
a:hover Link, wenn man mit dem Maus­zei­ger dar­über­fährt lässt sich mit CSS-Befehlen kom­bi­nie­ren
a:active Link, während man darauf klickt lässt sich mit CSS-Befehlen kom­bi­nie­ren
a:focus Aus­ge­wähl­ter Link – z. B. mit der Tab-Taste lässt sich mit CSS-Befehlen kom­bi­nie­ren
a:visited Link, nachdem dieser auf­ge­ru­fen wurde lässt sich mit CSS-Befehlen kom­bi­nie­ren

CSS-Befehle für Hin­ter­grün­de

Per CSS lässt sich auch der Website-Hin­ter­grund verändern. Das geht, indem man die Farbe festlegt oder etwa ein Bild einbaut. Wählt man ein Bild, kann man zudem weitere Merkmale de­fi­nie­ren.

CSS-Befehl Be­schrei­bung Mögliche Werte
back­ground-color Hin­ter­grund­far­be siehe Abschnitt zu Farben
back­ground-image Hin­ter­grund­bild URL
back­ground-at­tach­ment Bewegt sich der Hin­ter­grund beim Scrollen mit oder bleibt er fixiert? scroll, fixed
back­ground-clip Legt fest, für welchen Bereich die Hin­ter­grund­ei­gen­schaf­ten gelten padding-box, corner-box, content-box
back­ground-position Aus­rich­tung des Hin­ter­grund­bil­des top, center, bottom / left, center, right
back­ground-repeat Wenn das Bild kleiner als der Hin­ter­grund ist, kann man es wie­der­ho­len lassen. repeat, repeat-x (ho­ri­zon­tal), repeat-y (vertikal), space (Wie­der­ho­lung ohne Be­schnei­dung), round (Wie­der­ho­lung mit Ska­lie­rung)

Hierbei handelt es sich um De­tail­be­feh­le. Diese lassen sich auch unter dem Ober­be­fehl back­ground ver­schach­teln:

background: white url("http://example.org/image.png")
    repeat-x

Hier sind die Befehle back­ground-color, back­ground-image und back­ground-repeat in­te­griert.

Tipp

In unserem Ratgeber erfahren Sie, wie Sie unter Windows 11 diese In­ter­net­sei­te an die Task­leis­te anheften. So haben Sie jederzeit schnellen Zugriff auf den Überblick aller CSS-Befehle.

Zum Hauptmenü