CSS-Befehle: Häufig verwendete Anweisungen

Für das Erstellen von Websites sind die verschiedensten CSS-Befehle notwendig. Wir bieten einen Überblick über wichtige und häufig verwendete CSS-Befehle, ergänzt mit einigen kurzen, anpassbaren Beispielen für die Webdesign-Praxis.

CSS-Befehle: Große Vielfalt mit CSS 3

Ging es anfänglich darum, mit CSS-Befehlen Schriftarten und -farben festzulegen, Tabellen schöner zu machen oder Elemente von einem Text umfließen zu lassen, haben sich die Möglichkeiten stark erweitert. Heute lassen sich Farbverläufe erzeugen, Bilder freistellen, Schatten und Rundungen erzeugen, Animationen einsetzen – alles mit CSS-Befehlen.

Hinweis

Ohne Cascading Style Sheets (CSS) geht beim Aufbau von Webseiten heutzutage nichts mehr. Was CSS ist und wie Sie CSS in HTML einbinden, wird ausführlich in den verlinkten Guides dargestellt. Einsteigern 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 Eigenschaft Eigenschafts-Wert schließende Klammer
p { color: navy; }

Eigenschaft und Eigenschafts-Wert bilden gemeinsam die sogenannte Deklaration.

Wer CSS schreibt, sollte stets im Hinterkopf behalten, dass trotz vieler Verbesserungen und Angleichungen nicht alle Browser alles „verstehen“. Dafür gibt es im CSS die sogenannten Browser-Präfixe, mit denen die Befehle die Browser-Engines dezidiert ansprechen. 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 Verträglichkeit von CSS-Befehlen mit allen gängigen Browsern kostenlos prüfen.

Tipp

Alle Angaben im CSS zwischen /* … */ werden vom Browser nicht ausgeführt. Damit können sowohl Kommentare platziert als auch CSS-Befehle für Testzwecke einfach „ausgeblendet“ werden, ohne löschen und neu schreiben zu müssen.

Für die responsive Gestaltung von Websites sind u. a. die CSS Flexbox, das CSS Grid und die Media-Queries hinzugekommen, die mit neuen CSS-Befehlen helfen, das Prinzip „Mobile First“ umzusetzen.

Farben im CSS

Die Welt der Farben im Internet beruht auf dem RGB-Farbraum. Für die Festlegung der Farben gibt es CSS-Befehle für einzelne Bestandteile einer Website. Fast jedes Element lässt sich mit einer Farbe oder sogar einem Farbverlauf versehen.

Hinweis

Die Klassen- und ID-Namen in CSS-Befehlen sind „case sensitive“, reagieren also auf Groß- und Kleinschreibung. Es ist also ein Unterschied, ob die Anweisung für eine ID als „#GELB { … }“ oder „#gelb { … }“ geschrieben wird. Sie muss dann im HTML-Element genauso verwendet werden.

Möglichkeiten zur Angabe der Farbwerte

  • Hexcode: #63f0ac
  • Farbnamen: red, green, blue, coral, white, black …
  • RGB: rgb(238,130,238) und RGB-Transparenz mit rgba(238,130,238, 0.7)
  • HSL mit Transparenz: hsla(140,20%,50%,0.5)
    • Hue (Farbton) von 0 bis 360 Grad auf dem Farbkreis
    • Saturation (Sättigung): von 0 % farblos bis 100 % höchste Farbstärke
    • Lightness (Helligkeit): von 0 % als Schwarz bis 100 % als Weiß
    • numerischer Transparenz-Wert bis 1.0 = volle Farbdeckung

Beispiele für die Festlegung von Farben für HMTL-Elemente

Für die Schriftfarbe wird die Eigenschaft 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 Farbverläufe sind möglich

Was früher mit Bilddateien erzeugt werden musste, geht heute ganz einfach per CSS-Befehl: Farbverläufe. Dazu dient die Anweisung background-image: gradient oder in Kurzform background: gradient. Der gradient repräsentiert einen Wert für ein Bild ohne Maße und erzeugt einen Farbverlauf, der an definierten Stellen verändert werden kann.

