🌐 Was ist eine Website überhaupt?
Wenn ihr eine Website im Browser öffnet – egal ob YouTube, Instagram oder eure Lieblingsseite – dann liest der Browser im Hintergrund zwei Arten von Dateien: eine HTML-Datei und eine CSS-Datei.
HTML sagt dem Browser: „Hier ist ein Titel, hier ist ein Absatz, hier ist ein Bild."
CSS sagt dem Browser: „Der Titel soll blau sein, der Hintergrund hellgrau, die Buttons rund."
Einfach gesagt:
- 🏗️ HTML ist das Gerüst – die Struktur, der Inhalt
- 🎨 CSS ist die Gestaltung – Farben, Schriften, Layout
🏠 Der Hausbau-Vergleich
Stellt euch vor, ihr baut ein Haus:
- HTML = die Wände, Fenster, Türen und Räume – der Rohbau. Ihr legt fest: Wo ist die Küche? Wie viele Zimmer gibt es?
- CSS = die Tapete, Farbe, Möbel und Dekoration – das Styling. Ihr legt fest: Welche Farbe hat die Wand? Wie groß ist das Sofa?
Ein Haus ohne Inneneinrichtung ist bewohnbar, aber nicht schön. Eine Website ohne CSS funktioniert, sieht aber sehr kahl aus.
📄 Was bedeutet „externes CSS"?
Es gibt drei Möglichkeiten, CSS in HTML einzubinden. Ihr lernt heute die Profi-Methode: externes CSS.
-
❌ Inline-CSS – direkt im HTML-Tag:
<h1 style="color:blue">
Schlecht: schwer zu ändern, unübersichtlich -
⚠️ Internes CSS – im
<style>-Tag im<head>
Besser: aber gilt nur für eine Seite -
✅ Externes CSS – eigene Datei
style.css, eingebunden per
<link rel="stylesheet" href="style.css" />
Profi-Methode: eine Datei gilt für ALLE Seiten!
Der riesige Vorteil: Wenn ihr die Farbe ändert, ändert sie sich auf allen euren Seiten gleichzeitig. Ihr müsst nicht jede Seite einzeln anfassen.
🎨 Die Farben dieser Website
Diese Website verwendet die Farben aus dem IKT-Logo. So sieht eine durchdachte Farbpalette aus – und so könnt ihr eure eigene planen:
#1e3c5a
Dunkelblau
#2e6a8a
Mittelblau
#96b4d2
Hellblau
#b4d296
IKT-Grün
#f0f5fa
Hintergrund
💡 Tipp: Sucht euch auf coolors.co oder color.adobe.com eine eigene Farbpalette für eure Website!
🗺️ Was euch auf dieser Website erwartet
- Startseite – Was ist HTML & CSS? (ihr seid hier)
- Dateiaufbau – Welche Dateien braucht ihr? Wie ist der Ordner aufgebaut?
- Der Code erklärt – Was bedeutet jede Zeile? Nachschlagewerk für alle HTML- & CSS-Befehle
- Schritt-für-Schritt – Eure vollständige Bauanleitung: Thema → Farben → CSS → Seiten
- 📋 Aufgabe – Die Aufgabenstellung mit Checkliste und Beurteilungsraster