Skip to content

7. 📘 Grundlagen CSS

CSS (Cascading Style Sheets) sagt dem Browser, wie deine HTML‑Seite aussehen soll:

  • welche Schrift benutzt wird
  • welche Farben kommen
  • wo AbstĂ€nde und Rahmen sind

âžĄïž HTML beschreibt was auf einer Webseite steht (also den Inhalt mit Semantik, so dass dieser automatisch verarbeitet werden kann). âžĄïž CSS beschreibt wie es aussieht.

7.1 📎 HTML und CSS verbinden

Wir erstellen eine HTML-Datei und verknĂŒpfen eine CSS-Datei mit dem <link>-Tag im <head>-Bereich:

Verzeichnisstruktur:

projekt/
├── index.html
└── css/
    └── style.css

index.html:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Seite</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <p>Hallo Welt!</p>
</body>
</html>

css/style.css:

/* Selektor  { Eigenschaft: Wert; } */
p {                     /* alle <p>-AbsÀtze */
    color: red;        /* Textfarbe rot */
}
Begriff Was bedeutet das? Beispiel
Selektor „Welches Element soll gestylt werden?“ h1, .box, #contact
Eigenschaft „Was wollen wir Ă€ndern?“ color, background-color, font-family
Wert „Wie soll es aussehen?“ blue, #f0f0f0, "Arial", sans-serif
; (Semikolon) Trennt mehrere Eigenschaften voneinander color: red; background: yellow;
{ } Umschließt alle Eigenschaften zu einem Selektor p

Syntax

Kommentare in CSS gibt es nur mit / ... /. Jede sich öffnende { braucht eine schließende }.

7.2 Selektoren

Selektoren geben an, was genau gestylt werden soll. Am HĂ€ufigsten werden class- und id-Selektoren verwendet.

Eine id kennzeichnet genau einen Tag in deiner Seite.

HTML:

<p id="intro">Das ist der Einleitungstext</p>

Damit kannst du durch #intro nicht alle p-Tags, sondern genau diesen mit CSS formatieren:

#intro {
  font-weight: bold;
  color: darkgreen;
  font-size: 2em;
}

Wenn du das Aussehen von nicht allen, aber auch mehr als einem Element bestimmen möchtest, verwendest du in HTML das Attribut class und den zugehörigen Selektor mit einem . (Punkt) in CSS.

HTML:

<p class="warning">Achtung, wichtig!</p>
<p class="warning">Noch eine Warnung</p>

CSS:

.warning {
  background-color: orange;
  padding: 1em;
}

7.2.1 Zusammengesetzte Selektoren