CSS-Befehl Beschreibung mögliche Werte
linear-gradient linearer Verlauf von einer Farbe zur anderen oder mit mehreren Farben to-top, to-right, 45deg (beliebige Winkelangabe), Farben mit % als Stopp-/Übergangspunkte
radial-gradient kreisförmiger Verlauf von einer Farbe zur anderen circle, ellipse mit Pixelwerten und Farben
conic-gradient konisch angeordneter Wechsel von einer Farbe zu anderen Farben mit %-Werten und Startwinkel als Zahl

Die Tabelle zeigt nur einen Teil der möglichen Attribute. Als Farbangaben können alle gängigen Werte verwendet werden, einschließlich der Farbwerte mit Transparenz.

Die Schreibweise als kompletter CSS-Befehl lautet beispielsweise:

.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 Eigenschaften einer verwendeten Schrift auf einen Schlag verändern.

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

Diese zusammengefasste CSS-Anweisung lässt sich einzeln auflösen, und zwar in der Reihenfolge der Angaben:

CSS-Befehl Beschreibung Mögliche Werte
font-style Schriftlage normal, italic, oblique
font-variant Schriftvariante normal, small-caps
font-weight Dicke der Buchstaben normal (= 400), bold, bolder, lighter, 100 bis 900 (in 100-er Schritten)
font-size / line-height Schriftgröße Angaben in px, %, em, rem, vw, vh
font-family Schriftart Schriftarten je nach Betriebssystem, Browser oder zusätzlich installierten Erweiterungen

Die Festlegung der font-family für den Body der Website wird auf alle darunter liegenden Anweisungen vererbt. Die Schriftfarbe wird nicht mit einer font-Anweisung, sondern mit color:Farbangabe; festgelegt.

Tipp

Bezeichnungen von Schriftarten mit Leerzeichen sollten im CSS-Befehl mit einfachen oder doppelten Hochkommas umschlossen werden, z. B. font-familiy: "Lobster Two".

Weitergehende Informationen über die zu verwendenden Maßeinheiten für font-size entnehmen Sie dem Ratgeber Typografie im Responsive Webdesign.

CSS-Befehle für die Textgestaltung

Neben der Schriftart, ihrer Farbe und Größe sind weitere typografische Feinheiten für die Lesbarkeit einer Website wichtig. Dazu zählen:

CSS-Befehl Beschreibung Mögliche Werte
text-align Textausrichtung left, right, center, justify (Blocksatz)
text-decoration Textgestaltung underline, overline, line-through
word-spacing Wortabstand numerischer Wert in pt (Punkt) mm, cm, px, em, rem
letter-spacing Zeichenabstand numerischer Wert in pt (Punkt) mm, cm, px, em, rem
text-indent Einrückung 1. Zeile numerischer Wert in pt (Punkt) mm, cm, px, em, rem
text-transform Textart capitalize, uppercase, lowercase, none

CSS-Befehle für Linien und Rahmen

Um Rahmen zu gestalten, wird das CSS-Element border eingesetzt, in dem – ähnlich wie bei font – mehrere Eigenschaften zusammengefasst sind.

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

