Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

CSS Selektoren

Es gibt verschiedene Möglichkeiten, bestimmte Elemente einer Webseite für die Formatierung mit CSS zu selektieren. Unten siehst du die wichtigsten Optionen, welche zur Verfügung stehen. Eine vollständige Auflistung findest du unter www.w3schools.com.

*

Mit dem * werden alle Elemente einer Webseite selektiert.

* {
  color: blue;
}
  

Erklärung

Die Textfarbe aller Elemente wird hier auf Blau gesetzt.

Element

Dies ist die gebräuchliste Art, ein Element auszuwählen. Es wird angegeben, welches Element (z.B. h1 für alle Titel 1, oder p für alle Paragraphen usw.) man formatieren möchte.

h1 {
  color: green;
  background-color: grey;
}

Erklärung

Bei allen h1-Elementen wird die Textfarbe auf Blau und die Hintergrundfarbe auf Grau gesetzt.

.Klasse

Es ist möglich, selber Klassen von Elementen zu kreieren. Dadurch kann man selber bestimmen, welche Elemente eine bestimmte Formatierung haben sollen. So ist es möglich, verschiedene Arten von Elementen gleichzeitig zu formatieren, solange sie der gleichen Klasse zugeordnet sind.

.greyish {
  color: darkgrey;
  background-color: lightgrey;
}

<h3 class="greyish">Titel der Klasse <em>greyish</em></h3>
<p class="greyish">Dieser Paragraph wurde der Klasse <em>greyish</em> zugeordnet und wird deshalb auch entsprechend formatiert.</p>
<h3>Titel ohne Klassenzuordnung</h3>
<p>Dieser Paragraph wurde nicht der Klasse <em>greyish</em> zugeordnet und ist deshalb normal formatiert.</p>

Erklärung

Bei diesem Beispiel wurde sowohl ein h1-Element als auch ein p-Element derselben Klasse greyish zugeordnet. Dadurch werden beide Elemente gleich formatiert.

#ID

#IDs funktionieren vom Prinzip her genau gleich wie Klassen. Der Unterschied ist, dass man jede ID genau einmal für ein einziges Element verwenden sollte und nicht wie bei Klassen beliebig oft. Zwar kann man IDs auch auf mehrere Elemente anwenden, jedoch ist das problematisch, da IDs unter anderem dazu da sind, ein Element für JavaScript sichtbar zu machen.

.einzigartig {
  color: yellow;
  background-color: darkgreen;
}

<h3 id="einzigartig">Titel mit der ID <em>#einzigartig</em></h3>