🎨 Arbeitsblatt: CSS - Design-Guide

Name: ____________________ Datum: ____________________

1. Die Sprache des Designs (Syntax)

CSS funktioniert wie ein Rezept. Du sagst dem Browser, wen du ansprechen willst und was sich ändern soll.

h1 { color: blue; }

Selektor (z.B. h1, p, .box) →
Eigenschaft (z.B. color, font-size) →
Wert (z.B. blue, 20px)

2. Drei Wege der Einbindung

🛠️ Praxis: Deine erste Design-Übung

Erstelle eine Datei uebung.html und kopiere den folgenden Code hinein. Deinen neuen Code schreibst du in den style-Bereich.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Test</title>
    <style>
        
        
    </style>
</head>
<body>
    <h1>Willkommen auf meiner Seite</h1>
    <p>Ich lerne gerade CSS!</p>
    <div class="box">Ich bin eine Box!</div>
</body>
</html>
💡 So änderst du Farben:
Nutze color für den Text und background-color für den Hintergrund.
Farben kannst du als Namen schreiben (z.B. blue) oder als Hex-Code (z.B. #3498db).
Aufgabe 1:
  1. Ändere die hintergrundfarbe des body auf lightgray.
  2. Ändere die Textfarbe der Überschrift h1 auf dunkelblau (z.B. darkblue oder #001f3f).
💡 So änderst du Schriftarten:
Nutze font-family und font-size.
Beispiele: Arial, Verdana, sans-serif.
Größen: 12px (klein), 20px (groß).
Aufgabe 2:
  1. Setze die Schriftart der gesamten Seite (body) auf sans-serif.
  2. Mache den Text im Absatz (p) 12px groß.
  3. Mache die Überschrift (h1) fett (font-weight: bold;).
💡 So änderst du die Ausrichtung:
Nutze text-align.
Werte: left (links), center (mittig), right (rechts).
Aufgabe 3: Zentriere die Überschrift (h1) und den Text (p) mit text-align: center;.
💡 So gestaltest du Boxen (das Box-Modell):
- background-color: [Farbe]; → Füllt die Box mit Farbe.
- border: [Breite] [Stil] [Farbe]; → Rahmen (z.B. 2px solid black).
- padding: [Größe]; → Abstand innerhalb der Box.
- margin: [Größe]; → Abstand außerhalb der Box.
Wichtig: Nutze das HTML-Element <div class="box"> dafür!
Aufgabe 4: Gestalte die Klasse .box.
  1. Wähle eine Hintergrundfarbe (z.B. gelb).
  2. Gib ihr einen schwarzen Rahmen (2px solid black).
  3. Gib ihr einen Innenabstand (padding) von 20px.
  4. Erinnerung aus CSS: Um eine Klasse zu selektieren, musst du im CSS einen Punkt vor den Namen schreiben: .box { ... }
💡 So wechselst du zu externem CSS:
1. Erstelle eine neue Datei namens style.css.
2. Schneide alle Regeln aus dem <style>-Bereich aus und füge sie in die style.css ein (ohne das <style> Tag!).
3. Verknüpfe beide Dateien im <head> deiner HTML-Seite mit:
<link rel="stylesheet" href="style.css">

Aufgabe 5: Verschiebe dein gesamtes Design in eine externe CSS-Datei.

🌟 Finales Ziel: Dein Projekt verschönern

Nutze dein Wissen nun für deine Vorstellungs-Webseite. Erstelle eine externe Datei style.css und wende die gelernten Techniken an.