Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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?

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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe