CSS Basics - Deine Seite gestalten

CSS (Cascading Style Sheets) ist die Sprache, mit der wir das Aussehen unserer Webseiten gestalten. Während HTML die Struktur vorgibt, ist CSS für das Design zuständig.

Was ist CSS?

CSS arbeitet mit Selektoren und Eigenschaften. Du wählst ein HTML-Element aus und definierst dann, wie es aussehen soll.

selektor {
    eigenschaft: wert;
}

Beispiel:

h1 {
    color: blue;
    font-size: 32px;
}

CSS in HTML einbinden

Es gibt 3 Möglichkeiten:

1. Inline CSS (nicht empfohlen)

<p style="color: red;">Roter Text</p>

2. Internal CSS (im `<head>`)

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

3. External CSS (separate Datei) ✅ BESTE METHODE

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

CSS in HTML einbinden

<!DOCTYPE html>
<html lang="de">
<head>
    <title>CSS Beispiel</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }
        
        h1 {
            color: #2563eb;
            text-align: center;
        }
        
        p {
            color: #333;
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .highlight {
            background-color: yellow;
            padding: 2px 4px;
        }
    </style>
</head>
<body>
    <h1>Willkommen zu CSS!</h1>
    <p>Diese Seite ist mit CSS gestylt. <span class="highlight">Dieser Text ist hervorgehoben!</span></p>
</body>
</html>

Selektoren - Elemente auswählen

Element Selektor

p {
    color: blue;
}

Wählt ALLE <p> Elemente aus.

Class Selektor (mit Punkt)

.wichtig {
    font-weight: bold;
}

<p class="wichtig">Wichtiger Text</p>

ID Selektor (mit Raute)

#header {
    background-color: navy;
}

<div id="header">Header</div>

Unterschied Class vs ID:

Class: Kann mehrfach verwendet werden
ID: Nur 1x pro Seite!

Kombinierte Selektoren

/* Alle p innerhalb von div */
div p {
    color: red;
}

/* Nur direkte Kinder */
div > p {
    color: blue;
}

/* Mehrere Elemente */
h1, h2, h3 {
    font-family: Arial;
}

Farben

Named Colors

color: red;
color: blue;
color: darkgreen;

Hex Colors

color: #FF0000;  /* Rot */
color: #0000FF;  /* Blau */
color: #333333;  /* Dunkelgrau */

RGB / RGBA

color: rgb(255, 0, 0);        /* Rot */
color: rgba(255, 0, 0, 0.5);  /* Rot, 50% transparent */

Farben und Boxen gestalten

