CSS-Elemente gezielt ansprechen

zwei allgemeine HTML-Elemente über CSS gezielt ansprechen – ID-Selektor und Class-Selektor

In den letzten Kapiteln über Farben und Schriften wurde direkt bestehende HTML-Elemente die CSS-Anweisungen angesprochen.

Wir haben z.B. unsere Überschrift <h1> mit einer Hintergrundfarbe versehen. Der Sinn ist hier noch klar, da es normalerweise nur eine Hauptüberschrift gibt und wir für den Charakter des Elements, sprich Hauptüberschrift, ein passendes Design „binden“.

Was passiert aber, wenn wir kein passendes HTML-Element vorliegen haben, sondern nur einen bestimmten Bereich ansprechen möchten? Bestimmte Bereiche könnten zum Beispiel der Kopfbereich sein (hier würde man normalerweise das HTML5-Element <header> nutzen. Aber nehmen wir an, wir wollen innerhalb des Kopfbereichs einen Teilbereich ansprechen.

Oder wir nur ein bestimmtes Element, z.B. einen Absatz und nicht alle Absätze ansprechen wollen?

Universelle HTML-Elemente zum Verknüpfen mit Design

Hier kommen folgende 2 HTML-Elemente zum Zuge:

• <div> und
• <span>

Dies stellt zwar eine Wiederholung zum HTML-Kapitel dar – dort konnte aber die Tragweite dieser beiden HTML-Elemente für das Design nicht wirklich gezeigt werden, da ohne CSS diese sehr „farblos“ bleiben.

Für die Wiederholung das neue Kapitel zu <div> und <span>

gezielt ansprechen über CSS-Selektoren: ID-Selektor und Class-Selektor

Nachdem wir die 2 HTML-Elemente haben, wollen wir dieses auch individuell ansprechen können. Hier kommen unsere 2 Selektoren zum Zuge:

• ID-Selektor und
• Class-Selektor

Es wird der Einsatz von ID-Selektor und Class-Selektor vorgestellt

Wichtig für alle folgenden Kursteile

Dieses Wissen benötigen wir in den folgenden Kursteilen laufend, um unser Design für Webseiten effektiv und effizient umsetzen zu können.

Wir werden auch nochmals uns die Umsetzung des Logos mit den überlappenden Buchstaben ansehen, das jetzt auch über CSS umsetzbar ist. Dies ist eine gute Übung für das neu erworbene Wissen.