Die HTML-Elemente können mittels sogenannter Stylesheets gestaltet werden. Dabei lassen sich Farben, Schriftarten, aber auch Rahmen und Positionen der Elemente anpassen.

Syntax

Mit CSS schreibt man Regeln. Diese bestehen aus 3 Komponenten:

Selektor {
    Eigenschaft: Wert;
    Eigenschaft: Wert;
    ...
    Eigenschaft: Wert;
}

Selektor

sagt für welche Elemente der Seite diese Regel gelten soll

Eigenschaften

legt fest welche Eigenschaften der gewählten Elemente angepasst werden soll

Werte

für jede Eigenschaft wird ein Wert festgelegt (z.B. Farbe, Länge, fester Wert, …)

Selektoren

Um Elemente auszuwählen stehen verschiedene Selektoren zur Verfügung. Die einfachsten sind:

Verschiedene Selektoren

Name	Muster	Bedeutung	Beispiel
Typselektor	E	Selektiert jedes Element vom Typ E	p { .. } selektiert jedes p-Element des HTML-Dokumentes
Klassenselektor	.c	Selektiert jedes Element der Klasse c	.entwurf { .. } selektiert jedes HTML-Element mit class-Attribut entwurf
ID-Selektor	#id	Selektiert das Element mit der ID id	#hauptnavigation { .. } selektiert das HTML-Element mit der id hauptnavigation
Element-Klassen-Selektor	E.c	Selektiert alle Elemente vom Typ E mit Klasse c	p.entwurf { .. } selektiert jedes p-Element mit Klasse entwurf

Aufgabe

Wir wenden die Beispiel-Selektoren der obenstehenden Tabelle auf den folgenden HTML-Code an. Welche HTML-Elemente werden gewählt?

<div id="hauptnavigation" class="entwurf"></div>
<p>asdf</p>
<p class="entwurf">asdf</p>
<p class="definitiv">asdf</p>
<div>adsf</div>

Mehrere Selektoren (S1, S2, …) können kombiniert werden.

Selektoren kombinieren

Kombination	Muster	Bedeutung	Beispiel
Und-Kombination	S1, S2	Die Regel gilt für alle S1 und alle S2	div, p { .. } selektiert alle p-Elemente und alle div-Elemente
Descendant	S1 S2	Aus der Selektion von S1 werden alle Elemente welche S2 entsprechen gewählt	div p { .. } selektiert alle p-Elemente die in einem div-Element enthalten sind
Child	S1 > S2	Selektiert alle S2-Elemente welche direkte Nachkommen von S1 sind	div > p.entwurf { … } alle p-Elemente mit Klasse entwurf welche direkt in einem div-Element sind
Adjacent Sibling	S1 + S2	Wählt alle Elemente S2 die direkt nach S1 kommen und das selbe Elternelement wie S1 haben	div.entwurf + p { .. } selektiert alle p-Elemente welche direkt nach einem div-Element mit Klasse entwurf kommen
General Sibling	S1 ~ S2	Selektiert alle S2-Elemente welche mit dem S1-Element dasselbe Elternelement teilen	div ~ p { .. } wählt alle p-Elemente welche «Geschwister» von div-Elementen sind

Es existieren mehrere weitere Möglichkeiten, die Selektion einzuschränken. Man kann diese spielerisch im Online-Game CSS-Diner austesten.

Eigenschaften und Werte

Nachdem wir nun Elemente gewählt haben, können wir diese anpassen. Dazu legen wir für gewisse Eigenschaften Werte fest.

Farben

Werte für Farben können wie folgt angegeben werden:

article {
   color: blue;
   border: 4px solid #f0c142;
   background-color: rgb(255,180,120);
   background-color: rgba(255,120,0,0.3);
}

blue

«Textfarbe» – Mögliche Werte: https://www.w3schools.com/colors/colors_names.asp

#f0c142

«Hexfarbe» – 3 Kanäle, RGB, Aufteilung in je zweistellige Hexadezimale Zahl (Rotwert: f0, Grünwert: c1, Blauwert: 42)

rgb(255,120,60)

«Dezimalfarbe» – 3 Kanäle, RGB, Aufteilung in Wert zwischen 0 und 255 pro Kanal.

rgba(120,60,0,0.3)

«Dezimalfarbe mit Transparenz» – 4 Kanäle, RGB + alpha, Aufteilung in 3 Farbwerte zwischen 0 und 255 und einem «Deckungswert» für den Alpha-Kanal zwischen 0 und 1 (0 heisst ganz durchsichtig, 1 heisst nicht durchsichtig).

