Diese Seite dient mir zum üben der Web-Programmiersprachen

Selektoren

Eine CSS-Vorgabe wird mit dem Selektor eingeleitet. Er beschreibt worauf die Vorgabe angewendet wird. Jedes HTML-Tag (Element) kann ein Selektor werden. Die Vorgabe wird dann auf sämtliche Tags des Typs angewant.

h1 {
   color: blue;
}

In diesem Fall würden alle h1-Überschriften der Seite blau angezeigt. Sollen jedoch auch andere Tags die gleichen Vorgaben haben, kann man diese in Gruppen zusammen fassen. Die Tags werden mit einem Komma getrennt.Würde man das Komma weg lassen, dann würde die Vorgabe nur für den zweiten Tag gelten, der innerhalb des ersten Tags stünde. In diesem Fall wären nur die Links in blau, welche sich in einer h1-Überschrift befänden.

h1, a {
   color: blue;
}


Sollen nicht alle Tags des selben Typs angesprochen werden, gibt es die Klassen. Sie werden in dem gewünschten Tag mit dem Attribut class benannt und in der CSS-Datei mit .name erstellt. Wobei .name der Name der Klasse ist, welche im Attribut als Wert angegeben wird. Es ist auch möglich einem Tag mehrere Klassen zuzuweisen indem man ihre Namen in dem Attribut mit einem Leerzeichen trennt.

.blau {
   color: blue;
}
<h1 class="blau">

Außer den Klassen gibt es noch die Variante einem Tag eine ID zu verpassen. Diese ID ist einzigartig und darf daher nur einmal auf der Seite vor kommen und das erste Zeichen darf keine Zahl sein. Um einem Tag eine ID zu geben bekommt es das Attribut id dessen Wert der Name der ID ist. In der CSS-Datei wird dem Selektor ein # Zeichen vor dem Namen der ID gesetzt.

#blau {
   color: blue;
}
<h1 id="blau">

Mit dem allein stehenden Selektor * werden alle Tags der Seite angesprochen.

Tags und Klassen kombinieren

Klassen können auf verschiedene Tags im HTML-Dokument angewant werden. Sie können auch, in der CSS-Datei, mit ganz bestimmten Tags kombiniert werden. So ist es zum Beispiel möglich eine Klasse mit genauen Angaben zu Schriftart und Schriftfarbe zu machen, die aber unabhängig des kombinierten Tags verschiedene Schriftgrößen enthält.

.blau {
   color: blue;
}

i.blau {
   color: blue;
   font-size: 30px;
}
<p class="blau"> In diesem Text ist <i class="blau"> der i-Tag </i> besonders groß.</p>

Pseudoklassen

Dann gibt es noch die Pseudoklassen. Sie geben Tags in bestimmten Situationen andere Eigenschaften. So ist es möglich mit ihnen zum Beispiel ein Element zu verändern, wenn die Maus darüber fährt oder etwas im Focus steht. Auch die Farben von Links, in ihren unterschiedlichen Zuständen, lassen sich anpassen.

selector:pseudo-class {
   property: value;
}

Es gibt so viele Pseudoklassen, da lohnt sich ein Blick auf diesen Link:
https://www.w3schools.com/css/css_pseudo_classes.asp