Im weiter unten aufgefĂŒhrten grid-Layout findest du Beispiele, wie diese zusammengesetzten Selektoren verwendet werden.

  • `main.item``
    • Selektiert ein <main>-Element, das die CSS-Klasse item hat
    • Der Punkt (.) bedeutet "mit der Klasse"
    • Beispiel: <main class="item"> wird angesprochen
  • nav ul
    • Selektiert alle <ul>-Elemente, die sich innerhalb eines <nav>-Elements befinden
    • Das ist ein Nachfahren-Selektor (descendant selector)
    • Beispiel: <nav><ul> wird angesprochen
  • nav a:hover, nav a:focus
    • Selektiert Links (<a>) innerhalb von <nav>-Elementen in bestimmten ZustĂ€nden
    • :hover = wenn die Maus ĂŒber dem Link schwebt
    • :focus = wenn der Link fokussiert ist (z.B. mit Tab-Taste)

Das Komma funktioniert wie ein oder - es gruppiert mehrere Selektoren zusammen, die dieselben Eigenschaften erhalten sollen.

7.3 AbstĂ€nde und Maßeinheiten

Stell dir vor, deine Webseite besteht aus vielen kleinen Bausteinen (Texten, Bildern, Überschriften). Damit diese Bausteine schön angeordnet sind und nicht chaotisch aneinanderkleben, brauchen wir AbstĂ€nde. DafĂŒr gibt es Padding und Margin.

7.3.1 Padding: Der "Innenabstand"

Padding ist der Abstand zwischen dem Inhalt deines Bausteins und seinem eigenen Rand. Es ist wie die Polsterung im Karton, die dein Geschenk schĂŒtzt.

+-------------------+
|  Padding          |
|  +-------------+  |
|  |   INHALT    |  |
|  +-------------+  |
|                   |
+-------------------+

7.3.2 Margin: Der "Außenabstand"

Margin ist der Abstand zwischen deinem Baustein und anderen Bausteinen daneben. Es ist wie der Abstand zwischen zwei Kartons im Raum.

+-------------+      Margin      +-------------+
|   BAUSTEIN  |------------------|   BAUSTEIN  |
+-------------+                  +-------------+

7.3.3 Maßeinheiten: PX vs. EM / REM

Jetzt wissen wir, wo die AbstĂ€nde hinkommen. Aber wie groß sollen sie sein? DafĂŒr gibt es verschiedene "MessgerĂ€te":

  • PX (Pixel): Der "Starre" Zentimeter - Eine feste GrĂ¶ĂŸe (ein Bildpunkt auf dem Bildschirm). 10px sind immer 10 Bildpunkte, egal wie sehr die SchriftgrĂ¶ĂŸe vergrĂ¶ĂŸert wird.
  • EM / REM: Der "Flexible" Zentimeter
    • EM: Bezieht sich auf die SchriftgrĂ¶ĂŸe des direkten "Eltern-Bausteins".
    • REM: Bezieht sich auf die BasisschriftgrĂ¶ĂŸe. Wenn ich mit meinen schwachen Augen, die SchriftgrĂ¶ĂŸe vergrĂ¶ĂŸere, dann passt auch der Abstand dazu.

7.4 CSS‑Variablen

Stell dir Variablen wie Farbstifte vor, die du ĂŒberall benutzen kannst. So musst du eine Farbe nur an einer Stelle Ă€ndern, wenn du sie spĂ€ter anpassen willst.

Hier eine mögliche CSS-Datei 

/* ---------- 1. Basis‑Variablen ---------- */
:root {
    font-size: 16px;                     /* 1 rem = 16 px */
    --primary-color: #0066cc;            /* Blau fĂŒr Überschriften */
    --bg-color: #fafafa;                 /* Helles Grau fĂŒr HintergrĂŒnde */
    --font-main: "Arial", Helvetica, sans-serif;
}

/* ---------- 2. Grundlayout ---------- */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--bg-color);
}

/* ---------- 3. Überschrift ---------- */
h1 {
    color: var(--primary-color);
    text-align: center;
    margin-top: 2rem;        /* 32 px Abstand oben */
    font-size: 2.5rem;       /* 40 px große Schrift */
}

/* ---------- 4. Eine Box (Karte) ---------- */
.card {
    max-width: 20rem;        /* ca. 320 px breit */
    margin: 2rem auto;       /* zentriert, Abstand oben/unten */
    padding: 1.5rem;         /* Innenabstand */
    background-color: #fff;  /* Weißes Feld */
    border: 2px solid #ddd;  /* leichter Rahmen */
    border-radius: 0.5rem;   /* runde Ecken */
    box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.15);
}

/* ---------- 5. Footer mit Bildhintergrund ---------- */
footer {
    background-image: url("https://picsum.photos/800/200"); /* Beispiel‑Bild */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
    text-align: center;
    padding: 2rem 0;
    margin-top: 3rem;
}

Und eine zugehörige HTML-Datei

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>CSS‑Demo fĂŒr AnfĂ€nger*innen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Willkommen bei CSS!</h1>
<div class="card">
    <p>Das ist eine kleine Lern‑Karte. Sie zeigt, wie du <strong>Schriftarten</strong>, <strong>Farben</strong>,
    <strong>AbstÀnde</strong> und <strong>Rahmen</strong> mit CSS gestaltest.</p>
</div>
<footer>
    <p>Ein schönes Hintergrundbild – dank CSS‑Variablen und <code>rem</code> ist alles flexibel!</p>
</footer>
</body>
</html>

Task

Kopiere HTML und CSS in entsprechende Dateien und

  • Ă€ndere die --primary-color
  • setze :root {font-size: 18px;}
  • ersetze die URL im footer‑Block durch den Pfad zu deinem eigenen Bild.
  • definiere eigene Variablen, wie z.B. --accent-color, fĂŒr weitere Farben und verwende sie.

7.5 Layout

HĂ€ufig werden bedeutungslose div-Tags hinzugefĂŒgt, um das grundlegende Aussehen einer Seite, das Layout besser definieren zu können.

7.5.1 Grid

Ein Grid (Raster) teilt die Seite in Zeilen und Spalten, Ă€hnlich wie ein Schachbrett. Damit kannst du Inhalte exakt dort platzieren, wo du sie haben willst.

Begriff Bedeutung Beispiel
Container Das Element, das das Raster erzeugt. <section class="grid"> 
 </section>
Spalte (column) Vertikale Streifen im Raster. 3 Spalten = 3 vertikale KĂ€stchen
Zeile (row) Horizontale Streifen im Raster. 2 Zeilen = 2 waagerechte Reihen
Gitter-Zelle Der Schnittpunkt aus einer Zeile + einer Spalte – dort kommt dein Inhalt rein. <div class="item"> 
 </div>

Wir bauen ein klassisches responsives Layout:

css layout grid Beispiel css layout grid Beispiel

Hier ein dazu passender HTML-Code 

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS‑Grid‑Demo</title>
<link rel="stylesheet" href="style.css">
<style>

</style>
</head>

<body>
<!-- Container fĂŒr das Grid-Layout -->
<div class="grid">
    <header class="item">Header – Titel deiner Seite</header>
    <nav class="item">
        <ul>
            <li><a href="#home">Startseite</a></li>
            <li><a href="#about">Über uns</a></li>
        </ul>
    </nav>
    <main class="item">Content – Hier kommt dein eigentlicher Text hin.</main>
    <aside class="item">Sidebar</aside>
    <footer class="item">Footer – Impressum, Kontakt usw.</footer>
 </div>
</body>
</html>

Und der CSS-Code

/* Grundvariablen */
:root {
    font-size: 16px; /* 1 rem = 16 px */
    --primary-color: #0066cc;
    --bg-color: #fafafa;
    --accent-color: #b8e2f3;
    --font-main: "Arial", Helvetica, sans-serif;
    /* Grid‑spezifisch */
    --gap: 1rem;
}

/* Body‑Grundstil */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--bg-color);
}

/* Grid‑Container mit mobiler Ansicht als Default */
.grid {
    display: grid;
    /* mobil sollen alle Elemente des Grid untereinander */
    grid-template-areas: 
        "header"
        "nav"
        "main"
        "sidebar"
        "footer";
    gap: var(--gap);
    margin: 1rem auto;
    padding: 1rem;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 0.5rem;
}

/* Gemeinsame Item‑Stile des Grids */
.item {
    background-color: #f0f8ff;
    padding: 1rem;
    border: 1px solid #aac;
    border-radius: 0.25rem;
    text-align: center;
}
/* Zuordnung der Elemente zu grid-area */
main.item {
    grid-area: main; 
}

header.item {
    grid-area: header; 
}

nav.item {
    grid-area: nav; 
}
aside.item {
    grid-area: sidebar; 
}
footer.item {
    grid-area: footer; 
}

/* Navigation  */
nav {
    background-color: #e6f2ff;
    padding: 0.75rem 1rem; 
    border-radius: 0.25rem;
}
nav ul {
    display: flex; /* Links nebeneiander */
    flex-wrap: wrap;  /* Bei zu wenig Platz umbrechen */
    list-style: none; /* keine AufzÀhlungszeichen */
    margin: 0;
    padding: 0;
    gap: 1.5rem; /* Abstand zwischen den Links */
}

nav a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}
nav a:hover,
nav a:focus {
    background-color: var(--accent-color); 
}


/* Responsives Verhalten (Desktop) */
@media (min-width: 700px) {
  .grid {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas:
      "header header  header"
      "nav    main sidebar"
      "footer footer  footer";
  }
  nav ul {
    flex-direction: column;   /* Navigation als Spalte */
    align-items: flex-start;  /* linksbĂŒndig in der Spalte */
  }
}

Viele der ErklÀrungen findest du direkt als Kommentare im Code, hier noch einige Besonderheiten

  • In den Screenshots findest du sogenannten Blindtext. Lorem Ipsum ist ein pseudo‑lateinischer Text der Textvolumen simuliert, bevor echter Content verfĂŒgbar ist. Diesen habe ich im HTML-Code weggelassen.
  • <meta name="viewport" content="width=device-width, initial-scale=1">
    • Ohne das Tag: Stell dir vor, du schaust durch ein Fernrohr, das fĂŒr ein großes Objekt (den Desktop‑Bildschirm) gebaut ist. Auf einem kleinen Objekt (Handy) erscheint alles zu klein und du musst dich reinzoomen – das ist unpraktisch.
    • Mit dem Tag: Jetzt benutzt du eine verstellbare Lupe, die sich automatisch an die GrĂ¶ĂŸe des Objekts anpasst. Auf dem Handy wird die Seite sofort passend vergrĂ¶ĂŸert, ohne dass du etwas tun musst.
    • Die Zeile ist ein Hinweis an den Browser, wie breit die Seite sein soll.
    • width=device-width ⇒ Breite = Bildschirmbreite des GerĂ€ts.
    • initial-scale=1 ⇒ Beim Laden wird die Seite nicht vergrĂ¶ĂŸert oder verkleinert.
    • Ergebnis: Die Seite sieht auf Handys, Tablets und Computern gut aus, ohne dass Nutzer zoomen mĂŒssen.
  • display: grid → macht das Element zu einem tabellenartigen Raster.
  • grid-template-areas definiert welche Zeile welchen Namen hat.
  • Jedes Kind‑Element bekommt per grid-area: ... den passenden Platz.
  • `gapÂŽ sorgt fĂŒr Abstand zwischen den Zellen.
  • FĂŒr die Desktop-Ansicht verwende ich grid-template-columns: 1fr 4fr 1fr;: Dies erstellt drei Spalten. Die mittlere Spalte ist viermal so breit wie jede der Ă€ußeren Spalten. fr‑Einheiten teilen den verbleibenden Platz im Grid proportional auf, sodass das Layout flexibel auf unterschiedliche BildschirmgrĂ¶ĂŸen reagiert.
  • Es werden einige zusammengesetzte Selektoren verwendet, wie in zusammengesetzte Selektoren erlĂ€utert.

