CSS3

Webmaster Einsteigerguide: CSS3

Dein HTML-Grundgerüst steht? Perfekt! Jetzt bringen wir Stil und Persönlichkeit auf deine Seite. Das ist der Job von CSS.

CSS steht für Cascading Style Sheets (dt. etwa „gestufte Stilvorlagen“). Es ist die Sprache, mit der du deinem HTML sagst, wie es aussehen soll: Farben, Schriftarten, Abstände, Platzierungen, Animationen, etc. Mit CSS3, der aktuellen Version, sind die Möglichkeiten vielseitig.

Was ist CSS und warum ist es unverzichtbar?

Stell dir vor, HTML ist der Rohbau deines Hauses – die Wände, Türen, Fenster. CSS ist dann der Innenarchitekt, der Maler und der Dekorateur.

CSS bestimmt:

  • Farben und Hintergründe von Texten und Elementen (color, background-color, background-image)
  • Schriftarten, Schriftgrößen und Schriftgewichte (font-family, font-size, font-weight)
  • Außenabstände zwischen Elementen (margin) und Innenabstände innerhalb eines Elements (padding)
  • Layout und Positionierung von Elementen im Seitenaufbau (z. B. mit display, Flexbox oder Grid)

Der große Vorteil von CSS ist die Trennung von Inhalt (HTML) und Darstellung (CSS). Das bringt viele Vorteile mit sich:

  • Mehr Übersicht: HTML beschreibt den strukturellen Aufbau der Seite – also, was angezeigt wird. CSS kümmert sich ausschließlich um das Aussehen.
  • Einfachere Wartung: Möchtest du z. B. die Farbe aller Überschriften ändern, brauchst du nur eine CSS-Regel anzupassen – nicht jede einzelne HTML-Zeile.
  • Flexibilität: Du kannst das komplette Design (z. B. für einen Dark Mode oder ein Redesign) ändern, ohne den HTML-Code anzufassen.

So bindest du CSS in deine Seite ein

Wie sagst du deinem HTML, welches CSS es verwenden soll? Es gibt 3 Möglichkeiten:

  1. Externes Stylesheet (meistens die beste Methode): Du schreibst dein CSS in eine eigene Datei (z.B. style.css). Diese Datei verlinkst du dann im <head> deiner HTML-Datei. Das ist die sauberste, übersichtlichste und flexibelste Methode – Standard für fast alle Webseiten! 
    <!-- Im <head> deiner HTML-Datei -->
<link rel="stylesheet" href="style.css">
  2. Internes Stylesheet: Du schreibst das CSS direkt in den <head> deiner HTML-Datei, zwischen <style> und </style> Tags. Okay für einzelne, spezielle Seiten oder kleine Tests/Korrekturen. 
    <!-- Im <head> deiner HTML-Datei -->
<style>
  body {
    background-color: #f8f8f8; /* Leicht grauer Hintergrund */
  }
  h1 {
    color: steelblue; /* Überschrift in stahlblau */
  }
</style>
  3. Inline-Styles: Du schreibst CSS direkt in ein HTML-Tag mit dem style="..." Attribut. Wenn es geht vermeiden! Es mischt Inhalt und Design, macht alles unübersichtlich und schwer wartbar. Sollte daher nur für sehr spezifische, dynamisch generierte Stile (z.B. durch JavaScript) verwendet werden. 
    <p style="color: red; font-weight: bold;">Dieser Text ist rot und fett.</p>
Gewöhne dir an, externe Stylesheets zu verwenden. Das ist professionell und hält deine Projekte sauber.

Anatomie einer CSS-Regel

Eine CSS-Regel folgt einem einfachen Schema:

/* Ein CSS-Kommentar sieht so aus */

selektor {
  eigenschaft: wert;
  andere-eigenschaft: noch-ein-wert; /* Jede Deklaration endet mit einem Semikolon */
}

