🎄Willkommen zum 6. Türchen 🎄

– Wir erstellen das Design (CSS) –

Super Moritz! Deine Webseite hat jetzt schon eine bunte Überschrift, einen eigenen Grußtext und sogar ein Weihnachtsbild – richtig cool! 😎
Heute machen wir den nächsten großen Schritt: Wir erstellen eine eigene Design-Datei für deine Webseite! Diese Datei heißt CSS und sorgt für Farben, Schrift und Hintergrund.

📝 Deine Aufgabe heute

Du erstellst eine neue Datei namens style.css und verbindest sie mit deiner Webseite.

Schritt-für-Schritt-Anleitung

Erstellen der css Datei

Öffne deinen Projektordner
moritz-weihnachtsseite
Mache einen Rechtsklick → Neue Datei erstellen.
Nenne die Datei genau:
style.css
Öffne die Datei mit einem Texteditor.
Schreibe diesen Text hinein:

body {
background-color: #fff5e6;
font-family: Arial, sans-serif;
text-align: center;
}

h1 {
color: darkred;
}

Speichere die Datei.

Jetzt verbinden wir das Design mit deiner Webseite

Öffne jetzt deine Datei
index.html
Suche ganz oben im Dokument nach etwas wie
<head>
Direkt darunter schreibst du diese Zeile
<link rel="stylesheet" href="style.css">
Speichern nicht vergessen!

🎉 Was jetzt passieren sollte

Wenn du deine Webseite neu im Browser öffnest, dann:

ist der Hintergrund hell gefärbt
ist die Schrift anders
ist deine Überschrift dunkelrot

Das bedeutet: Dein eigenes Design funktioniert! 🥳

🎯 Tagesziel erreicht

Du hast deine erste Design-Datei erstellt
Du hast gelernt, wie Webseiten ihr Aussehen bekommen
Deine Webseite sieht jetzt professioneller aus

🎁 Morgen geht es weiter:

Dann bauen wir eine richtige Navigation, damit man zwischen Weihnachts- und Neujahrsseite wechseln kann!