CSS [KSR Wiki]

Ziel: Website von vorherigem Auftrag mithilfe von CSS stylen.

Mit HTML erstellen wir den Inhalt für unsere Webseite. Damit diese aber auch ansprechend dargestellt wird, formatieren wir sie mittels Cascading Style Sheets (CSS). Das Zusammenspiel zwischen HTML und CSS wird in den folgenden Grafiken visualisiert:

Einbindung von CSS in HTML

Das CSS wird in einer separaten Datei (zum Beispiel style.css) gespeichert. Um unsere Webseite zu formatieren, verweisen wir im head der HTML-Datei wie folgt darauf:

<html>
  <head>
    <title>Titel</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  ...
</html>

Die Trennung von Formatierung und Inhalten ermöglicht es, dasselbe Format und den gleichen Stil auf viele verschiedene Seiten anzuwenden. Beispielsweise muss eine Zeitungs-Website ihr Format nur einmal definieren (und der Browser es nur einmal herunterladen), und es wird dann auf jeden Artikel angewendet.

Selektoren und Formatierungsregeln

Jede CSS-Regel besteht aus zwei Teilen:

dem Selektor - er bestimmt, für welche Elemente die Regel gilt, und
den Formatierungsregeln - diese definieren, wie die gewählten Elemente aussehen sollen und ist von Form: <Attribut>:<Wert>

Der einfachste Selektor besteht einfach aus dem HTML-Element (also dem Tag-Namen). Es gibt noch andere Selektoren, auf die wir hier nicht eingehen. Nach dem Selektor folgen geschweifte Klammern, die die Formatierungseigenschaften enthalten. Jede Eigenschaft wird gefolgt von einem Doppelpunkt, dem gewünschten Wert, und einem Semikolon.

Beispiel 1

Mit <strong>...</strong> können wir Text hervorheben, indem wir diesen fett erscheinen lassen. Nun wollen wir, dass dieser Text zusätzlich einen roten Hintergrund hat. Dazu fügen wir folgende CSS-Regel hinzu:

strong {
  background-color: red;
}

Nach einem Reload zeigt unsere Webseite nun <strong> Elemente mit rotem Hintergrund an.

Beispiel 2

Eine etwas ausgereiftere CSS-Datei könnte wie folgt aussehen:

body {
  background-color: lightgrey;
  font-family: sans-serif;
}
h3 {
  font-size: 5mm;
  color: darkgrey;
}
strong {
  background-color: red;
  padding: 1mm;
  border: 1px dashed black;
}

Wird diese in eine HTML-Datei eingebunden, sieht diese wie folgt aus:

My first paragraph, it's so strong!

Wichtigste CSS-Eigenschaften

Attribut	Bedeutung	Werte	Weiterführende Infos
`color`	Textfarbe	`red`, `rgb(30%, 50%, 100%)`	Farben auf SelfHTML
`font-family`	Schriftart	`sans-serif`, `monospace`	Schriftformatierung auf SelfHTML
`font-size`	Schriftgrösse	`1cm`, `10px`	Grössenangaben auf SelfHTML
`font-weight`	Schriftstil	`bold`, `italic`
`text-align`	Ausrichtung	`start`, `end`
`background-color`	Hintergrundfarbe
`background-image`	Hintergrundbild	`url("tigerente.jpg")`

Abstände & Ränder

Jedes Element ist von drei Umrandungen umgeben:

padding: der Innenabstand zwischen Inhalt und border, mit Hintergrundfarbe eingefärbt.
border: der Rahmen zwischen padding und margin, mit eigener Farbe und Stil.
margin: der Aussenabstand zu den benachbarten Elementen, transparent.
- Bei aneinanderstossenden Elementen überlappen sich die Margins, d.h. der Abstand entspricht dem jeweils grösseren.

Margin & Padding

Beide Abstandsbreiten können einzeln mit margin-left, margin-right, margin-top und margin-bottom (bzw. padding-left…) gesetzt werden. Alternativ dazu kann ein einziger Wert für alle Seiten mit margin: 1cm gesetzt werden. Werden nur zwei Werte angegeben, so ist der erste Wert für die vertikale Richtung (also oben und unten), der zweite für die horizontale.

Mehr Informationen selfhtml.

Horizontale Zentrierung