/* Beispiel: */
h2 { /* Selektor: Wählt alle h2-Überschriften aus */
  color: #0056b3; /* Eigenschaft 'color', Wert '#0056b3' (blauer Farbton als Hexadezimalzahlen) */
  border-bottom: 1px solid #ccc; /* Eigenschaft 'border-bottom', Wert '1px solid #ccc' (grauer unterer Rand) */
}
  • Selektor: Damit „zielst“ du auf das HTML-Element (oder die Elemente), das du gestalten willst (z.B. h2, p, .button, #header).
  • Deklarationsblock: Die geschweiften Klammern { ... } beinhalten alle Stil-Anweisungen für den Selektor.
  • Deklaration: Eine einzelne Anweisung, bestehend aus einer Eigenschaft (was soll geändert werden? z.B. color) und einem Wert (wie soll es geändert werden? z.B. blue), getrennt durch einen Doppelpunkt (:). Jede Deklaration schließt mit einem Semikolon (;) ab.

🧠 Quiz-Pause 1:

Frage 1: Wofür steht CSS?

Frage 2: Welche Methode zur CSS-Einbindung wird für Webseiten generell empfohlen?

Frage 3: Was ist der korrekte Aufbau einer CSS-Deklaration?

Selektoren: Gezielt Elemente auswählen

Um einem Element einen Stil zu geben, musst du es erst auswählen. CSS bietet dafür ein Arsenal an Selektoren:

Die wichtigsten CSS-Selektoren:

  • Element-Selektor: Wählt alle HTML-Tags eines bestimmten Typs aus. 
    p { font-size: 16px; } /* Alle <p> Tags */
section { margin-bottom: 30px; } /* Alle <section> Tags */
  • Klassen-Selektor (.): Wählt alle Elemente mit einem bestimmten class-Attribut. Beginnt mit einem Punkt (.). Wird sehr häufig verwendet. Du kannst damit auch Elemente mit mehreren Klassen (z.B. class="btn primary") selektieren. 
    <!-- HTML -->
<button class="btn primary">Klick mich</button>
<a href="#" class="btn secondary">Mehr Infos</a>
    /* CSS */
.btn { /* Stil für alle Elemente mit class="btn" */
    display: inline-block;
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
}
.primary { /* Spezieller Stil für Primär-Buttons */
    background-color: blue;
    color: white;
}
.secondary { /* Spezieller Stil für Sekundär-Buttons */
    background-color: grey;
    color: white;
}
  • ID-Selektor (#): Wählt ein einzigartiges Element mit einem bestimmten id-Attribut aus. Beginnt mit einer Raute (#). Eine ID darf auf einer Seite nur einmal vorkommen! Wird oft für Hauptbereiche (Header, Footer, Hauptinhalt) oder spezielle Elemente (z.B. für JavaScript) verwendet. 
    <!-- HTML -->
<header id="page-header">...</header>
    /* CSS */
#page-header { /* Wählt das Element mit id="page-header" */
    background-color: #f1f1f1;
    padding: 20px;
}
    Klassen vs. IDs fürs Styling: Nutze Klassen für Stile, die du potenziell an mehreren Stellen wiederverwenden möchtest (selbst wenn es aktuell nur eine Stelle ist). Nutze IDs sparsam fürs Styling, hauptsächlich für wirklich einzigartige Elemente oder als Anker für JavaScript. Klassen sind flexibler!

Weitere nützliche CSS-Selektoren:

  • Attribut-Selektor ([]): Wählt Elemente basierend auf vorhandenen Attributen oder deren Werten. 
    input[type="checkbox"] { margin-right: 5px; } /* Alle Checkboxen */
a[target="_blank"] { background-color: yellow; } /* Alle Links, die in neuem Tab öffnen */
img[alt] { border: 1px solid #ccc; } /* Alle Bilder mit alt-Text */
  • Nachfahren-Selektor (Leerzeichen): Wählt Elemente aus, die irgendwo innerhalb eines anderen Elements sind (egal wie tief verschachtelt). 
    nav a { color: green; } /* Alle Links (<a>) innerhalb von <nav>-Elementen */
  • Kind-Selektor (>): Wählt Elemente aus, die direkte Kinder eines anderen Elements sind (nur eine Ebene tiefer). 
    ul > li { list-style-type: circle; } /* Nur <li>, die DIREKT in einem <ul> sind */
  • Pseudo-Klassen (:): Stylen Elemente basierend auf ihrem Zustand oder ihrer Position. Sehr nützlich für Interaktivität und spezielle Hervorhebungen. 
    a:hover { text-decoration: underline; } /* Link, wenn Maus darüber fährt */
input:focus { border-color: blue; outline: none; } /* Eingabefeld, das gerade aktiv ist */
button:active { transform: scale(0.98); } /* Button, während er geklickt wird */
li:first-child { font-weight: bold; } /* Erstes Listen-Element */
li:last-child { margin-bottom: 0; } /* Letztes Listen-Element */
li:nth-child(even) { background-color: #f9f9f9; } /* Jedes zweite (gerade) Listenelement */
p:not(.eingeklappt) { display: block; } /* Alle p, die NICHT die Klasse .eingeklappt haben */
  • Pseudo-Elemente (::): Ermöglichen das Stylen von Teilen eines Elements oder das Einfügen von generiertem Inhalt. 
    p::first-letter { font-size: 2em; float: left; margin-right: 5px; } /* Erster Buchstabe groß */
p::first-line { color: #555; } /* Erste Zeile eines Absatzes */
.wichtig::before { content: "Hinweis: "; font-weight: bold; } /* Fügt Text VOR dem Element ein */
.externer-link::after { content: " 🔗"; } /* Fügt Symbol NACH dem Element ein */
  • Gruppierungs-Selektor (,): Wendet die gleichen Stile auf mehrere unterschiedliche Selektoren an – übersichtlicher und spart Tipparbeit! 
    h1, h2, h3, h4, h5, h6 { /* Gilt für alle Überschriftenebenen */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
  • Universal-Selektor (*): Wählt alle Elemente aus. Wird oft für globale Resets oder das Setzen von box-sizing verwendet. 
    * {
    box-sizing: border-box;
}

Farben & Hintergründe:

Farben sind das A und O im Design.

  • color: Legt die Textfarbe fest.
  • background-color: Legt die Hintergrundfarbe fest.
  • background-image: url("bild.jpg");: Legt ein Hintergrundbild fest.
  • background-repeat, background-position, background-size: Kontrollieren, wie sich das Hintergrundbild verhält.

Farbwerte gibt es in vielen Formaten:

  • Namen: red, lightblue, black (einfach, aber begrenzt).
  • HEX: #RRGGBB (Rot, Grün, Blau hexadezimal). Sehr verbreitet sind z.B. #FF0000 (Rot), #0000FF (Blau), #333333 (Dunkelgrau). Kurzform #RGB ist ebenfalls möglich (z.B. #F00 anstatt #FF0000).
  • RGB: rgb(0-255, 0-255, 0-255). Z.B. rgb(255, 0, 0).
  • RGBA: Wie RGB, aber mit Alpha-Kanal (Transparenz) von 0 (durchsichtig) bis 1 (deckend). Z.B. rgba(0, 0, 255, 0.7) für 70% deckendes Blau. Super für Farbverläufe!
  • HSL/HSLA: Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit). Intuitiver für Farbvariationen. Z.B. hsl(120, 100%, 50%) für Grün. hsla(...) für Transparenz.
.card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px; /* Abgerundete Ecken */
    padding: 20px;
}

.card-title {
    color: #2a9d8f; /* Ein Türkiston */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter schwarzer Hintergrund */
    color: white; /* Heller Text darauf */
    padding: 15px;
}

.header-banner {
    background-image: url('images/muster.png');
    background-color: #e9c46a; /* Fallback-Farbe, falls Bild nicht lädt */
    background-repeat: repeat-x; /* Nur horizontal kacheln */
    background-position: center bottom; /* Am unteren Rand zentriert */
    padding: 40px 0;
}

So könnte es aussehen (vereinfacht):

Karten Titel

Dies ist der Text in der Karte.

Dieser Text hat einen halbtransparenten schwarzen Hintergrund.

Typografie mit CSS:

Gute Lesbarkeit und ansprechende Schriftgestaltung sind wichtig!

  • font-family: Schriftart(en). Immer Fallbacks und eine generische Familie (serif, sans-serif, monospace) am Ende angeben! 
    font-family: 'Open Sans', Roboto, Arial, sans-serif;
  • font-size: Schriftgröße (16px, 1.1rem, 110% – siehe Einheiten).
  • font-weight: Dicke (normal (400), bold (700), oder Werte wie 300, 600).
  • font-style: Stil (normal, italic).
  • line-height: Zeilenhöhe für bessere Lesbarkeit (z.B. 1.6 – ohne Einheit ist relativ zur Schriftgröße und oft am besten).
  • text-align: Ausrichtung (left, right, center, justify – Blocksatz).
  • text-decoration: Unter-, Über-, Durchstreichungen (none, underline, line-through).
  • text-transform: Groß-/Kleinschreibung (uppercase, lowercase, capitalize).
  • letter-spacing / word-spacing: Zeichen-/Wortabstand.
Neben Standardschriftarten, die bereits in Windows, Mac oder Linux enthalten sind, kannst du viele weitere Schriftarten/Fonts in deine Webseite einbinden und mit CSS verwenden. Sehr beliebt sind Google Fonts (lizenzfrei und kostenlos) und Adobe Fonts (kostenpflichtig). Wichtig: Beachte bei der Nutzung bzw. Einbindung unbedingt den Datenschutz (DSGVO), um sich vor Abmahnungen zu schützen!

🧠 Quiz-Pause 2:

Frage 1: Welcher Selektor wählt das Element mit id="main-navigation" aus?

Frage 2: Du möchtest alle Links (<a> Tags) rot färben, die sich INNERHALB eines Elements mit der Klasse .widget befinden. Welcher Selektor ist dafür geeignet?

Frage 3: Mit welcher CSS-Eigenschaft stellst du die Zeilenhöhe eines Textes ein?

Das Box-Modell: Jedes Element ist eine Kiste!

Das Box-Modell ist eines der absolut fundamentalen Konzepte in CSS. Stell dir vor, jedes HTML-Element ist eine rechteckige Box auf deiner Seite. Diese Box hat (von innen nach außen) vier Schichten:

  1. Content: Der Inhalt selbst (Text, Bild, …). Die Größe wird durch width und height beeinflusst.
  2. Padding: Der Innenabstand. Luft zwischen dem Inhalt und dem Rahmen.
  3. Border: Der Rahmen um den Inhalt und das Padding.
  4. Margin: Der Außenabstand. Platz zwischen dieser Box und anderen Elementen.

Denk an ein Gemälde im Rahmen:

  • Die Leinwand mit dem Bild ist der Content.
  • Das weiße Passepartout zwischen Bild und Rahmen ist das Padding.
  • Der sichtbare Holz- oder Metallrahmen ist der Border.
  • Der Abstand zur Wand oder zum nächsten Bild ist der Margin.
CSS Box Modell: Margin, Border, Padding, Content
Das Problem mit der Standard-Box-Berechnung:

Standardmäßig bezieht sich width nur auf den Content (box-sizing: content-box;). Wenn du dann padding oder border hinzufügst, wird die Box insgesamt breiter als der angegebene width-Wert. Das macht Layouts oft unnötig kompliziert!

Die Lösung: box-sizing: border-box;

Setzt du box-sizing: border-box;, beziehen sich width und height auf die gesamte sichtbare Box (Content + Padding + Border). Wenn du width: 300px; angibst, ist die Box inklusive Padding und Border genau 300px breit. Viel logischer!

Es ist ein weit verbreitetes Best Practice, dies global für alle Elemente zu setzen:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Padding, Border und Margin kannst du detailliert steuern:

.kiste {
  width: 80%; /* 80% der Breite des Elternelements */
  background-color: #e0f2f7;

  /* --- Innenabstand --- */
  padding-top: 15px;
  padding-right: 25px;
  padding-bottom: 15px;
  padding-left: 25px;
  /* Oder Kurzformen: */
  /* Kurzform: Oben Rechts Unten Links */
  padding: 15px 25px 15px 25px;
  /* Kurzform: Oben/Unten Rechts/Links */
  padding: 15px 25px;
  /* Kurzform: Alle 4 Seiten gleich */
  padding: 20px;

  /* --- Rahmen --- */
  border-width: 1px;
  border-style: solid;
  border-color: #0056b3;
  /* Kurzform für alle Seiten */
  border: 1px solid #0056b3;
  /* Nur die untere Seite, gepunktete Linie */
  border-bottom: 3px dotted #ccc;
  /* Abgerundete Ecken */
  border-radius: 5px;

  /* --- Außenabstand --- */
  margin-top: 10px;
  margin-bottom: 20px;
  /* Trick zum horizontalen Zentrieren von Block-Elementen: */
  margin-left: auto;
  margin-right: auto;
  /* Kombiniert: Oben 10, Rechts/Links auto, Unten 20 */
  margin: 10px auto 20px auto;
  /* Gleiche Kurzformen wie Padding */
}

Beispiel: Box-Modell in Aktion

Ich bin eine Box!
width:250px (inkl. Padding & Border dank border-box).

CSS Einheiten: Pixel, Prozente, Em & Rem

Wie groß soll etwas sein? CSS kennt verschiedene Maßeinheiten:

  • px (Pixel): Ein fester Punkt auf dem Bildschirm. Präzise, aber nicht skalierbar. Okay für feine Details wie border-width, aber schlecht für Schriftgrößen oder Abstände in responsiven Designs.
  • % (Prozent): Relativ zur Größe des Elternelements. width: 50%; = halb so breit wie das Elternelement. Gut für flexible Breiten im Layout.
  • em: Relativ zur Schriftgröße des aktuellen Elements. margin-top: 2em; = Abstand so hoch wie 2 Zeilen Text in diesem Element. Vererbung kann hier zu komplexen Berechnungen führen.
  • ⭐ rem (Root em): Relativ zur Schriftgröße des Root-Elements (also des <html>-Tags). font-size: 1.2rem; = 1.2-mal so groß wie die Basis-Schriftgröße der Seite. Sehr empfohlen für Schriftgrößen und oft auch für Abstände (Padding/Margin), weil sie die ganze Seite proportional skalieren, wenn der Nutzer die Schriftgröße im Browser ändert (Barrierefreiheit!).
  • vw / vh (Viewport width/height): Relativ zur Breite/Höhe des Browserfensters. width: 100vw; = volle Fensterbreite. Nützlich für Elemente, die sich direkt ans Fenster anpassen sollen.
  • fr (Fraction Unit): Speziell für CSS Grid (siehe unten). Teilt verfügbaren Platz in Bruchteile auf.
Setze die Basis-Schriftgröße im html-Tag (oft standardmäßig 16px) und definiere dann Schriftgrößen und viele Abstände mit rem. Nutze % oder Flexbox/Grid für Layout-Spalten. Nutze px nur für kleine, feste Werte (z.B. border: 1px solid;).

Layout – Elemente anordnen: Display, Flexbox & Grid

Wie bringst du deine Boxen an die richtige Stelle?

Grundlegend: Die display-Eigenschaft

Jedes HTML-Element hat ein Standard-Anzeigeverhalten, das du mit display ändern kannst:

  • block: Nimmt die volle verfügbare Breite ein, erzeugt Zeilenumbrüche davor und danach (wie <div>, <p>, <h1>). Breite, Höhe, Margin, Padding funktionieren wie erwartet.
  • inline: Fließt mit dem Text, nimmt nur die nötige Breite ein, kein Zeilenumbruch (wie <span>, <a>, <strong>). width, height, vertikales margin/padding wirken nicht oder nur eingeschränkt!
  • inline-block: Der Kompromiss: Verhält sich nach außen wie inline (bleibt im Textfluss), aber innen wie block (nimmt width, height, margin, padding an). Gut für kleine Blöcke nebeneinander (z.B. Buttons, Badges).
  • none: Versteckt das Element komplett (als wäre es gar nicht im HTML).
  • flex: Aktiviert das Flexbox-Layout für die direkten Kind-Elemente. Modern, mächtig für 1-dimensionale Layouts (Zeilen ODER Spalten).
  • grid: Aktiviert das CSS Grid-Layout für die direkten Kind-Elemente. Modern, mächtig für 2-dimensionale Layouts (Zeilen UND Spalten – ein Raster).

Flexbox: Dinge flexibel anordnen

Flexbox ist dein bester Freund für viele Layout-Aufgaben: Menüs, Button-Gruppen, gleichmäßige Spalten, vertikales Zentrieren – alles wird einfacher!

Du brauchst einen Flex-Container (Elternelement mit display: flex;) und darin Flex-Items (die direkten Kinder).

Wichtige Eigenschaften für den Container:

  • display: flex; (aktiviert Flexbox)
  • flex-direction: row | column | ...; (Hauptrichtung: nebeneinander oder untereinander?)
  • justify-content: flex-start | flex-end | center | space-between | ...; (Ausrichtung entlang der Hauptachse)
  • align-items: stretch | flex-start | flex-end | center | baseline; (Ausrichtung quer zur Hauptachse)
  • flex-wrap: nowrap | wrap | ...; (Dürfen Items umbrechen?)
  • gap: 10px; (Abstand zwischen den Items)

Wichtige Eigenschaften für die Items:

  • flex-grow: 1; (Darf das Item wachsen, wenn Platz ist? 1=Ja, 0=Nein)
  • flex-shrink: 1; (Darf das Item schrumpfen, wenn Platz fehlt? 1=Ja, 0=Nein)
  • flex-basis: auto | 200px | ...; (Ideale Startgröße)
  • flex: 0 1 auto; (Kurzform für grow, shrink, basis – Standard)
  • order: -1 | 0 | 1 | ...; (Reihenfolge ändern)
  • align-self: center | ...; (Individuelle Ausrichtung quer zur Achse)

Beispiel: Flexbox für drei Spalten

Drei Boxen, die sich dank flex: 1 den Platz teilen. gap sorgt für Abstand.

<!-- HTML -->
<div class="flex-container-beispiel">
    <div class="flex-item">Spalte 1</div>
    <div class="flex-item" style="background-color: dodgerblue;">Spalte 2</div>
    <div class="flex-item" style="background-color: mediumseagreen;">Spalte 3</div>
</div>
/* CSS */
.flex-container {
    display: flex; /* Flexbox aktivieren */
    gap: 1em; /* 1em Abstand zwischen den Spalten */
    background-color: #eee;
    padding: 10px;
    border: 1px solid #ccc;
}

.flex-item {
    flex: 1; /* Jedes Item soll wachsen/schrumpfen und Platz teilen */
    padding: 20px;
    color: white;
    background-color: lightcoral;
    text-align: center;
    border-radius: 4px;
}

Live-Demo:

Spalte 1
Spalte 2
Spalte 3

CSS Grid: Komplexe Raster bauen (Ausblick)

Wenn Flexbox für eine Dimension super ist, dann ist CSS Grid der Meister für zwei Dimensionen (Zeilen UND Spalten). Du kannst damit komplexe Seitenlayouts definieren, die sich präzise steuern lassen.

Du definierst ein Raster auf dem Container (display: grid) mit grid-template-columns und grid-template-rows und platzierst dann die Items in diesem Raster (oder lässt sie automatisch fließen). Grid ist extrem mächtig, aber auch etwas komplexer – ein tolles Thema für Fortgeschrittene!

.grid-container { 
  display: grid; 
  grid-template-rows: 200px 1fr 100px; 
  grid-template-columns: 25% 25% 25% 25%; 
}

🧠 Quiz-Pause 3:

Frage 1: Welcher Teil des Box-Modells schafft Platz ZWISCHEN dem Rahmen (Border) und dem Inhalt (Content)?

Frage 2: Du möchtest, dass eine Box mit width: 200px; padding: 20px; border: 5px solid black; tatsächlich nur 200px breit ist. Welcher CSS-Code hilft dabei?

Frage 3: Mit display: flex; auf einem Container – welche Eigenschaft nutzt du, um die Items darin horizontal zu zentrieren (wenn flex-direction: row; ist)?

Kaskade, Spezifität & Vererbung

Manchmal gibt es mehrere CSS-Regeln, die auf dasselbe Element zielen. Wann wird welche angewendet und überschreibt somit die anderen Regeln?

Das regelt CSS über drei Prinzipien:

  1. Kaskade (Reihenfolge): Regeln werden von oben nach unten gelesen. Wenn zwei Regeln die gleiche Wichtigkeit (Spezifität, siehe unten) haben, gewinnt die, die später im Code steht. Styles aus externen/internen Sheets werden in der Reihenfolge im HTML-Head angewendet. Inline Styles (style="...") überschreiben (fast) immer die Regeln aus den Sheets.
  2. Spezifität (Genauigkeit des Selektors): Nicht alle Selektoren sind gleich stark! Je genauer (spezifischer) ein Selektor ein Element beschreibt, desto höher sein „Gewicht“. Ein spezifischerer Selektor gewinnt immer über einen weniger spezifischen, unabhängig von der Reihenfolge!

    Die Hierarchie (vereinfacht):

    • !important – Hiermit kannst du eine Regel erzwingen. Sie überschreibt fast alles andere (außer ein anderes !important später mit gleicher Spezifität). ABER: Nutze !important so selten wie möglich! Es hebelt die Kaskade und Spezifität aus, macht CSS schwerer verständlich und zu debuggen. Es ist oft ein Zeichen für schlecht strukturiertes CSS. Besser: Nutze spezifischere Selektoren oder strukturiere dein CSS um.
    • Inline Styles (style="...") – Sehr hoch
    • ID-Selektoren (#id) – Hoch
    • Klassen- (.klasse), Attribut- ([type=...]), Pseudo-Klassen- (:hover) Selektoren – Mittel
    • Element- (p), Pseudo-Element- (::before) Selektoren – Niedrig
    • Universal-Selektor (*), Vererbte Stile – Sehr niedrig

    Kombinierte Selektoren (z.B. div#main .item a:hover) addieren die Spezifität ihrer Teile.

  3. Vererbung: Einige Eigenschaften (meist textbezogene wie color, font-family, font-size, line-height, text-align) werden vom Elternelement an die Kindelemente weitergegeben („vererbt“), solange das Kind keine eigene Regel dafür hat. Layout-Eigenschaften wie padding, margin, border, background-color werden normalerweise nicht vererbt.

Beispiel: Spezifität im Duell

<!-- HTML -->
<body>
  <div id="content">
    <p class="highlight info">Ein wichtiger Absatz im Content.</p>
  </div>
</body>
/* 1. Element (Niedrig) */
p { color: gray; }

/* 2. Klasse (Mittel) */
.highlight { color: orange; } /* Gewinnt gegen p */

/* 3. ID + Element (Hoch) */
#content p { color: blue; } /* Gewinnt gegen .highlight */

/* 4. Klasse + Klasse (Mittel + Mittel = Höher als nur Mittel) */
.highlight.info { color: green; } /* Gewinnt NICHT gegen #content p */

/* 5. ID + Klasse (Hoch + Mittel = Sehr Hoch) */
#content .highlight { color: purple; } /* Gewinnt gegen #content p */

/* 6. ID + Klasse + Klasse (Hoch + Mittel + Mittel = Am Höchsten hier) */
#content p.highlight.info { color: red; font-weight: bold; } /* Gewinnt gegen alle anderen! */

Ergebnis für den Absatz:

Ein wichtiger Absatz im Content.

CSS3 Features: Bewegung & Responsivität

CSS3 brachte tolle Möglichkeiten für visuelle Effekte und Anpassungsfähigkeit:

Transitions: Sanfte Übergänge

Statt plötzlicher Änderungen (z.B. beim Hovern) sorgt transition z.B. für einen weichen, animierten Übergang über eine bestimmte Zeit.

.demo-transition {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 10px;
    border-radius: 5px; /* Etwas schöner */
    /* Übergang für Hintergrundfarbe, Transformation und Rundung in 0.5s mit weichem Effekt */
    transition: background-color 0.5s ease, transform 0.5s ease, border-radius 0.5s ease;
}

.demo-transition:hover,
.demo-transition:active {
    background-color: orangered;
    transform: scale(1.1) rotate(15deg); /* Wird größer und dreht sich leicht */
    border-radius: 50%; /* Stark abgerundeter Rand */
    cursor: pointer; /* Handsymbol als Mauszeiger */
}

Live-Demo:

Fahr mit der Maus über die orange Box (oder tippe sie an)!

Eigene Animationen mit @keyframes

Für komplexere, wiederkehrende Animationen definierst du mit @keyframes die einzelnen Schritte und wendest sie dann mit animation auf ein Element an.

@keyframes demo-animation { /* Definiert die Animation */
    0% { background-color: gold; transform: scale(1); }
    50% { background-color: darkkhaki; transform: scale(1.05); }
    100% { background-color: gold; transform: scale(1); }
}

.demo-animation {
    width: 100px;
    height: 50px;
    background-color: gold;
    border-radius: 8px;
    animation-name: demo-animation;
    animation-duration: 2.5s; /* Dauer eines Zyklus */
    animation-iteration-count: infinite; /* Wiederholt sich unendlich */
    animation-timing-function: ease-in-out; /* Weicherer Verlauf */
}

Live-Demo:

Diese Box „pulsiert“ dank Keyframes:

Responsive Design mit Media Queries

Deine Webseite muss auf allen Geräten gut aussehen – vom Smartphone bis zum riesigen TV-Bildschirm. Das schaffst du mit Responsive Webdesign, und Media Queries sind dein wichtigstes Werkzeug dafür.

Mit @media kannst du CSS-Regeln schreiben, die nur unter bestimmten Bedingungen aktiv werden (z.B. ab einer bestimmten Bildschirmbreite).

Der „Mobile First“-Ansatz ist oft sinnvoll: Schreibe zuerst die Stile für kleine Bildschirme und füge dann mit min-width Media Queries Stile für größere Bildschirme hinzu.

/* --- Standardmäßig für kleine Screens, wie Smartphones (Mobile First) --- */
body { font-size: 16px; } /* Basis festlegen */

.container {
  width: 90%; /* Schmaler auf kleinen Screens */
  margin: 0 auto;
}

nav ul {
  padding: 0;
  list-style: none;
  text-align: center;
}
nav li {
  display: block; /* Untereinander auf Mobile */
  margin-bottom: 10px;
}

/* --- Für etwas größere Screens, wie Tablets --- */
@media (min-width: 768px) { /* Gilt ab 768px Breite */
  body { font-size: 17px; } /* Etwas größere Schrift */

  .container {
    width: 85%;
  }

  nav li {
    display: inline-block; /* Nebeneinander auf Tablets */
    margin-right: 15px;
    margin-bottom: 0;
  }
  nav li:last-child { margin-right: 0; }
}

/* --- Für größere Screens, wie PC-Bildschirme --- */
@media (min-width: 1024px) { /* Gilt ab 1024px Breite */
  body { font-size: 18px; } /* Noch etwas größere Schrift */

  .container {
    max-width: 960px; /* Feste Maximalbreite */
  }
}
Wichtig: Denk an das viewport Meta-Tag im <head> deiner HTML-Datei! Ohne das versuchen mobile Browser, die Desktop-Version zu verkleinern, und Media Queries greifen nicht richtig. 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

🧠 Quiz-Pause 4:

Frage 1: Welche dieser Regeln überschreibt normalerweise die color-Eigenschaft von p { color: blue; }?

Frage 2: Du möchtest, dass sich die Hintergrundfarbe eines Buttons beim Hovern langsam ändert. Welche CSS-Eigenschaft brauchst du dafür am Button selbst (nicht im :hover)?

Frage 3: Wie leitest du einen Block von CSS-Regeln ein, der nur für Bildschirme gilt, die mindestens 600px breit sind?

Wow! Du hast die CSS-Grundlagen gemeistert!

Fantastisch! ✨ Du bist jetzt kein CSS-Neuling mehr. Du kennst die wichtigsten Konzepte, um Webseiten zu gestalten, Elemente anzuordnen und sie sogar ein wenig zum Leben zu erwecken. HTML für die Struktur, CSS für das Aussehen – dieses Duo bildet das Fundament des modernen Webs!

Was sind gute nächste Schritte?

  1. Flexbox & Grid meistern: Übe intensiv mit Flexbox und wage dich dann an CSS Grid. Damit baust du jedes Layout!
  2. Mehr CSS-Eigenschaften entdecken: Schau dir position (relative, absolute, fixed, sticky), Pseudo-Elemente, Verläufe (gradients), Schatten (box-shadow, text-shadow), Filter (filter) und Transformationen (transform) genauer an.
  3. CSS-Frameworks ausprobieren: Wirf einen Blick auf Bootstrap oder Tailwind CSS. Sie können die Entwicklung beschleunigen, aber vergiss die Grundlagen nicht!
  4. CSS-Präprozessoren (Sass/Less): Wenn du größere Projekte machst, können Tools wie Sass mit Variablen, Mixins und Verschachtelung dein CSS organisierter und effizienter machen.
  5. JavaScript lernen: Der nächste große Sprung! Mit JavaScript fügst du Interaktivität hinzu, reagierst auf Nutzereingaben und manipulierst HTML und CSS dynamisch.
  6. Üben, nachbauen, experimentieren: Gestalte deine alten HTML-Seiten neu. Versuche, das Layout und Design interessanter Webseiten nachzubauen. Spiele mit CodePen oder ähnlichen Plattformen. Nur durchs Machen wirst du besser!

CSS ist unglaublich vielfältig und es gibt immer Neues zu lernen. Aber mit dem Wissen aus diesem Tutorial hast du eine solide Basis. Sei neugierig, sei kreativ und hab Spaß beim Gestalten des Webs!