HTML lernen (5/5): CSS Ids und Klassen

HTML und CSS – HTML bestimmt die Art eines Elements (Typ), CSS bestimmt wie das Element aussieht (Gestaltung). In diesem Bereich wirst du selbst in den wenigsten Unternehmen etwas zu tun haben, diesen Job erledigt der Webmaster. Es ist aber sehr gut, das System hinter HTML und CSS zu kennen, um es als Content Marketing Manager zu verstehen.

CSS Ids und Klassen – Video

HTML sorgt für die Struktur. Es sagst also beispielsweise durch das HTML-Tag <h2>Text</h2> das dieses Element eine Überschrift ist.

CSS (Cascading Style Sheets, zu deutsch „Mehrstufige Formatvorlagen“) sorgt für die Gestaltung. Zum Beispiel Schriftgröße, Schriftart, Positionierung, Hintergrundfarbe.

Lies unbedingt die vollständige Erklärung unter dem Video!

1. IDs und Klassen erklärt
2. Praxisbeispiel: HTML und CSS

Du musst eingeloggt sein, um diesen Inhalt zu sehen!

Lukinski SEO Masterclass: Einloggen oder jetzt starten >

CSS und HTML im Detail

Nehmen wir an, du willst das Design deiner Überschriften global (auf allen Seiten) ändern. Wenn du dein Styling direkt im HTML machst (also in jeder einzelnen Seite), müsstest du alle Überschriften, in allen einzelnen Seiten abändern, damit das neue Design auf allen Seiten übernommen wird. Das ist extrem viel Aufwand.

Damit Änderungen an der Gestaltung sofort, überall (also global) übernommen werden, legt man als Webmaster eine CSS Datei an. In dieser (einzelnen) Datei wird die gesamte Gestaltung der Internetseite festgelegt. Die einzelnen HTML Element übernehmen diesen Style, indem sie eine bestimmte Klasse oder ID bekommen (also einen individuellen Namen).

Damit du CSS und HTML verknüpfst bekommen die HTML Tags zusätzlich den Parameter:

• class=””
• oder id=””

So wird aus deiner Überschrift <h2>Text</h2>

• <h2 class=”blaue-ueberschrift”>Text</h2>

Beides (IDs und Klassen) erfüllen für dich denselben Zweck, es verbindet HTML und CSS. Für Textelemente nutzt du immer class=”” als Parameter. Durch diese Klassen kannst du bestimmte Elemente genau identifizieren und stylen.

Du kannst zum Beispiel Links erstellen, die eine besondere Farbe haben, anders als alle anderen Links.

Praxisbeispiel: HTML und CSS verknüpfen

In diesem Beispiel schauen wir uns an, wie du aus einem Standard-Link, eine extra Klasse machst. Diese wird in der CSS Datei hinterlegt.

Immer wenn Links diese Klasse besitzen, werden sie rot und dick.

Einfacher Link:

<a href=“https://website.com“>Linktext</a>

Ergebnis:

Linktext

Schritt 1: CSS Klasse im HTML Element hinzufügen

Schritt 1 – Diesen Link wollen wir nun für besondere Angebot anpassen. Er soll rot und dick geschrieben sein. Dafür fügen wir die von uns benannte Klasse class=“roter-link“ hinzu.

Einfacher Link mit extra CSS Klasse:

<a href=“https://website.com“ class=“roter-link“>Linktext</a>

Schritt 2: CSS stylen

Schritt 2 – In der CSS Datei wird nun die Gestaltung der Klasse hinterlegt. Vor einer Klasse steht ein Punkt. Hier definierst du also einen Link a mit der Klasse .roter-link , daraus entsteht a.roter-link .

Die Einstellungen stehen dann innerhalb der geschweiften Klammern { … } .

Im CSS steht dann:

a.roter-link {
color: #f90303;
font-weight: 900;
}

Ergebnis:

Linktext