Unterschiede zwischen HTML & CSS

HTML und CSS sind beides Begriffe aus dem Umfeld der Gestaltung und des Aufbaus von Webseiten. Was aber ist der Unterschied? Früher wurden Homepages vollständig in HTML erstellt. Heute unterstützt CSS die Trennung von Inhalt (HTML), Formatierung (CSS) und Layout (CSS).

Begriffe

  • HTML Abkürzung für Hypertext Markup Language
  • HTML besteht aus Tags: <h1>, <h2> usw. für Überschriften, <p> für Paragraph sowie <tr>, <td> für Tabellen­zeile / Tabellen­daten­zelle um nur die wichtigsten zu nennen.
  •  
  • CSS Abkürzung für Cascading Style Sheets (cascading: abgestuft, geschachtelt, kaskadierend).
  • CSS kennt Elemente wie color und font-size, und Eigenschaften die diesen Elementen zugewiesen werden color:black; oder font-size: 10px;
  • Die Aufgabenteilung in Kurzform:
  • Mit HTML wird der Inhalt (Text, Bilder, Hyperlinks) einer Seite strukturiert.
  • Mit CSS wird dieser Inhalt formatiert (Farbe, Schriftgröße, Abstand zum Rand, usw.). In späteren Versionen von CSS wurden Elemente hinzugefügt, um das Layout einer Seite flexibel zu kontrollieren.

Entwicklung

Früher wurden Internet­seiten vollständig in HTML erstellt. Das erwies sich bald für komplexe Projekte als aufwändig und schwer zu warten, und moderne Layouts lassen sich mit reinem HTML nicht umsetzen.
Um diesem Rechnung zu tragen, erfanden die Browser­hersteller (zu der Zeit Netscape und Microsoft) neue HTML-Tags. So z.B. <font> oder <center>. Das war allerdings ein Bruch in der allgemeinen Logik von HTML, da diese Tags zwar das Layout anpassen konnten, aber kein Strukturierungs­werkzeug wie die alt eingesessenen HTML-Tags.
CSS wurde erfunden um diese Probleme zu beheben, indem es Web­designern mit ausreichenden Gestaltungs­möglichkeiten ausstattete, die zudem in den meisten Fällen von allen Browsern unterstützt wurden. Gleichzeitig machte die konsequente Trennung von Form und Inhalt auf einer Webseite die Pflege selbiger viel einfacher.
In den 1990iger Jahren entstanden die ersten Spezifikationen für HTML und CSS, heute sind HTML5 sowie CSS3 (kurz für CSS Level 3) die aktuellen Versionen.

Die zwei Funktionen von CSS

Die ersten Seiten aus den Anfängen des Internets waren fast reiner Fließtext von oben links, nach unten rechts. Um ein Struktur hinzubekommen, die den Namen Layout verdient, gibt es in HTML eigentlich nur die Möglichkeit, ein grobes Raster mit Hilfe einer Tabelle zu definieren, manchmal auch geschachtelte Tabellen. Fast alle Homepages nutzen diese Konstrukt in der Vergangenheit.

CSS schaffte hier bereits vor 10 Jahren mit dem Box-Modell und der Eigenschaft float Abhilfe. In CSS3 wurde das Box-Modell noch einmal erweitert und die Flexibilität gesteigert.

Externe Datei

Die Formatierungssprache CSS kann ihre ganze Kraft vor allem dadurch entfalten, dass sie in eine externe Datei ausgelagert werden kann (es können auch mehrere sein). In dieser Datei werden dann die Grundformatierung und das Layout für eine Domain (also im Ernstfall über 100.000 einzelne HTML-Seiten) zentral gespeichert und gewartet. CSS Deklarationen in einzelnen HTML Dokumenten werden nur noch dann vorgenommen, wenn auf dieser Seite ein spezielles Layout oder Formatierung notwendig ist.