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 #

<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.

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).

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.

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

Position #

nav {
	float: right;
}
nav li {
	display: inline;
}
footer {
	position:absolute;
	bottom:0px;
	right:10px;
}
nav, footer {
	background-color: yellow;
}

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 #

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" src="style.css" />
      ...