Tag Archives: SEO

07 – Grundlagen HTML & CSS: Der Unterschied zwischen Klassen und IDs (CSS)

Endlich ist die externe CSS-Datei eingebunden. In diesem Video erläutere ich den Unterschied zwischen Klassen und IDs, und wie man diese im HTML-Dokument einbettet  bzw. anwendet.

Der wesentliche Unterschied zwischen Klassen und IDs:

  • IDs sind eindeutig und dürfen innerhalb einer HTML-Datei nur einmal verwendet werden
  • Klassen dürfen im Gegensatz dazu mehrfach innerhalb eines HTML-Dokuments verwendet werden.

Dafür soll das im vorherigen Video erklärte Container-Box-Modell noch einmal herhalten. Die hier direkt im HTML eingefügten Style-Angaben werden durch Klassen und IDs ersetzt. Die angebundene CSS-Datei wird „mit Leben gefüllt“; enthält also die Style-Anweisungen.

Am Ende erhalten wir ein „bereinigtes“ HTML-Dokument, dass nur noch die reinen HTML-Angaben enthält; also die eigentlichen Inhalte. In der CSS-Datei befinden sich dann die reinen Style-Angaben, die für das Erscheinungsbild der HTML-Seite nachher verantwortlich sind. So haben wir den Schritt zur Trennung  von Inhalt (HTML) und Design (CSS) vollständig vollzogen.

Auch in Zukunft sollten Sie zwingend darauf achten KEINE Design-Anweisungen im HTML-Dokument einzubinden. Dieses Vorgehen hat folgende wesentliche Vorteile:

  • Designänderungen lassen sich schneller und einfacher umsetzen
  • Das HTML-Dokument ist kleiner (kb) und kürzer (Anzahl Zeichen und Zeilen)
  • Schnellere / bessere Ladezeiten der Internetseite insgesamt