Teil 2: Was ist dieses CSS überhaupt?
CSS ist an sich nicht wirklich schwer zu verstehen, die Sprache besteht eigentlich nur aus 2 Teilen:
- Identifizierung
- Eigenschaften
Identifizierung
Das hatten wir eben bei body{ max-width:900px; }
bereist gesehen. body ist hier die Identifizierung,
alle Elemente vom Typ body - davon gibt es, oh Wunder, genau eines: Das in dem fast alles andere
(außer der <head>
- dazu Später mehr)
drin ist. Die Standart-struktur einer HTML Datei ist ja bekannterweise wie folgt:
<html>
<head>
(Hierzu später mehr)
</head>
<body>
Inhalt!
</body>
</html>
Der CSS-block ist also für den Body-Tag, der mit “Inhalt!" drin.
Eigenschaften
Jetzt wo wir mit body{ }
den Seiten Container ausgewählt haben müssen wir noch überlegen was wir
änder wollen. Es gibt viele dinge die man ändern kann, darunter Farbe -> “color”,
Text-dekoration -> “text-decoration”,
Hintergrund -> “background” und so vieles mehr. Uns interessiert jetzt aber erst mal
die maximale Breite. Dank der Beispiele können wir raten (oder nachschauen) das es sich dabei um die “max-width”-Eigenschaft (maximale Breite auf Englisch) handelt.
Um die Eigenschaft zu setzten machen wir nun folgendes: In den body{ }
-Block schreiben wir unsere Eigenschaft rein, ungefähr so:
body{ max-width: }
und weisen ihr einen Wert zu, für lesbaren text sing 900 Pixel ganz ok, das sieht dann so wie am Anfang aus:
body{
max-width:900px;
}
Das Semikolon ist wichtig, es zu vergessen kann zu komisch aussehenden Dokumenten führen wenngleich es bei Blöcken mit nur einer Eigenschaft oder bei der Letzten im Block weggelassen werden kann.