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