# 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](https://www.ionos.at/digitalguide/websites/webdesign/was-ist-css/ "Was ist CSS?") und wie Sie [CSS in HTML einbinden](https://www.ionos.at/digitalguide/websites/webdesign/css-in-html-einbinden/ "CSS in HTML einbinden"), wird ausführlich in den verlinkten Guides dargestellt. Einsteigern sei der Ratgeber [CSS lernen leicht gemacht](https://www.ionos.at/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/ "CSS-Lernen leicht gemacht") empfohlen. Schauen Sie auch in unsere [CSS-Tricks](https://www.ionos.at/digitalguide/websites/webdesign/css-tricks-die-sie-unbedingt-kennen-sollten/ "CSS-Tricks, die Sie unbedingt kennen sollten") mit weiteren Snippets für spezielle CSS-Lösungen.

---

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

<table>
  <thead>
    <tr>
      <th>Selektor</th>
      <th>öffnende Klammer</th>
      <th>Eigenschaft</th>
      <th>Eigenschafts-Wert</th>
      <th>schließende Klammer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>p</td>
      <td>{</td>
      <td>color:</td>
      <td>navy;</td>
      <td>}</td>
    </tr>
  </tbody>
</table>

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:

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

Auf der Webseite [CANIUSE](https://caniuse.com/ "Support tables for HTML5, CSS3, etc") 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](https://www.ionos.at/digitalguide/websites/webseiten-erstellen/css-flexbox/ "CSS Flexbox"), das [CSS Grid](https://www.ionos.at/digitalguide/websites/webseiten-erstellen/css-grid/ "CSS Grid") und die [Media-Queries](https://www.ionos.at/digitalguide/websites/webdesign/css-media-queries/ "CSS 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](https://www.ionos.at/digitalguide/websites/webdesign/rgb-farben/ "RGB-Farben"). 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:

```none
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.

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

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:

```none
.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.

```none
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:

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

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](https://www.ionos.at/digitalguide/websites/webdesign/responsive-webdesign-und-schrift-css-befehle/ "Responsive Webdesign und Schrift: CSS-Befehle").

## 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:

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

## 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:

```none
img { border: 5px solid #000080; }
```

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

<table>
  <thead>
    <tr>
      <th>CSS-Befehl</th>
      <th>Beschreibung</th>
      <th>Mögliche Werte</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>border-width</td>
      <td>Liniendicke</td>
      <td>px, mm, in, em, rem</td>
    </tr>
    <tr>
      <td>border-style</td>
      <td>Linienart</td>
      <td>none, hidden, dotted, dashed, double, groove, ridge, inset, outset</td>
    </tr>
    <tr>
      <td>border-color</td>
      <td>Linienfarbe</td>
      <td>siehe Abschnitt zu Farben</td>
    </tr>
  </tbody>
</table>

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.

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

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

```none
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*.

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

---

### 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.

```none
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.

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

## CSS-Befehle für Hintergründe

Per CSS lässt sich auch der [Website-Hintergrund](https://www.ionos.at/digitalguide/websites/webseiten-erstellen/der-perfekte-website-hintergrund/ "Der perfekte 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.

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

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

```none
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](https://www.ionos.at/digitalguide/server/konfiguration/windows-11-website-an-taskleiste/ "Windows 11: Website an Taskleiste"). So haben Sie jederzeit schnellen Zugriff auf den Überblick aller CSS-Befehle.

---


This is a markdown version of: [https://www.ionos.at/digitalguide/websites/webdesign/css-befehle/](https://www.ionos.at/digitalguide/websites/webdesign/css-befehle/) for AI/LLM consumption.