Bevor du hier einsteigst, solltest du die Grundlagen von HTML und CSS bereits kennen – also wissen, wie Tags aufgebaut sind, was ein Selektor ist und wie du einfache Styles vergibst. In der Roadmap siehst du, welche Inhalte du dafür durchgearbeitet haben solltest.
In diesem ersten Teil bauen wir eine vollständige kleine Website mit HTML und CSS – von Grund auf. Du lernst dabei nicht nur, wie das Grundgerüst aussieht, sondern auch warum bestimmte Entscheidungen im CSS so getroffen werden. Wir schauen uns an, warum wir rem statt px verwenden, was der Wrapper macht und warum jeder Bereich ein eigenes Padding bekommt.
Die HTML-Struktur
Unsere erste Seite besteht aus vier klar getrennten Bereichen: einem Header, einem Hauptinhalt (<main>), mehreren Inhaltsboxen und einem Footer. Alles liegt innerhalb eines <div class="wrapper"> – dazu gleich mehr.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Website</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<h1>Meine erste Website</h1>
<p>Willkommen auf meiner ersten selbst gebauten Webseite.</p>
</header>
<main class="main-content">
<section class="box">
<h2>Worum geht es hier?</h2>
<p>Diese Seite ist ein einfaches Grundgerüst für den Einstieg in HTML und CSS.</p>
</section>
<section class="box">
<h2>Erste Inhalte</h2>
<div class="content-block">
<h3>HTML ist die Struktur</h3>
<p>Mit HTML erstellt man Überschriften, Absätze und Bereiche einer Webseite.</p>
</div>
<div class="content-block">
<h3>CSS ist das Design</h3>
<p>Mit CSS legt man Farben, Abstände und Schriftgrößen fest.</p>
</div>
</section>
</main>
<footer class="footer">
<p>© 2026 Meine erste Website</p>
</footer>
</div>
</body>
</html>
Du siehst: Die gesamte Seite liegt in einem einzigen <div class="wrapper">. Darin steckt oben der <header>, dann der Hauptbereich mit <main> und am Ende der <footer>. Das ist bewusst so aufgebaut – der Wrapper hält alles zusammen.
Der Wrapper – der Umschlag der Seite
Der .wrapper ist so etwas wie ein Umschlag, der alle Inhalte der Seite umhüllt. Er sorgt dafür, dass die Seite nicht bis an den Rand des Browserfensters reicht und auf breiten Bildschirmen trotzdem ordentlich aussieht.
.wrapper {
width: 90%;
max-width: 90rem;
margin: 0 auto;
}
width: 90% bedeutet: Der Wrapper nimmt 90 % der Browserbreite ein – links und rechts bleibt immer ein kleiner Luftraum. max-width: 90rem setzt eine Obergrenze: Auf sehr großen Bildschirmen wird der Inhalt nicht breiter als 90rem – der Wrapper wächst also nicht endlos mit. Und margin: 0 auto zentriert den Wrapper im Browser – die Browser-Engine verteilt den verbleibenden Außenabstand automatisch gleichmäßig auf links und rechts.
Der 62,5 %-Trick und warum wir rem verwenden
Standardmäßig hat jeder Browser eine Schriftgröße von 16px auf dem <html>-Element. Das ist eine etwas unpraktische Basis zum Rechnen. Deshalb setzen wir am Anfang unserer CSS-Datei folgendes:
html {
font-size: 62.5%; /* 16px × 62,5% = 10px */
}
body {
font-size: 1.6rem; /* entspricht wieder 16px */
}
Mit font-size: 62.5% auf dem <html>-Element setzen wir die Basis auf 10 px. Damit wird aus 1rem genau 10px – und das Rechnen fällt deutlich leichter: 2.4rem sind dann 24 px, 3.2rem sind 32 px, und so weiter. Die Schriftgröße im <body> setzen wir danach explizit auf 1.6rem, damit der Text wieder bei den gewohnten 16 px landet.
Warum dann überhaupt rem statt einfach px? Weil rem immer relativ zur Basis auf dem <html>-Element ist. Das hat einen praktischen Vorteil: Wenn du später die Basis änderst – zum Beispiel über eine Media Query für kleinere Bildschirme – skaliert alles auf einmal mit. Margins, Paddings, Schriftgrößen, alles. Das Layout bleibt harmonisch, weil alle Abstände proportional kleiner werden, statt einzeln auseinanderzufallen.
Das CSS im Überblick
Schauen wir uns nun die vollständige CSS-Datei an, die zu unserem Grundgerüst gehört:
html {
font-size: 62.5%;
}
body {
margin: 0;
font-size: 1.6rem;
font-family: Arial, sans-serif;
background-color: whitesmoke;
color: #222;
line-height: 1.6;
}
.wrapper {
width: 90%;
max-width: 90rem;
margin: 0 auto;
}
.header {
background-color: lightblue;
padding: 3rem 2rem;
margin-top: 2rem;
border-radius: 0.8rem;
}
.main-content {
margin-top: 2rem;
}
.box {
background-color: white;
padding: 2rem;
margin-bottom: 2rem;
border-radius: 0.8rem;
}
.content-block {
margin-top: 1.5rem;
padding: 1.5rem;
background-color: lavenderblush;
border-radius: 0.6rem;
}
h1 { font-size: 3.2rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 1.8rem; }
.footer {
text-align: center;
padding: 2rem;
margin-bottom: 2rem;
background-color: cornsilk;
border-radius: 0.8rem;
}Padding – für ein einheitliches Bild
Jede Klasse – .header, .box, .content-block, .footer – bekommt ihr eigenes padding. Das ist kein Zufall. Padding sorgt dafür, dass der Inhalt nicht direkt am Rand des jeweiligen Bereichs klebt. Ohne Padding würde Text direkt an der Kante beginnen – das wirkt eng und unruhig.
Bei .header zum Beispiel lautet es padding: 3rem 2rem – das bedeutet: 3rem oben und unten, 2rem links und rechts. Der Header bekommt bewusst mehr vertikalen Luft, weil er die Seite einleitet und etwas Gewicht haben soll. Die Boxen im Hauptbereich haben padding: 2rem rundum – gleichmäßig und ruhig. Die inneren .content-block-Bereiche haben etwas weniger: padding: 1.5rem. So entsteht eine klare visuelle Hierarchie, obwohl die Abstände alle auf derselben rem-Basis aufbauen.
Hintergrundfarben – damit man die Bereiche sofort erkennt
Die unterschiedlichen Hintergrundfarben sind hier bewusst gewählt – nicht für ein fertig gestaltetes Design, sondern damit du beim Lernen sofort siehst, wo ein Bereich anfängt und wo er aufhört.
lightbluefür den Header – ein klarer Einstieg in die Seitewhitefür die.box-Bereiche – hell und klar vom Hintergrund abgesetztlavenderblushfür die.content-block-Bereiche – eine Ebene tiefer, leicht rosa getöntcornsilkfür den Footer – warm und deutlich vom Rest unterschiedenwhitesmokeals Hintergrund des<body>– der neutrale Rahmen um alles herum
In einem echten Projekt würdest du die Farben natürlich auf dein Design abstimmen. Hier geht es darum, die Struktur sichtbar zu machen.
border-radius – weiche Ecken
Fast alle Bereiche haben einen border-radius. Das rundet die Ecken ab und macht die Seite optisch freundlicher. 0.8rem bei den großen Blöcken, 0.6rem bei den kleineren content-block-Bereichen – auch hier wieder proportionale Abstufung auf rem-Basis.