Florence Maurice

Kurzschreibweisen in CSS - Tipps für Einsteiger

Geschrieben am: 25.8.2023

In CSS existieren mehrere Kurzschreibweisen, so lassen sich mit einer Eigenschaft gleich mehrere Werte steuern. Das ist praktisch, allerdings gibt es einiges zu beachten.

So kann man beispielsweise statt:

.el {
  border-width: 1px;
  border-color: blue;
  border-style: solid
}

... auch kürzer schreiben:

.el {
  border: 1px solid blue;
}

Oder man könnte genauso auch schreiben:

.el {
  border: solid blue 1px;
}

Das heißt, in diesem Fall ist die Reihenfolge nicht wichtig (das ist nicht bei allen Kurzschreibweisen so). Und man muss auch nicht alle Werte angeben - wenn man welche weglässt, werden die Standardwerte genommen.

.el {
  border: solid 1px;
}

Das erzeugt einen 1px-breiten Rahmen in der aktuellen Schriftfarbe. Allerdings ist es wichtig, bei border den Rahmenstil (im Beispiel solid) zu schreiben, da der Standardrahmenstil none ist. Deswegen erzeugt das Folgende keinen Rahmen:

.el {
  border: blue 1px;
}

Bei solchen verkürzten Schreibweisen kann man über die Entwicklertools der Browser sehr schön herausfinden, wofür sie eigentlich stehen. Um die Browser-Entwicklertools aufzurufen, klickt man mit der rechten Maustaste in ein Dokument und wählt 'Untersuchen'. Dann sieht man links die HTML-Elemente, klickt das gewünschte an und erhält rechts die dazugehörigen Formatierungen. Bei Kurzschreibweisen sieht das z.B. so im Firefox aus:

Wenn man auf den kleinen Pfeil klickt, sieht man die einzelnen Eigenschaften.

Und da sieht man beispielsweise auch, warum man bei border den Rahmenstil angeben muss, weil dieser sonst none ist: