Ada Lovelace
Erste Programmiererin
Was HTML & CSS sind
Jede Webseite besteht aus zwei Schichten, die nichts voneinander wissen müssen: HTML sagt, was da ist (Überschrift, Absatz, Bild, Knopf). CSS sagt, wie es aussieht (Farbe, Abstand, Größe, Anordnung). Trennst du die beiden, kannst du das Aussehen komplett umbauen, ohne ein einziges Wort am Inhalt zu ändern.
Merksatz: HTML ist das Skelett, CSS die Kleidung. Ein Skelett steht auch nackt — es sieht nur nicht gut aus.
Die drei Beteiligten
🧱 HTML
Markup-Sprache. Verschachtelte <tags> geben dem Inhalt Bedeutung und Struktur. Keine Logik, keine Schleifen — nur „hier ist eine Überschrift, da ein Absatz".
🎨 CSS
Stylesheet-Sprache. Regeln der Form Selektor { eigenschaft: wert } wählen HTML-Elemente aus und geben ihnen Aussehen und Position.
🌐 Browser
Liest beides, baut daraus einen Baum (das DOM), legt das CSS drüber und malt das Ergebnis auf den Bildschirm. Der Regisseur.
Dasselbe HTML — einmal mit, einmal ohne CSS
Klick den Schalter: der Inhalt bleibt identisch, nur das Stylesheet wird an- und abgeschaltet. Genau diese Trennung ist der ganze Trick.
So zeigt der Browser es an
HTMLimmer gleich
<article class="profil">
<img src="avatar.png" alt="Foto von Ada">
<h2>Ada Lovelace</h2>
<p class="rolle">Erste Programmiererin</p>
<button>Folgen</button>
</article>CSSaktiv
.profil {
max-width: 240px;
padding: 20px;
border-radius: 14px;
background: #eef2ff;
text-align: center;
font-family: system-ui, sans-serif;
}
.profil img { width: 72px; border-radius: 50%; }
.profil h2 { margin: 12px 0 2px; font-size: 1.1rem; }
.rolle { color: #6366f1; font-size: 0.85rem; }
.profil button {
margin-top: 12px;
padding: 8px 18px;
border: 0;
border-radius: 999px;
background: #4f46e5;
color: #fff;
cursor: pointer;
}Warum eigentlich? — Warum trennt man Struktur und Aussehen?
Drei Gründe. Wartbarkeit: Ein Designwechsel ist eine Änderung im CSS, nicht in 200 HTML-Dateien. Wiederverwendung: dieselbe .profil-Regel stylt jede Karte auf der Seite. Zugänglichkeit & Maschinenlesbarkeit: Suchmaschinen und Screenreader lesen die HTML-Struktur — sie ist die echte Bedeutung, das CSS ist nur Lack.
Häufiger Denkfehler — HTML ist eine Programmiersprache
Ist es nicht. HTML hat keine Variablen, keine Bedingungen, keine Schleifen — es beschreibt nur. Es ist eine Markup-Sprache (Auszeichnungssprache). CSS übrigens auch keine Programmiersprache: es ist eine deklarative Regelsprache. Logik kommt erst mit JavaScript dazu. Wer das verinnerlicht, sucht in HTML/CSS nicht nach „Fehlern im Ablauf", sondern nach falscher Struktur oder falschen Regeln.
Tiefer rein — Was der Browser daraus macht
Beim Laden passiert grob:
- Parsen — der HTML-Text wird zum DOM-Baum (Document Object Model), einer Baumstruktur aus Knoten.
- CSS parsen — die Stylesheets werden zum CSSOM.
- Render-Tree — DOM + CSSOM werden zusammengeführt: welcher Knoten bekommt welche Stile.
- Layout & Paint — der Browser rechnet Positionen und Größen aus und malt die Pixel.