HTML & CSS

CSS-Grundlagen: Selektoren und das Box-Modell

Selektoren bestimmen, welche Elemente du gestaltest, das Box-Modell legt fest, wie viel Platz sie einnehmen. Beide Konzepte sind das Fundament jeder CSS-Arbeit.

Anton

— 2 Min. Lesezeit
Teilen
CSS-Grundlagen: Selektoren und das Box-Modell

CSS ist die Sprache, mit der du HTML-Elemente gestaltest. Zwei Konzepte musst du dafür wirklich verstehen: Selektoren, um die richtigen Elemente auszuwählen, und das Box-Modell, das beschreibt, wie viel Raum ein Element einnimmt. Wenn du diese beiden Grundlagen beherrschst, fällt dir fast alles Weitere leichter. In diesem Beitrag schauen wir uns beide ausführlich an.

Was sind Selektoren?

Ein Selektor sagt dem Browser, welche Elemente eine bestimmte Regel betrifft. Die drei wichtigsten Arten sind der Element-, der Klassen- und der ID-Selektor:

/* Element-Selektor: alle Absätze */
p {
  color: #333;
}

/* Klassen-Selektor: alle Elemente mit class="hinweis" */
.hinweis {
  background-color: #fff8c4;
}

/* ID-Selektor: das Element mit id="kopf" */
#kopf {
  font-size: 2rem;
}

In der Praxis nutzt du am häufigsten Klassen, weil sie wiederverwendbar sind. IDs sollten einzigartig pro Seite bleiben.

Selektoren kombinieren

Selektoren lassen sich verketten, um gezielter auszuwählen. Mit einem Leerzeichen sprichst du Nachfahren an, mit einem Komma fasst du mehrere Selektoren zusammen:

/* Nur Links innerhalb der Navigation */
nav a {
  text-decoration: none;
}

/* Mehrere Elemente gleich gestalten */
h1, h2, h3 {
  font-family: sans-serif;
}

/* Elemente mit zwei Klassen */
.button.primaer {
  background-color: #0066cc;
  color: white;
}

Das Box-Modell verstehen

Jedes Element auf einer Webseite ist eine rechteckige Box. Diese Box besteht aus vier Schichten: dem eigentlichen Inhalt, dem padding (Innenabstand), dem border (Rahmen) und dem margin (Außenabstand). Von innen nach außen:

.box {
  width: 200px;          /* Breite des Inhalts */
  padding: 20px;         /* Innenabstand rundherum */
  border: 2px solid #333; /* Rahmen */
  margin: 16px;          /* Außenabstand zu Nachbarn */
}

Standardmäßig wird die angegebene width nur auf den Inhalt angewendet. Padding und Border kommen oben drauf. Das führt oft zu unerwartet breiten Boxen.

box-sizing: der praktische Helfer

Damit die width die gesamte Box inklusive Padding und Rahmen umfasst, setzt du box-sizing auf border-box. Das macht Layouts viel berechenbarer:

/* Empfohlene globale Einstellung */
* {
  box-sizing: border-box;
}

.karte {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  /* Die Box bleibt insgesamt 300px breit */
}

Viele Entwickler setzen diese Regel ganz oben in ihr Stylesheet. Sie erspart dir viel Kopfrechnen.

Padding und Margin gezielt einsetzen

Du kannst Abstände für jede Seite einzeln festlegen oder die Kurzschreibweise nutzen. Die Reihenfolge ist immer oben, rechts, unten, links:

/* Alle vier Seiten einzeln */
.element {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

/* Kurzschreibweise: oben/unten 10px, links/rechts 20px */
.element-kurz {
  margin: 10px 20px;
}

/* Horizontal zentrieren mit auto */
.zentriert {
  width: 600px;
  margin: 0 auto;
}

Fazit

Selektoren und das Box-Modell sind das Fundament jeder CSS-Arbeit. Mit Selektoren bestimmst du präzise, welche Elemente du gestaltest, und durch das Box-Modell verstehst du, wie sich Größen und Abstände zusammensetzen. Der Tipp mit box-sizing: border-box macht dir das Leben spürbar leichter. Wenn du diese Konzepte sicher beherrschst, kannst du anschließend mit Flexbox und Grid komplexe Layouts bauen. Übe an kleinen Beispielen und beobachte im Browser, wie sich Padding, Border und Margin auswirken.

Weiterlesen