<!DOCTYPE html>
<html lang="de">
<head>
    <title>CSS Farben</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .box {
            background-color: #3b82f6;
            color: white;
            padding: 30px;
            margin: 20px 0;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: all 0.3s;
        }
        
        .box:hover {
            background-color: #2563eb;
            transform: scale(1.05);
            box-shadow: 0 8px 12px rgba(0,0,0,0.2);
        }
        
        .box-green {
            background-color: #10b981;
        }
        
        .box-green:hover {
            background-color: #059669;
        }
        
        .box-purple {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
    </style>
</head>
<body>
    <h1>Farben in CSS</h1>
    
    <div class="box">
        <h2>Box 1 - Blau</h2>
        <p>Fahre mit der Maus über mich!</p>
    </div>
    
    <div class="box box-green">
        <h2>Box 2 - Grün</h2>
        <p>Ich habe eine andere Farbe!</p>
    </div>
    
    <div class="box box-purple">
        <h2>Box 3 - Gradient</h2>
        <p>Ich habe einen Farbverlauf!</p>
    </div>
</body>
</html>

Text Styling

/* Schriftart */
font-family: Arial, sans-serif;

/* Schriftgröße */
font-size: 16px;
font-size: 1.5rem;

/* Schriftgewicht */
font-weight: bold;
font-weight: 700;

/* Schriftstil */
font-style: italic;

/* Textausrichtung */
text-align: left;
text-align: center;
text-align: right;

/* Textdekoration */
text-decoration: underline;
text-decoration: none;

/* Zeilenhöhe */
line-height: 1.6;

/* Buchstabenabstand */
letter-spacing: 2px;

Box Model - Das wichtigste Konzept!

Jedes HTML-Element ist eine Box mit:

+---------------------------+
|        Margin             |  ← Außenabstand
|  +---------------------+  |
|  |     Border          |  |  ← Rahmen
|  |  +---------------+  |  |
|  |  |   Padding     |  |  |  ← Innenabstand
|  |  |  +---------+  |  |  |
|  |  |  | Content |  |  |  |  ← Inhalt
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

.box {
    /* Content */
    width: 300px;
    height: 200px;
    
    /* Padding (Innenabstand) */
    padding: 20px;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    /* Kurzform: padding: top right bottom left; */
    padding: 10px 15px 10px 15px;
    /* Kurzform: padding: vertikal horizontal; */
    padding: 10px 15px;
    
    /* Border (Rahmen) */
    border: 2px solid black;
    border-radius: 10px;  /* Abgerundete Ecken */
    
    /* Margin (Außenabstand) */
    margin: 20px;
    margin-top: 10px;
    margin: auto;  /* Horizontal zentrieren */
}

Box Model verstehen

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Box Model</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f0f0f0;
        }
        
        .box-demo {
            background-color: #3b82f6;
            color: white;
            
            /* Content */
            width: 200px;
            
            /* Padding (Innenabstand) - grüner Bereich */
            padding: 30px;
            
            /* Border (Rahmen) - gelber Bereich */
            border: 10px solid #fbbf24;
            
            /* Margin (Außenabstand) - transparenter Bereich */
            margin: 40px;
            
            /* Extras */
            border-radius: 10px;
        }
        
        .box-shadow {
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <h1>Box Model Demo</h1>
    <p>Öffne die Browser DevTools (F12) und inspiziere die Box!</p>
    
    <div class="box-demo box-shadow">
        <strong>Content Bereich</strong>
        <p>width: 200px</p>
        <p>Der blaue Bereich</p>
    </div>
    
    <p>Padding = Grüner Bereich (30px)</p>
    <p>Border = Gelber Rahmen (10px)</p>
    <p>Margin = Außenabstand (40px, unsichtbar)</p>
</body>
</html>

Display Property

Bestimmt, wie ein Element dargestellt wird:

/* Block (volle Breite, neue Zeile) */
display: block;

/* Inline (bleibt in Zeile) */
display: inline;

/* Inline-Block (Kombination) */
display: inline-block;

/* Verstecken */
display: none;

/* Flexbox (später mehr) */
display: flex;

/* Grid (später mehr) */
display: grid;

Backgrounds

/* Farbe */
background-color: #3b82f6;

/* Bild */
background-image: url('bild.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

/* Gradient */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Kurzform */
background: #3b82f6 url('bild.jpg') center/cover no-repeat;

Shadows

/* Box Shadow */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
box-shadow: horizontal vertical blur spread color;

/* Text Shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

📝 Quiz

Welche CSS-Eigenschaft ändert die Schriftfarbe?

colorfont-colortext-colorforeground-color

Transitions - Sanfte Übergänge

.button {
    background-color: blue;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: darkblue;
    transform: scale(1.1);
}

Interaktive Buttons mit Transitions

<!DOCTYPE html>
<html lang="de">
<head>
    <title>CSS Transitions</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            text-align: center;
        }
        
        .button {
            display: inline-block;
            padding: 15px 30px;
            margin: 10px;
            background-color: #3b82f6;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .button:hover {
            background-color: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .button-green {
            background-color: #10b981;
        }
        
        .button-green:hover {
            background-color: #059669;
            transform: scale(1.05);
        }
        
        .button-red {
            background-color: #ef4444;
        }
        
        .button-red:hover {
            background-color: #dc2626;
            transform: rotate(2deg);
        }
    </style>
</head>
<body>
    <h1>Hover über die Buttons!</h1>
    
    <a href="#" class="button">Normaler Button</a>
    <a href="#" class="button button-green">Grüner Button</a>
    <a href="#" class="button button-red">Roter Button</a>
</body>
</html>

Best Practices

Verwende Classes statt IDs für Styling
Externe Stylesheets für größere Projekte
Konsistente Benennung (z.B. BEM: Block__Element--Modifier)
Mobile First - Erst für kleine Bildschirme designen
CSS Variables für wiederverwendbare Werte:

:root {
    --primary-color: #3b82f6;
    --spacing: 20px;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing);
}

⚡

Tipps & Tricks

Browser DevTools für CSS

F12 drücken und CSS live bearbeiten:

Rechtsklick auf Element → "Inspizieren"
Im Styles-Panel Eigenschaften ändern
Neue Eigenschaften hinzufügen (+ Symbol)
Farben mit Color Picker auswählen
Computed Styles checken (endgültige Werte)

DevTools Shortcuts:

Strg + Shift + C → Element-Auswahl aktivieren
Hover-Zustände simulieren (:hover, :active, :focus)
Box-Model visualisieren (Margin, Padding, Border)
CSS-Regeln ein/ausschalten (Checkbox)

CSS Shortcuts & Best Practices

Kurzschreibweisen nutzen:

/* Lange Version */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

/* Kurz: oben rechts unten links (Uhrzeigersinn) */
padding: 10px 20px 10px 20px;

/* Noch kürzer: oben/unten links/rechts */
padding: 10px 20px;

Farb-Tools:

coolors.co → Farbpaletten generieren
Adobe Color → Farbharmonien erstellen
contrast-ratio.com → Kontrast prüfen (Accessibility)

CSS Variables verwenden

Spare Zeit mit wiederverwendbaren Werten:

:root {
    --primary: #3b82f6;
    --secondary: #8b5cf6;
    --spacing: 20px;
    --radius: 8px;
}

.button {
    background: var(--primary);
    padding: var(--spacing);
    border-radius: var(--radius);
}

Vorteil: Eine Farbe ändern = überall geändert!

Performance-Tipps

Vermeide zu spezifische Selektoren:
- ❌ #header .nav ul li a (zu spezifisch)
- ✅ .nav-link (einfach und schnell)
Nutze Klassen statt IDs für Styling:
- IDs nur für JavaScript
- Klassen für CSS (wiederverwendbar!)
CSS-Dateien minimieren:
- Tools wie cssnano oder PurgeCSS
- Ungenutztes CSS entfernen
Animationen optimieren:
- Nutze transform und opacity (GPU-beschleunigt)
- Vermeide width, height, top, left zu animieren

❌

Häufige Fehler

Fehler 1: Box-Sizing vergessen

❌ FALSCH:

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Tatsächliche Breite: 350px (300 + 20 + 20 + 5 + 5) */

✅ RICHTIG:

* {
    box-sizing: border-box;
}

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Tatsächliche Breite: 300px */

Fehler 2: Zu viele !important

❌ FALSCH:

.text {
    color: blue !important;
}
.special {
    color: red !important;
}
/* Schwer zu überschreiben, unübersichtlich */

✅ RICHTIG:

.text {
    color: blue;
}
.text.special {
    color: red;
}
/* Spezifischere Selektoren nutzen */

Fehler 3: Fehlende Einheiten

❌ FALSCH:

.box {
    width: 100;  /* Fehlt px, %, em, etc. */
}

✅ RICHTIG:

.box {
    width: 100px;
    /* oder: 100%, 10em, 50vw, etc. */
}

Ausnahme: line-height kann ohne Einheit sein (z.B. line-height: 1.5)

Fehler 4: Z-Index ohne Position

❌ FALSCH:

.popup {
    z-index: 999;  /* Funktioniert nicht! */
}

✅ RICHTIG:

.popup {
    position: relative;  /* oder absolute, fixed */
    z-index: 999;
}

Warum? z-index funktioniert nur mit Position-Eigenschaft!

🔍

Debugging & Troubleshooting

CSS-Probleme debuggen

1. Element wird nicht angezeigt?

Prüfe display: none in DevTools
Prüfe ob Element außerhalb des Viewports (position: absolute)
Prüfe ob opacity: 0 oder visibility: hidden
Prüfe ob Eltern-Element overflow: hidden hat

2. Styling wird nicht angewendet?

Wird die CSS-Datei geladen? (Network-Tab in DevTools)
Ist der Selektor korrekt? (Copy Selector in DevTools)
Wird die Regel überschrieben? (Durchgestrichene Regeln in DevTools)
Rechtschreibfehler in Property-Namen? (DevTools zeigt Warnung)

3. Layout ist kaputt?

Aktiviere Browser-Outline: * { outline: 1px solid red; }
Prüfe Box-Model in DevTools
Prüfe box-sizing Eigenschaft
Prüfe für overflow Probleme

4. Farbe sieht anders aus?

Prüfe in verschiedenen Browsern
Prüfe Bildschirm-Farbprofil
Nutze DevTools Color Picker für exakte Werte

Nützliche Browser Extensions

CSS Peeper → CSS-Eigenschaften kopieren
WhatFont → Schriftarten identifizieren
ColorZilla → Farben von Webseiten picken
PerfectPixel → Design-Overlays für Pixel-Perfect

🎯

Zusammenfassung

Du hast gelernt:

✅ CSS stylt HTML mit Selektoren, Properties und Values
✅ 3 Wege CSS einzubinden: Inline, Internal, External
✅ Selektoren: Element, Klasse (.class), ID (#id)
✅ Box Model: Content, Padding, Border, Margin
✅ Farben mit Hex (#ff0000), RGB, HSL
✅ Wichtigste Properties: color, background, font, width, height, padding, margin
✅ Transitions für smooth Übergänge

Key Takeaways:

Immer box-sizing: border-box nutzen
Klassen für Styling, IDs für JavaScript
Browser DevTools sind dein bester Freund
CSS Variables sparen Zeit und Tipparbeit
!important vermeiden (bessere Selektoren nutzen)
Performance: transform und opacity für Animationen

CSS Cheat Sheet:

/* Zentrieren */
.center {
    margin: 0 auto;        /* Horizontal */
    text-align: center;    /* Text */
}

/* Flexbox Zentrieren */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsiv */
img {
    max-width: 100%;
    height: auto;
}

Übungsaufgaben

Styled Card:
- Erstelle eine Card mit Bild, Titel, Text
- Padding, Border, Border-Radius
- Hover-Effekt
Navigation Bar:
- Horizontale Link-Liste
- Hover-Effekte
- Aktiver Link (andere Farbe)
Button Collection:
- 5 verschiedene Button-Styles
- Unterschiedliche Farben
- Verschiedene Hover-Effekte

Nächste Schritte

Flexbox für moderne Layouts
CSS Grid für komplexe Layouts
Responsive Design mit Media Queries
CSS Animations

Viel Erfolg! 🚀

CSS Basics - Deine Seite gestalten

CSS Basics - Deine Seite gestalten

Was ist CSS?

CSS in HTML einbinden

1. Inline CSS (nicht empfohlen)

2. Internal CSS (im <head>)

3. External CSS (separate Datei) ✅ BESTE METHODE

Selektoren - Elemente auswählen

Element Selektor

Class Selektor (mit Punkt)

ID Selektor (mit Raute)

Kombinierte Selektoren

Farben

Named Colors

Hex Colors

RGB / RGBA

Text Styling

Box Model - Das wichtigste Konzept!

Display Property

Backgrounds

Shadows

📝 Quiz

Transitions - Sanfte Übergänge

Best Practices

Tipps & Tricks

Browser DevTools für CSS

CSS Shortcuts & Best Practices

CSS Variables verwenden

Performance-Tipps

Häufige Fehler

Fehler 1: Box-Sizing vergessen

Fehler 2: Zu viele !important

Fehler 3: Fehlende Einheiten

Fehler 4: Z-Index ohne Position

Debugging & Troubleshooting

CSS-Probleme debuggen

Nützliche Browser Extensions

Zusammenfassung

Übungsaufgaben

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

CSS Farben - hex, rgb, rgba, hsl erklärt

CSS Grundlagen: Dein erstes Stylesheet

CSS Backgrounds & Borders - Hintergründe & Rahmen stylen

2. Internal CSS (im `<head>`)