🌐 Willkommen bei CSS!

Du kennst schon HTML (das Skelett). Jetzt lernen wir, wie wir diesem Skelett Farbe, Form und Stil geben.

CSS steht für Cascading Style Sheets. Ohne CSS sieht das Internet aus wie ein langweiliges Buch aus den 90ern. Mit CSS wird es zum Magazin.

                Was wir heute lernen:
                Wie man CSS "spricht" (Syntax).
Wo man CSS schreibt (Inline, Intern, Extern).
Wie man Elemente mit Farbe und Abständen gestaltet.

            

1. Die Sprache des Designs (Syntax)

CSS funktioniert wie ein Kommando. Du sagst dem Browser genau drei Dinge:

Zutaten eines CSS-Befehls

Selektor { Eigenschaft: Wert; }

Selektor (Wer): Welches HTML-Element soll verändert werden? (z.B. h1, p, .klassenname)
Eigenschaft (Was): Was willst du ändern? (z.B. color, font-size)
Wert (Wie): Wie soll es aussehen? (z.B. blue, 20px)

Beispiel:

h1 {
    color: blue;
    text-align: center;
}

"Alle Überschriften (h1) sollen blau (color: blue) und zentriert (text-align: center) sein."

2. Drei Wege der Einbindung

Es gibt drei Orte, wo du deinen CSS-Code schreiben kannst. Richtig ist fast immer Nr. 3.

Methode A: Inline (Nur für Tests)

Schreibst du direkt in den HTML-Tag.

<p style="color: red;">Ich bin rot</p>

Methode B: Intern (Für kleine Seiten)

Schreibst du im Kopf (Head) der HTML-Datei.

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

Methode C: Extern (Der Profi-Weg!)

Du hast eine eigene Datei style.css. Das ist sauber und übersichtlich.

<!-- In der HTML Datei -->
<link rel="stylesheet" href="style.css">

3. Farben & Schriften

Farben richtig ändern

Wir unterscheiden zwischen der Textfarbe und der Hintergrundfarbe.

HTML: <h1>Ich bin eine Überschrift</h1>

CSS:

h1 {
    color: white;              
    background-color: #3498db; 
}

Ich bin eine Überschrift

Schriftgröße & Schriftart

Neben der Art (Font-Family) ist die Größe (font-size) enorm wichtig.

px: Fest. font-size: 20px;
em: Relativ. font-size: 1.5em;

12px

16px

24px

Fett oder Kursiv?

Nicht nur Größe zählt:

font-weight: bold; → Macht den Text fett.
font-style: italic; → Macht den Text kursiv.

4. Das Box-Modell & Klassen

Um Elemente wie Containers zu gestalten, nutzen wir im HTML meist ein div-Element und geben ihm eine Klasse.

Margin (Abstand außen)

Border (Rahmen)

Padding (Innenabstand)

Inhalt (Content)

Wie setzt man das um?

Schritt 1: Das HTML

<div class="meine-box">
    Das ist der Inhalt meiner Box.
</div>

Schritt 2: Das CSS (Klasse mit Punkt)

.meine-box {
    background-color: #f1c40f;
    border: 2px solid #000;
    padding: 30px;
    margin: 20px;
}

5. Komplett-Beispiel

Hier siehst du, wie HTML und CSS zusammenwirken, um eine hübsche Box zu erstellen.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Box Test</title>
    <!-- Verknüpfung mit CSS -->
    <link rel="stylesheet" 
          href="style.css">
</head>
<body>

    <h1>Meine Webseite</h1>
    
    <div class="info-box">
        Willkommen bei der Web-AG!
        Hier steht spannender Text.
    </div>

</body>
</html>

CSS Code (style.css)

h1 {
    color: #2c3e50;
    text-align: center;
}


.info-box {
    background-color: #e8f6f3;
    color: #16a085;
    
    border: 2px solid #1abc9c;
    border-radius: 10px;
    
    padding: 40px;
    margin: 30px auto;
    
    text-align: center;
    font-family: sans-serif;
}

Das Ergebnis im Browser:

Meine Webseite

Willkommen bei der Web-AG!
Hier steht spannender Text.

🚀 Jetzt bist du dran!

Nimm das Arbeitsblatt und öffne VS Code!

Schritt 1
Öffne deine HelloWorld.html (oder erstelle eine neue uebung.html).
Schritt 2
Probiere es zuerst intern mit dem <style>-Tag im Head.
Schritt 3
Wenn es funktioniert, verschiebe den Code in eine externe style.css Datei.