img { border: 5px solid #000080; }

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

CSS-Befehl Beschreibung Mögliche Werte
border-width Liniendicke px, mm, in, em, rem
border-style Linienart none, hidden, dotted, dashed, double, groove, ridge, inset, outset
border-color Linienfarbe 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 Attributen wie in der Kurzschreibweise bei border platziert.

CSS-Befehle, um Abstände zu definieren

Es gibt zwei Arten von Abständen:

  • padding als der innere Abstand des Inhalts zum umgebenden Element
  • margin als der äußere Abstand eines Elements zum nächsten

Der Innenabstand

Mit padding (dt.: „Polsterung“) wird der Abstand von einem Textblock oder Bild zum umgebenden Rahmen festgelegt. Es gibt die Kurzform und definierte Angaben für alle Seiten eines Content-Blocks.

CSS-Befehl Beschreibung Mögliche Werte
padding: 1px allgemeiner Innenabstand px, em, mm, in, pt, pc, %
padding: 1em 2.5em; Innenabstand oben & unten (1. Wert), links & rechts (2. Wert) px, em, mm, in, pt, pc, %
padding: 5px 2px 4px; Innenabstand oben (1. Wert), links & rechts (2. Wert), unten (3. Wert) px, em, mm, in, pt, pc, %
padding-top: 1mm; Innenabstand nach oben px, em, mm, in, pt, pc, %
padding-right: 1pc; Innenabstand nach rechts px, em, mm, in, pt, pc, %
padding-bottom: 3pt; Innenabstand nach unten px, em, mm, in, pt, pc, %
padding-left: 2in; Innenabstand nach links px, em, mm, in, pt, pc, %

Wenn in der Kurzform padding alle vier Positionen mit Werten besetzt sind, wird von oben beginnend im Uhrzeigersinn vorgegangen, also in der Schreibweise:

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

Der Außenabstand

Der CSS-Befehl margin (dt.: „Spanne“) legt fest, wie weit ein Layout-Element vom nächsten entfernt ist. Die Schreibweise und Aufzählung einzelner Werte ist identisch mit padding.

CSS-Befehl Beschreibung Mögliche Werte
margin: 5px; allgemeiner Außenabstand px, em, mm, in, pt, pc, %
margin: 2em 1.5em; Außenabstand oben & unten (1. Wert), links & rechts (2. Wert) px, em, mm, in, pt, pc, %
margin: 2px 10px 15px; Außenabstand oben (1. Wert), links & rechts (2. Wert), unten (3. Wert) px, em, mm, in, pt, pc, %
margin-top: 2pc; Außenabstand nach oben px, em, mm, in, pt, pc, %
margin-right: 5mm; Außenabstand nach rechts px, em, mm, in, pt, pc, %
margin-bottom: 7pt; Außenabstand nach unten px, em, mm, in, pt, pc, %
margin-left: 1in; Außenabstand nach links px, em, mm, in, pt, pc, %
Hinweis

Bei der Berechnung der Elemente eines Layouts müssen alle Bestandteile einbezogen werden –­ das heißt: die Breite des Textes bzw. Bildes (width) plus Innenabstand padding plus Liniendicke border-width plus Außenabstand margin.

CSS-Befehle für Links

Wenn Sie die Gestaltung 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überfahren mit der Maus, während des Klicks und beim Auswählen – etwa mit der Tab-Taste – dargestellt wird.

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

In der Regel nimmt man Änderungen an diesen sogenannten Pseudoklassen vor, um die Farbe von Verweisen zu ändern. Prinzipiell lassen sich aber alle möglichen CSS-Befehle in diese Klassen einbinden.

CSS-Befehl Beschreibung Mögliche Werte
a:link Link im Ausgangszustand lässt sich mit CSS-Befehlen kombinieren
a:hover Link, wenn man mit dem Mauszeiger darüberfährt lässt sich mit CSS-Befehlen kombinieren
a:active Link, während man darauf klickt lässt sich mit CSS-Befehlen kombinieren
a:focus Ausgewählter Link – z. B. mit der Tab-Taste lässt sich mit CSS-Befehlen kombinieren
a:visited Link, nachdem dieser aufgerufen wurde lässt sich mit CSS-Befehlen kombinieren

CSS-Befehle für Hintergründe

Per CSS lässt sich auch der Website-Hintergrund verändern. Das geht, indem man die Farbe festlegt oder etwa ein Bild einbaut. Wählt man ein Bild, kann man zudem weitere Merkmale definieren.

CSS-Befehl Beschreibung Mögliche Werte
background-color Hintergrundfarbe siehe Abschnitt zu Farben
background-image Hintergrundbild URL
background-attachment Bewegt sich der Hintergrund beim Scrollen mit oder bleibt er fixiert? scroll, fixed
background-clip Legt fest, für welchen Bereich die Hintergrundeigenschaften gelten padding-box, corner-box, content-box
background-position Ausrichtung des Hintergrundbildes top, center, bottom / left, center, right
background-repeat Wenn das Bild kleiner als der Hintergrund ist, kann man es wiederholen lassen. repeat, repeat-x (horizontal), repeat-y (vertikal), space (Wiederholung ohne Beschneidung), round (Wiederholung mit Skalierung)

Hierbei handelt es sich um Detailbefehle. Diese lassen sich auch unter dem Oberbefehl background verschachteln:

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

Hier sind die Befehle background-color, background-image und background-repeat integriert.

Tipp

In unserem Ratgeber erfahren Sie, wie Sie unter Windows 11 diese Internetseite an die Taskleiste anheften. So haben Sie jederzeit schnellen Zugriff auf den Überblick aller CSS-Befehle.

War dieser Artikel hilfreich?