Im obigen Beispiel würde dir rgba-Farbe die vorher gesetzte rgb-Farbe überschreiben – es sei denn der Browser unterstützt keine Farben mit Transparenz.

Distanzen (Breite, Länge, Höhe, Abstände, …)

Diverse Längeneinheiten können verwendet werden um Abstände anzugeben. Dabei schreibt man die Einheit direkt (ohne Leerzeichen) hinter die Zahl. Man unterscheidet zwischen relativen und absoluten Einheiten.

Einheiten Grösse

Einheit	Erklärung	Typ	Beispiel
px	Pixel (Bildschirmpunkte)	absolut	bottom: 12px 12 Pixel Abstand von unten
%	Prozent des Elternelementes	relativ	width: 50% Breite 50% der Breite des Elternelementes
rem	relatives Vielfaches der Textgrösse des Dokumentes	relativ	font-size: 1.4rem Schriftgrösse Faktor 1.4 der Standard-Schriftgrösse

nav {
	position: absolute;
	bottom: 12px;
	font-size: 1.4rem;
	width: 50%;
	border: 1px solid black;
}

Position

Eigenschaften zum Positionieren

Eigenschaft	Wert	Erklärung
display	inline	Anzeige im «Textfluss», keine Positionierung möglich
	block	Anzeige als Block-Element, kann positioniert werden
	inline-block	Verhält sich wie Inline-Element, kann aber Breite und Höhe haben
	flex	für einen sogenannte Flex-Box-Container

Flex-Box

Die sogenannte Flex-Box eignet sich um mehrere Elemente «flexibel» anzuordnen:

<div class="container">
   <div>element1</div>
   <div>element2</div>
   <div>element3</div>
   ...
   <div>elementN</div>
</div>

.container {
   display: flex;
}

👉 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Schrift und Text

Neben Schriftfarbe, kann natürlich auch die Grösse, die verwendete Schriftart und weiteres gesetzt werden:

body {
   color: #542437;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-style: italic;
   font-size: 1.2rem;
   font-weight: bold;
   text-align: center;
   text-decoration: underline;
   line-height: 1.5;
}

font-family

Liste von Schriften, die erste Verfügbar wird gewählt

font-style

italic (kursiv) oder normal

font-weight

bold (fett) oder normal

text-align

Ausrichtung: center, left, right oder justify

text-decoration

Dekoration: none, overline, line-through oder underline

line-height

Zeilenabstand: ein Vielfaches der Schriftgrösse

Rahmen

Möchte man ein Element mit einem Rahmen versehen, kann man das mit der border-Eigenschaft erledigen. Diese fasst die drei Werte für border-width, border-style und border-color zusammen. Diese Werte können auch einzeln gesetzt werden. Zudem gibt es für jede Rahmen-Eigenschaft x vier Varianten (border-top-x, border-right-x, border-bottom-x und border-left-x) um die vier Rahmen-Stücke (oben, rechts, unten und links) separat zu gestalten.

article {
   border: 4px solid #f0c142;
}
nav {
   border-style: dotted;
   border-color: red;
   border-top-color: blue;
   border-width: 5px;
   border-bottom-style: dashed;
}

border-style

Art des Rahmens: solid, dashed, dotted, …

Box-Model

Das CSS-Box-Model bestimmt den äusseren Abstand (margin), die Rahmen-Dicke (border-width) und den inneren Abstand (padding):

article {
   border-width: 20px;
   margin-top: 1rem;
   margin-bottom: 0;
   margin-left: 12px;
   margin-right: 3px;
   padding: 0.4rem
   border-radius: 8px;
}

margin und padding gibt es mit den Anhängsel -left, -right, -top und -bottom oder ohne, wenn man überall denselben Wert möchte.

Verknüpfung mit HTML

Am Besten schreibt man die CSS-Regeln in eine separate Datei. Diese kann dann in der HTML-Datei verlinkt werden. Somit können mehrere HTML-Dateien dieselbe CSS-Datei verwenden:

Nehmen wir an, wir hätten eine Datei style.css im selben Verzeichnis wie unsere HTML-Dateien. Dann verlinken wir diese CSS-Datei indem wir in den HTML-Dateien im head folgende Zeile hinzufügen:

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css" />
      ...

Aufgabe

Wir versuchen unsere im html-Kapitel erstellte Webseite zu gestalten:

1. Erstelle im selben Ordner eine neue Textdatei mit dem Namen style.css
2. Verlinke diese in deiner Html-Datei, indem du im head-Element die obenstehende Zeile einfügst.
3. Erstelle nun CSS-Regeln, um deine Html-Elemente zu gestalten. Wiederum kannst du mit F5 die Seite im Browser aktualisieren um die Änderungen zu sehen.