Task

Kopiere HTML und CSS in entsprechende Dateien und

  • Ă€ndere die Spaltenzahl von 2 zu 3 und fĂŒge ein weiteres .item im HTML ein.
  • Ändere --gap zu 2rem.
  • Definiere neue Variablen wie --sidebar-bg und benutze background-color: var(--sidebar-bg);.
  • Mehr Zeilen Setze zusĂ€tzliche Elemente (<div class="item">
</div>) und ordne sie mit grid-row/grid-column zu.

12-Spalten-Layout

Mehr Möglichkeiten bietet dir ein 12-Spalten-Layout.

Validator

Manchmal sieht es anders aus, als gedacht, das kann daher kommen, dass du Fehler im CSS oder HTML-Code hast, daher prĂŒfe zunĂ€chst mit dem HTML-Validator und dann mit dem CSS-Validator, bevor du an deinem VerstĂ€ndnis zweifelst.

7.5.2 Float

Du kannst auch verschiedene Grids ineinander schachteln. Wenn du jedoch keine tabellenartige Struktur, sondern z.B. ein Umfließen eines Bilds mit Text möchtest, dann kannst du float verwenden.

css layout grid Beispiel css layout grid Beispiel

Dies erreichst du z.B. durch folgenden HTML- und CSS-Code.

