PageNinja

Learn Webdev the fun way

Home

CSS Klassen

Klassen? Wie in… Java? Das klingt zunächst sehr kompliziert. Doof nur Klassen in CSS viel einfacher sind, keine Methoden, keine private, public wasauchimmer. Nein, Klassen in CSS sind eigendlich nur Namen, Namen. Ein Beispiel:

<style>
/* Element selector, kennen wir schon */
body{
    max-width:900px;
}

/* Klassen-Selektor, sehr fancy */
.roterLink{
    color: red;
}
</style>

<a href="#"> Ein langweiliger Link</a>
<a href="#" class="roterLink"> Ein Roter link, sehr fancy</a>

das sieht dann so aus:

Ein langweiliger Link Ein Roter link, sehr fancy

Das war’s schon?

Warte, wirklich? Ja. Klassen sind wirklich einfach. Sie sind gleichwertig mit allen anderen Selektoren, ~egal~ fast egal welcher Art (Pseudo-Elemente-Queries ausgenommen). Das einzig interessante ist vielleicht noch das man mehrere Klassen an ein Objekt anheften kann:

<a href="/about" class="inline-block px-4 py-2 font-bold text-white bg-black rounded dark:text-black lg:text-xl dark:bg-white dark:hover:bg-neutral-300 hover:bg-neutral-900">Who even are you?</a>

Das ist der HTML-Tag für den CTA-Button auf stevetec.de, ein Tag mit 12 Klassen. Das muster sollte direkt Sichtbar werden:

Man trennt die Klassen mit einem Leerzeichen.

<span class="klasse1 klasse2">Tag mit den Klassen "klasse1" und "klasse2"</span>

Es geht noch weiter, kommst du mit?