03 – CSS-Grundlagen 🎨

Gestalte das Aussehen deiner Webseite – sauber und strukturiert

🎨 1. Was ist CSS?

CSS (Cascading Style Sheets) definiert das Aussehen einer HTML-Seite: Farben, Schriften, Abstände, Layouts.

Ohne CSS wäre das Web grau, linksbündig und ohne Struktur – wie ein reiner Text.

💡 Prinzip: HTML = Inhalt | CSS = Design | JavaScript = Verhalten

Bis jetzt hast du gelernt, wie man Inhalte strukturiert (mit HTML). Jetzt lernst du, wie man diese Inhalte gestaltet – mit CSS.

⚠️ Wichtig: Halte Inhalt (HTML) und Design (CSS) strikt getrennt! Das macht deine Website übersichtlicher, wartbarer und professioneller.

📝 2. CSS-Syntax: Selektor, Eigenschaft, Wert

Jede CSS-Regel besteht aus drei klar definierten Teilen:

Selektor – wählt ein oder mehrere HTML-Elemente aus (z. B. h1, .highlight, #header)
Eigenschaft – legt fest, was verändert wird (z. B. color, font-size)
Wert – definiert wie es verändert wird (z. B. #e67e22, 24px)

Diese drei Teile bilden eine Regel, die immer in geschweifte Klammern geschrieben wird.

          h1 {
  color: #2ecc71;
  font-size: 2rem;
}
        

          Das ist eine grüne Überschrift
        

Der allgemeine Aufbau einer CSS-Regel:

/* Kommentar (wird vom Browser ignoriert) */
selektor {
  eigenschaft: wert;
  eigenschaft: wert;
}

⚠️ Achte auf die Syntax:

Geschweifte Klammern { } umschließen den Regelblock
Nach jeder Eigenschaft folgt ein Doppelpunkt
Fast jeder Wert endet mit einem Semikolon (;)

📚 Vertiefung auf W3Schools – CSS Syntax

W3Schools erklärt die CSS-Syntax Schritt für Schritt mit interaktiven Beispielen.

🔗 W3Schools: CSS Syntax

📂 3. Drei Arten, CSS einzubinden

Es gibt drei Möglichkeiten – aber nur eine ist für echte Projekte geeignet:

Inline-CSS: direkt im HTML-Tag (z. B. <p style="color:red">) → ❌ schlecht – nur für Ausnahmen
Interne CSS: im <head> mit <style> → ❌ okay für Tests, aber nicht für echte Projekte
Externe CSS: in einer separaten .css-Datei → ✅ das Ziel!

Warum extern? → Du kannst das Design auf allen Seiten gleichzeitig ändern. → Dein HTML bleibt sauber und lesbar. → Profis machen es so – und du lernst es gleich richtig.

1. Inline-CSS (vermeiden!)

<h1 style="color: red;">Titel</h1>

❌ Nachteil: Mischung von Inhalt und Design – schwer zu warten!

2. Interne CSS (im <head>)

<head>
  <style>
    h1 { color: red; }
  </style>
</head>

❌ Nachteil: Funktioniert nur für diese eine Seite – keine Wiederverwendung!

3. Externe CSS (✅ empfohlen!)

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

💡 Vorteil: Einmal schreiben – auf allen Seiten nutzen! Sauber, wartbar, professionell.

📚 Vertiefung auf W3Schools – CSS Selektoren

Erfahre, wie du gezielt Elemente auswählst – von einfachen Tags bis zu komplexen Kombinationen.

🔗 W3Schools: CSS Selectors

🌈 4. Farben in CSS – Drei Schreibweisen

Farben kannst du auf drei Arten definieren:

Farbnamen: tomato, blue (eingeschränkt, ca. 140 Namen)
HEX: #e67e22 (6-stellig, basierend auf RGB)
RGB: rgb(230, 126, 34) (0–255 pro Kanal)

💡 Empfehlung: Nutze HEX – es ist präzise, kurz und überall unterstützt.

📚 Vertiefung auf W3Schools – CSS Farben

Alle Farbformate im Überblick – mit Farbwähler und Beispielen.

🔗 W3Schools: CSS Colors

🎨 5. Farben interaktiv – RGB & HEX verstehen

Farben im Web basieren auf dem RGB-System (Rot, Grün, Blau). Jeder Kanal hat einen Wert von 0 bis 255. HEX ist nur eine Abkürzung davon!

Rot: 128

Grün: 128

Blau: 128

RGB: rgb(128, 128, 128)
HEX: #808080

💡 Tipp: Gleiche Werte = Graustufe! Höhere Werte = heller.

🔤 6. Schriften & Textgestaltung

p {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  color: #2c3e50;
  line-height: 1.6;
}

Dieser Text zeigt die Wirkung von Schrift, Größe, Farbe und Zeilenabstand.

⚠️ Achtung: Immer mindestens eine Ersatzschrift (z. B. sans-serif) angeben!

🖼️ 7. Bildformate – Kurzübersicht

Wenn du Bilder in Webseiten einbindest, wähle das richtige Format:

Format	Eigenschaften	Verwendung
`.jpg`	Verlustbehaftet, kleine Datei	Fotos, komplexe Bilder
`.png`	Verlustfrei, Transparenz	Logos, Grafiken mit Transparenz
`.gif`	Animation, nur 256 Farben	Einfache Animationen (z. B. aus GIMP)
`.svg`	Vektor, beliebig skalierbar	Icons, Logos, Illustrationen (perfekt für dein Tutorial-Logo!)
`.webp`	Modern, klein, guter Support	Wenn du moderne Browser voraussetzen kannst

💡 Empfehlung für Anfänger: Nutze .jpg für Fotos, .png für Grafiken, .svg für Logos.

🖼️ 7.1 Bilder richtig einbinden – lokal, nicht extern

Bilder werden in HTML mit dem <img>-Element eingebunden:

<img src="bilder/logo.png" alt="Logo der Schule">

Der src-Wert ist ein relativer Pfad zur Bilddatei – nicht ein Link zu einer fremden Website!

⚠️ Niemals externe Bild-URLs verwenden!
Beispiel für falsch:
<img src="https://irgendwo-extern.de/bild.jpg">

Das nennt man „Hotlinking“ – es verbraucht die Bandbreite anderer Seiten,
verstößt oft gegen Urheberrecht und führt zu toten Bildern, sobald die Quelle gelöscht wird.

Wo speicherst du Bilder in deinem Projekt?

Erstelle einen Ordner assets/ (oder bilder/) im Hauptverzeichnis deines Projekts:

mein-projekt/
    ├── index.html
    ├── css/
    │   └── style.css
    └── assets/
        └── bilder/
            ├── profil.jpg
            └── banner.png

Dann verlinkst du so:

<img src="assets/bilder/profil.jpg" alt="Mein Profilbild">

💡 Merke: Alle Inhalte deiner Website – HTML, CSS, Bilder, PDFs –
gehören in einen gemeinsamen Projektordner.
So funktioniert deine Website überall – auf dem Schulserver, zu Hause und später im Portfolio.

⚖️ 8. Warum Bildgrößen optimieren?

Ein ungefiltertes Handybild kann **5 MB** groß sein – eine Webseite sollte insgesamt **unter 1 MB** laden. Große Bilder führen zu:

Langen Ladezeiten
Höherem Datenverbrauch (besonders mobil)
Schlechterem Ranking in Suchmaschinen

⚠️ Regel: Skaliere Bilder vor dem Upload auf die maximale Anzeigegröße!

So optimierst du Bilder einfach:

Größe anpassen: Nutze z. B. GIMP (kostenlos!) → „Bild → Bildgröße“
Qualität reduzieren: Bei JPG: Qualität auf 70–80 % → oft kaum sichtbarer Unterschied, aber 70 % kleinere Datei
Online-Tools: Squoosh.app (Google) – einfach, webbasiert, keine Installation

💡 Praxis-Tipp: Für eine Website-Breite von 900px brauchst du Bilder max. 1000px breit – nicht 4000px!

🧠 9. KI als Lernpartner – guter Prompt

❌ Schlecht: „Mach mir CSS.“ ✅ Gut: „Kannst du mir eine externe CSS-Regel zeigen, die alle Überschriften in unserem Orange (#e67e22) darstellt, mit zentrierter Schrift und Schatten?“