Ein Element (beispielsweise der ganze body) lässt sich einfach horizontal zentrieren, indem die Breite auf eine bestimmte Grösse gesetzt wird, und die margin links und rechts auf den Wert auto gesetzt wird:

body {
  max-width: 10cm;    /* Body soll nicht breiter als 10cm sein. */
  margin: 5mm auto;   /* Oben und unten 5mm Rand, die Seiten immer gleich breit. */
}

Verändere die Breite des Fensters und schau, was passiert!

Border

Für die border funktioniert die Einstellung etwas anders, da neben der Breite auch noch der Stil gesetzt werden kann. Am einfachsten werden alle Angaben zu Breite, Stil und Farbe kombiniert:

  border: 5mm solid darkblue;

Mehr Informationen selfhtml.

Grössenangaben

Die Geräte, die unsere Webseite anzeigen sollen, sind sehr unterschiedlich gross: ein Mobiltelefon ist vielleicht 8 oder 10cm breit, auf dem Projektor stehen mehrere Meter zur Verfügung. Deshalb werden auch vermeintlich absolute Grössen wie cm oder mm vom Browser nicht so absolut interpretiert. Oft ist es ohnehin besser, stattdessen mit einem Mass zu arbeiten, dass sich auf die Schriftgrösse des Elements bezieht:

1em ist ungefähr die Grösse des Buchstabens M, je nach Schriftgrösse des Elements.
1lh entspricht der Zeilenhöhe.

Für grössere Layouts können wir mit Grössenangaben relativ zur Grösse des Browserfensters arbeiten:

1vw ist ein Prozent der Breite des Browserfensters.
1vh ist ein Prozent der Höhe des Browserfensters.

Mehr zu Grössenangaben.

Erweiterte Selektoren

Bisher haben wir CSS-Regeln für alle gleichen Elemente geschrieben. Die Selektoren können aber noch nach weiteren Kriterien entscheiden, ob eine Regel für ein Element gilt:

Das class Attribut

Ein HTML-Element kann deklarieren, dass es zu einer Klasse gehört, mit dem class-Attribut. Ein Selektor aus dem Punkt und dem Klassenamen wählt alle Elemente dieser Klasse aus:

<p class="green">Ein grüner Abschnitt.</p>
<p class="red">Ein roter Abschnitt.</p>

.green {
    background-color: green;
}
.red {
    background-color: red;
}

Ein grüner Abschnitt.

Ein roter Abschnitt.

Ein Element kann auch mehreren Klassen angehören; zudem können wir den Element-Selektor und den Klassenselektor kombinieren:

<p class="green rounded">Ein grüner Abschnitt mit Padding.</p>
<div class="red rounded">Ein roter Abschnitt mit Padding links rechts.</div>

p.rounded {
    padding: 1em;
    border-radius: 0.5em;
}
div.rounded {
    padding: 0 2em;
    border-radius: 0.5em;
}
.green {
    background-color: green;
}
.red {
    background-color: red;
}

Ein grüner Abschnitt mit Padding.

Ein roter Abschnitt mit Padding links rechts.

Das id Attribut

Ein HTML-Element kann eine Identität deklarieren mit dem id-Attribut. Ein Selektor aus dem Hashtag (#) und der Identität wählt dieses Element aus:

<p id="theoneandonly">Der eine, wichtige Abschnitt.</p>
<p>Ein ganz anderer Abschnitt.</p>

p#theoneandonly {
  padding: 0.5em;
  background-color: red;
  border: 2px dashed black;
}

Der eine, wichtige Abschnitt.

Ein ganz anderer Abschnitt.

Weitere Selektoren

Weitere Selektoren können Element auswählen, die innerhalb eines anderen bestimmten Elements sind (z.B. alle <img>-Elemente innerhalb einer <ol>-Liste), und vieles mehr. Selfhtml hat die ganze Auswahl.

Mobilgeräte und Viewport

Mobilgeräte sind viel kleiner als ein Computerbildschirm. Um trotzdem die ganze Webseite zu zeigen, verkleinern die meisten Mobilgeräte die Seite, aber um den Text lesen zu können, muss sie anschliessend gezoomt werden.

Um dies zu verhindern, kann eine Viewportangabe in den head eingefügt werden:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Weiterführende Links

Die Website SelfHTML bietet sowohl eine Einführung in CSS als auch ein Nachschlagewerk für die tausenden von Eigenschaften, Layouts, und Tricks.

CSS