Was ist der Unterschied zwischen HTML und CSS?
Es gibt keine Gemeinsamkeiten zwischen HTML und CSS! Sie sind jeweils Sprachen für bestimmte Aspekte von Webseiten, die praktisch keine Überschneidung haben.
HTML ist die inhaltliche Strukturbeschreibung einer Seite. Also, welche “Elemente” gibt es, wo sind sie relativ zueinander einzuordnen, welche Informationen werden dargestellt usw. Beispiele für derartige Elemente sind zum Beispiel eine Kopfzeile, ein Navigationsbereich, ein Inhaltsbereich… Wichtig ist, dass diese Elemente durch Unterelemente die Struktur weiter detaillieren. So hat der vorgenannte Inhaltsbereich z.B. eine Überschrift, mehrere Textabsätze mit konkreten Texten (Inhalten), ein Bild usw.
CSS ist die darstellende Beschreibungssprache dafür, wie die Seite aussieht (aus einer graphischen Sicht). Die Beschreibung bezieht sich dabei auf die Elemente, welche in der HTML Seite beschrieben sind. Hier wird definiert, welche Farben verwendet werden, wie die Dimensionen und Positionen der HTML-Elemente ist (die Kopfzeile soll blau und ganz oben auf der Seite sein), wie das Schriftbild ist (die Überschrift im Inhalt hat eine andere Schriftart und -größe als der Fließtext darunter), wie sich Animationen verhalten (die dargestellten Bilder im Bildelement wechseln alle 5 Sekunden) usw. Die Zuordnung dieser CSS Beschreibungen an HTML-Elemente geschieht über sogenannte Klassen oder aber auch als direkte Zuweisung. Ein HTML-Element kann z.B. sagen, dass es die selbst definierte Klasse “fett” verwenden soll. In der CSS-Beschreibung der Klasse “fett” definiert man, dass alle Texte der Elemente mit dieser Klasse einen fetten Text haben soll. Die direkte Zuweisung hingegen würde z.B. definieren, dass pauschal alle Überschriften auf der Seite eine bestimmte Schriftgröße haben.
HTML und CSS ergänzen sich also in der Beschreibung dessen, was wir auf einer Webseite sehen.
Anmerkung: Ich schrieb, dass HTML und CSS “praktisch keine Überschneidung haben”. Das “praktisch” ist die Einschränkung, da CSS sogenannte Pseudo-Elemente erzeugen kann. Das sind Elemente, die nicht in der HTML Beschreibung enthalten sind, aber trotzdem als separates Element im Browser gezeichnet werden. Diese Pseudo-Elemente werden immer an andere bestehende Elemente angehängt. Als Beispiel: Alle Links in einer Navigationsleiste sollen eine Ikone (also ein Bildelement) vor dem Link-Text stehen haben.