<img class="left" src="https://upload.wikimedia.org/wikipedia/xxx.jpg" alt="Katze">
<p>Lorem ipsum... </p>
<p>Lorem ipsum...</p>

img.left {
    float:left;
    margin: 1rem;
    max-width: 20rem;
    width: 100%; 
    height: auto;
    border-radius: 0.25rem;
}

Mit float: left; sagst du dem Bild: Schwimm nach links und lass den Text um dich herumfließen. Wenn du unbedingt unter ein fließendes Element möchtest, brauchst du eine Anweisung clear:both;, z.B.

<img class="left" src="https://upload.wikimedia.org/wikipedia/xxx.jpg" alt="Katze">
<p>Lorem ipsum... </p>
<p class="below">Immer untendrunter, auch, wenn noch Platz wÀre...</p>

.below {
  clear:both;
}

Dies veranschaulicht die folgende Abbildung css clear both

Aufgabe

Damit hast du alles, um deine eigene Webseite nach deinen Vorstellungen zu gestalten. Tipp: Fertige zunÀchst eine Skizze an, wie die Seite aussehen soll und fange dann mit dem CSS-Code an.

7.6 🎒 CSS-Frameworks

Ein CSS-Framework wie Bulma bietet dir fertige Layouts und Designs, die du sofort nutzen kannst. Du musst nur die CSS-Datei einbinden.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css">
Und die passenden Klassen zu deinen Tags hinzufĂŒgen.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Bulma Test</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title">Willkommen!</h1>
      <p class="subtitle">Diese Seite nutzt <strong>Bulma</strong>.</p>
      <button class="button is-primary">Klick mich</button>
    </div>
  </section>
</body>
</html>

Du kannst auch eine KI nutzen und ihr sagen, was von Bulma sie verwenden soll.

Neben Bulma gibt es noch viele andere CSS-Frameworks.

7.7 📂 Projektstruktur

Damit dein Projekt ĂŒbersichtlich bleibt, empfehle ich diese Struktur:

projekt/
├── index.html
├── css/
│   └── style.css
├── js/        ← (optional fĂŒr JavaScript)
└── img/       ← (Bilder)

7.8 CSS und KI

Wenn du die Grundlagen verstanden hast, kannst du auch eine KI nutzen, um CSS-Code schneller zu erzeugen.

7.9 Material