MINT lernen

CSS: Gestalten mit Regeln

Dieselbe HTML-Datei kann schlicht oder bunt aussehen — was entscheidet darüber, und wie viel Platz braucht ein Kasten wirklich?

1

Regeln: Selektor, Eigenschaft, Wert

CSS (Cascading Style Sheets) legt fest, wie die HTML-Elemente aussehen. Eine Regel wählt Elemente aus und gibt ihnen Eigenschaften.

h1 {
  color: #2c5fb5;
  font-size: 32px;
}
.hinweis {
  background: #fbf3d6;
}
#start {
  border: 2px solid black;
}
  • Selektor:wählt aus, welche Elemente die Regel betrifft.
  • Element-Selektor:h1 trifft alle <h1>-Elemente.
  • Klassen-Selektor:.hinweis trifft alle Elemente mit class="hinweis" — beliebig viele.
  • ID-Selektor:#start trifft das eine Element mit id="start".
  • Deklaration:eigenschaft: wert; — Doppelpunkt dazwischen, Semikolon am Ende.
  • Einbinden:am besten als eigene Datei im head: <link rel="stylesheet" href="style.css">.
2

Das Box-Modell

Für CSS ist jedes Element ein rechteckiger Kasten aus vier Schichten — von innen nach außen:

  • content:der Inhalt; seine Breite setzt width.
  • padding:Innenabstand zwischen Inhalt und Rahmen; hat die Hintergrundfarbe des Elements.
  • border:der Rahmen, z. B. border: 4px solid black;
  • margin:Außenabstand zu den Nachbarn; immer durchsichtig.
  • Beidseitig:padding: 20px; wirkt links und rechts — in der Breite also doppelt.

Herleitung:

\(B = \text{padding}_{\text{links}} + \text{width} + \text{padding}_{\text{rechts}} + \text{border}_{\text{links}} + \text{border}_{\text{rechts}}\)
| ansetzen

Von links nach rechts über den sichtbaren Kasten gehen: Rahmen, Innenabstand, Inhalt, Innenabstand, Rahmen.

\(B = \text{width} + 2\cdot\text{padding} + 2\cdot\text{border}\)
| zusammenfassen

Gleiche Werte auf beiden Seiten zusammenfassen. Mit Außenabstand braucht der Kasten zusätzlich \(2\cdot\text{margin}\) Platz.

Lege das Lineal an: Ziehe die beiden Enden (oder wähle sie mit Tab und schiebe mit den Pfeiltasten) an die Außenkanten des Rahmens und lies die Breite ab. Prüfe danach mit der Rechnung.

Box-Modell vermessen


    

    

    

    

  




Halte fest: Die sichtbare Breite ist width plus zweimal padding plus zweimal border; margin kommt beim Platzbedarf noch zweimal dazu.



Merke

\(B = \text{width} + 2\cdot\text{padding} + 2\cdot\text{border}\)









3
Allgemeine Hinweise




Semikolon und Klammern
Fehlt ein ;, wird oft die nächste Zeile ignoriert. CSS meldet keinen Fehler — die Regel wirkt einfach nicht.


Klasse statt ID
Für Gestaltung meist class verwenden: Eine Klasse kann an vielen Elementen stehen, eine ID nur an einem.


Im Browser nachmessen
Rechtsklick → „Untersuchen“ zeigt zu jedem Element das Box-Modell mit Zahlen für margin, border, padding und Inhalt.







Videos