Klassen

Was ist eine Klasse?

Mit einer Klasse können wir in CSS eine Gruppe von Style-Eigenschaften definieren und mehrmals verwenden. Modernes Webdesign verwendet Klassen (eng. classes). Damit lassen sich mehrere HTML-Elemente identisch stylen. Wir können somit etwa recht einfach mehreren Überschriften eine rote Schriftart verpassen.

Beispiel

Folgender Code zeigt ein Beispiel für eine CSS-Klasse. 

.header {
    color: cornflowerblue;
    background-color: gold;
    text-align: center;
}

Anschliessend müssen wir den Style anwenden.

Beispiel
<h1 class="header">Überschrift</h1>

Wie und wo werden Klassen definiert?

Eine Klasse (eng. class) wird in einer separaten CSS-Datei definiert. Wir nennen dies eine Klassendeklaration. In einer CSS-Datei können wir beliebig viele Klassendeklarationen notieren. Jede Klassendeklaration erhält einen eindeutigen Klassennamen (der Text nach dem Punkt). Eine Klassendeklaration bewirkt noch nicht die Anwendung der Styles, es ist nur eine Definition.

Klassendeklaration CSS-Datei verlinken Klassen anwenden

Syntax für Klassendeklarationen

Eine Klassendeklaration (auch Klassenselektor genannt) definiert eine Gruppe von Style-Deklarationen. Klassen beginnen immer mit einem Punkt .. Dann folgt der Klassenname. Dieser kann frei gewählt werden, muss jedoch eindeutig sein.
Nach der geschweiften Klammer { folgen die Style-Deklarationen. Eine Style-Deklaration besteht aus zwei Komponenten: Eigenschaft und Wert. Eigenschaft und Wert werden durch einen Doppelpunkt (:) getrennt. Die Style-Deklaration wird mit einem Semikolon (;) abgeschlossen. Es können mehrere Style-Deklarationen pro Klasse notiert werden. Eine CSS-Klasse wird mit einer weiteren geschweiften Klammer } geschlossen.

CSS Syntax Beispiel

Allgemein lautet die Syntax für eine Klassendeklaration wie folgt: 

.klassenname {
    eigenschaft: wert;
    eigenschaft: wert;
    ...
}

Für Klassennamen verwenden wir ausschliesslich Kleinbuchstaben und den Bindestrich, um Wörter zu trennen (z.B. has-text-centered). Eigenschaften und die möglichen Werte sind vordefiniert und müssen in der Dokumentation von CSS nachgeschaut werden. Wir können mehrere Klassendeklarationen in einer CSS-Datei notieren. Es können auch mehrere CSS-Dateien erstellt werden, um die Styles zu trennen. Weitere Beispiele: 

.header {
    color: cornflowerblue;
    background-color: gold;
    text-decoration-color: black;
    text-decoration-line: underline;
    text-align: center;
}

.subheader {
    color: darkgreen;
    background-color: beige;
    text-transform: uppercase;
}

.citation {
    background-color: rgb(200, 200, 200);
    padding: 20px;
    display: block;
    text-align: center;
    margin: 50px;
    font-style: italic;
}
Clean Code! Notieren Sie in einer Zeile jeweils nur eine Style-Deklaration. Dies sorgt für eine bessere Übersicht über die Styles.

Da es zahlreiche Style-Deklarationen gibt, ist eine CSS Referenz sinnvoll. Wir können darin nachschlagen, welche Eigenschaften es gibt und welche Werte wir verwenden können.

Links
MDN Web Docs
SELFHTML

Damit wir einen Style anwenden können, müssen wir zuvor die CSS-Datei mit der HTML-Datei verknüpfen. Dies geschieht über das <link>-Element im <head>-Element der entsprechenden HTML-Datei.

Syntax
<link rel="stylesheet" href="Name der CSS-Datei">
Beispiel
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Reisetipps</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>...</body>
</html>

Beabsichtigen wir die Styles der CSS-Datei auf mehrere HTML-Dateien anzuwenden, dann müssen wir die Verknüpfung in jeder HTML-Datei vornehmen. Wir können auch verschiedene CSS-Dateien kombinieren. Dazu müssen wir pro CSS-Datei ein <link>-Element einfügen.

Links
MDN Web Docs
SELFHTML

Wie setzen wir eine CSS-Klasse ein?

Eine CSS-Klasse kann für mehrere HTML-Elemente verwendet werden. Damit ein HTML-Element einen Style erhält, müssen wir das HTML class-Attribut verwenden. Dies existiert für jedes HTML-Element.

Syntax
<OpeningTag class="Name der CSS-Klasse">...</ClosingTag>
Beispiel
<h1 class="header">Reisetipps</h1>

Der Browser sorgt dann dafür, dass der mit der Klasse verbundene Style eingesetzt und das Rendering entsprechend durchgeführt wird.

Das class-Attribut beinhaltet den Namen der Klassendeklaration ohne den Punkt.

Das class-Attribut kann mehrere Klassennamen erhalten. Die Klassennamen werden mit einem Leerzeichen getrennt. Der Inhalt beider Klassendeklaration wird dann für das Styling benutzt.

Beispiel

<h1 class="header zentriert">Reisetipps</h1>
Links
MDN Web Docs
SELFHTML