CSS - Cascading Style Sheets

Einführung in CSS

Was ist CSS?

CSS steht für Cascading Style Sheets (Kaskadierende Stilvorlagen)

CSS ist:

Die Sprache für das Design und Layout von Webseiten
Verantwortlich für Farben, Schriftarten, Abstände, Animationen und mehr
Getrennt von HTML (Trennung von Inhalt und Darstellung)
Mächtig und vielseitig

Wichtig: HTML liefert die Struktur, CSS das Aussehen!

CSS einbinden

Es gibt drei Möglichkeiten, CSS zu verwenden:

1. Externe CSS-Datei (empfohlen):

html

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

2. Internes CSS (im <head>):

html

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

3. Inline-CSS (direkt im Element):

html

<p style="color: blue;">Blauer Text</p>

Best Practice: Verwende externe CSS-Dateien für bessere Wartbarkeit und Wiederverwendbarkeit.

CSS-Syntax

css

selektor {
    eigenschaft: wert;
    weitere-eigenschaft: wert;
}

Beispiel:

css

h1 {
    color: red;
    font-size: 32px;
    text-align: center;
}

Komponenten:

Selektor - Welches Element soll gestylt werden
Eigenschaft - Was soll geändert werden
Wert - Wie soll es aussehen
Semikolon (;) - Trennt Deklarationen
Geschweifte Klammern ({}) - Umschließen den Deklarationsblock

Selektoren

Element-Selektoren

Sprechen alle Elemente eines Typs an:

css

p {
    color: green;
}

h1 {
    font-size: 36px;
}

a {
    text-decoration: none;
}

Anwendung: Alle <p>, <h1> oder <a> Elemente werden gestylt.

Klassen-Selektoren

Klassen können mehrfach verwendet werden und mit einem Punkt (.) angesprochen werden:

HTML:

html

<p class="wichtig">Wichtiger Text</p>
<p>Normaler Text</p>
<p class="wichtig">Noch ein wichtiger Text</p>

CSS:

css

.wichtig {
    color: red;
    font-weight: bold;
}

Vorteile:

Wiederverwendbar
Ein Element kann mehrere Klassen haben
Best Practice für Styling

Mehrere Klassen:

html

<p class="wichtig highlight">Text mit zwei Klassen</p>

css

.wichtig {
    color: red;
}

.highlight {
    background-color: yellow;
}

ID-Selektoren

IDs sind einzigartig und werden mit einem Hashtag (#) angesprochen:

HTML:

html

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

CSS:

css

#header {
    background-color: navy;
    color: white;
    padding: 20px;
}

Wichtig:

Jede ID darf nur einmal pro Seite verwendet werden
IDs haben höhere Priorität als Klassen
Best Practice: Bevorzuge Klassen für Styling, IDs für JavaScript

Kombinierte Selektoren

Mehrere Elemente:

css

h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: darkblue;
}

Element mit Klasse:

css

p.wichtig {
    color: red;
}

Nur <p> Elemente mit der Klasse "wichtig".

Nachfahren-Selektor:

css

.container p {
    margin: 10px;
}

Alle <p> Elemente innerhalb eines Elements mit der Klasse "container".

Direkte Kinder:

css

.container > p {
    color: blue;
}

Nur direkte <p> Kinder von "container".

Weitere nützliche Selektoren

Pseudo-Klassen:

css

a:hover {
    color: red;
}

a:visited {
    color: purple;
}

input:focus {
    border: 2px solid blue;
}

li:first-child {
    font-weight: bold;
}

li:last-child {
    border-bottom: none;
}

tr:nth-child(even) {
    background-color: #f0f0f0;
}

Pseudo-Elemente:

css

p::first-line {
    font-weight: bold;
}

p::first-letter {
    font-size: 200%;
    color: red;
}

.quote::before {
    content: "„";
}

.quote::after {
    content: """;
}

Farben

Farb-Formate

Farbnamen:

css

color: red;
background-color: blue;

Hexadezimal:

css

color: #FF0000;        /* Rot */
color: #00FF00;        /* Grün */
color: #0000FF;        /* Blau */
color: #333;           /* Kurzform für #333333 */

RGB:

css

color: rgb(255, 0, 0);           /* Rot */
background-color: rgb(0, 128, 0); /* Grün */

RGBA (mit Transparenz):

css

background-color: rgba(255, 0, 0, 0.5);  /* 50% transparentes Rot */

HSL (Hue, Saturation, Lightness):

css

color: hsl(0, 100%, 50%);     /* Rot */
color: hsl(120, 100%, 50%);   /* Grün */

Text und Schriftarten

Font-Eigenschaften

Schriftart:

css

font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", monospace;

Schriftgröße:

css

font-size: 16px;
font-size: 1.5em;    /* Relativ zur Eltern-Schriftgröße */
font-size: 1.5rem;   /* Relativ zur Root-Schriftgröße */
font-size: 100%;

Schriftstil:

css

font-weight: normal;   /* 400 */
font-weight: bold;     /* 700 */
font-weight: 600;

font-style: normal;
font-style: italic;

text-decoration: none;
text-decoration: underline;
text-decoration: line-through;

Text-Formatierung

Ausrichtung:

css

text-align: left;
text-align: center;
text-align: right;
text-align: justify;

Zeilenhöhe:

css

line-height: 1.5;      /* 1.5-fache Schriftgröße */
line-height: 24px;

Buchstabenabstand:

css

letter-spacing: 2px;
letter-spacing: 0.1em;

Wortabstand:

css

word-spacing: 5px;

Textumwandlung:

css

text-transform: uppercase;   /* GROSSBUCHSTABEN */
text-transform: lowercase;   /* kleinbuchstaben */
text-transform: capitalize;  /* Erster Buchstabe Groß */

Text-Schatten:

css

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
/* x-offset y-offset blur-radius farbe */

Box Model

Jedes HTML-Element ist eine "Box" mit folgenden Bereichen:

┌─────────────────────────────────┐
│          Margin                 │  Äußerer Abstand (transparent)
│  ┌───────────────────────────┐  │
│  │        Border             │  │  Rahmen
│  │  ┌─────────────────────┐  │  │
│  │  │      Padding        │  │  │  Innerer Abstand
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │    Content    │  │  │  │  Inhalt
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Padding (Innenabstand)

css

/* Alle Seiten gleich */
padding: 20px;

/* Vertikal | Horizontal */
padding: 10px 20px;

/* Oben | Horizontal | Unten */
padding: 10px 20px 15px;

/* Oben | Rechts | Unten | Links (Uhrzeigersinn) */
padding: 10px 20px 15px 25px;

/* Einzelne Seiten */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

Margin (Außenabstand)

css

/* Gleiche Syntax wie Padding */
margin: 20px;
margin: 10px 20px;
margin: 10px 20px 15px 25px;

/* Einzelne Seiten */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;

/* Zentrieren */
margin: 0 auto;  /* Horizontal zentrieren (benötigt width) */

/* Negative Margins */
margin-top: -10px;  /* Element nach oben verschieben */

Border (Rahmen)

Kurzform:

css

border: 2px solid black;
/* width style color */

Einzelne Eigenschaften:

css

border-width: 2px;
border-style: solid;  /* solid, dashed, dotted, double, none */
border-color: black;

Einzelne Seiten:

css

border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double orange;

Abgerundete Ecken:

css

border-radius: 10px;           /* Alle Ecken */
border-radius: 10px 20px;      /* Oben-links/Unten-rechts | Oben-rechts/Unten-links */
border-radius: 50%;            /* Kreis/Ellipse */
border-radius: 10px 20px 30px 40px;  /* Einzelne Ecken */

Width und Height

css

width: 300px;
height: 200px;

/* Prozentual */
width: 50%;
height: 100%;

/* Minimum und Maximum */
min-width: 200px;
max-width: 800px;
min-height: 100px;
max-height: 500px;

Box-Sizing:

css

box-sizing: content-box;  /* Default: width/height nur für Content */
box-sizing: border-box;   /* width/height inkl. padding und border */

Best Practice:

css

* {
    box-sizing: border-box;  /* Für alle Elemente */
}

Hintergründe

Background-Color

css

background-color: #f0f0f0;
background-color: rgba(0, 0, 0, 0.1);

Background-Image

css

background-image: url('bild.jpg');
background-image: url('https://example.com/bild.jpg');

/* Wiederholung */
background-repeat: no-repeat;
background-repeat: repeat;
background-repeat: repeat-x;   /* Nur horizontal */
background-repeat: repeat-y;   /* Nur vertikal */

/* Position */
background-position: center;
background-position: top right;
background-position: 50% 50%;
background-position: 100px 50px;

/* Größe */
background-size: cover;        /* Füllt Container, behält Verhältnis */
background-size: contain;      /* Ganzes Bild sichtbar, behält Verhältnis */
background-size: 300px 200px;  /* Exakte Größe */
background-size: 50%;

/* Fixierung */
background-attachment: fixed;   /* Bild bleibt beim Scrollen fix */
background-attachment: scroll;  /* Bild scrollt mit */

Kurzform:

css

background: #f0f0f0 url('bild.jpg') no-repeat center/cover;

Gradients

Linearer Gradient:

css

background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, yellow, green);
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));

Radialer Gradient:

css

background: radial-gradient(circle, red, blue);
background: radial-gradient(ellipse at top, red, blue);

Bilder

Bild-Styling

css

img {
    width: 100%;           /* Responsive Breite */
    max-width: 600px;      /* Maximale Größe */
    height: auto;          /* Automatische Höhe (Verhältnis bewahren) */

    display: block;        /* Entfernt Leerraum unten */
    margin: 0 auto;        /* Zentrieren */

    border-radius: 10px;   /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);  /* Schatten */
}

Object-Fit (wie Bild in Container passt)

css

img {
    width: 300px;
    height: 200px;
    object-fit: cover;     /* Füllt Container, schneidet ab */
    object-fit: contain;   /* Ganzes Bild, evtl. mit Leerraum */
    object-fit: fill;      /* Streckt Bild (verzerrt) */
    object-fit: none;      /* Original-Größe */
}

Bild-Ausrichtung

Mit Float (veraltet, aber noch relevant):

css

img {
    float: left;
    margin-right: 20px;
}

img {
    float: right;
    margin-left: 20px;
}

Mit Flexbox (modern):

css

.container {
    display: flex;
    justify-content: center;  /* Horizontal zentrieren */
    align-items: center;      /* Vertikal zentrieren */
}

Layout mit Flexbox

Flexbox-Grundlagen

Flexbox ist ein modernes Layout-System für flexible, responsive Designs.

Flex-Container erstellen:

css

.container {
    display: flex;
}

Alle direkten Kinder werden zu Flex-Items.

Flex-Direction

css

.container {
    display: flex;
    flex-direction: row;            /* Default: Links nach rechts */
    flex-direction: row-reverse;    /* Rechts nach links */
    flex-direction: column;         /* Oben nach unten */
    flex-direction: column-reverse; /* Unten nach oben */
}

Justify-Content (Hauptachse)

Verteilt Items entlang der Hauptachse (horizontal bei row):

css

.container {
    display: flex;
    justify-content: flex-start;    /* Am Anfang (Default) */
    justify-content: flex-end;      /* Am Ende */
    justify-content: center;        /* Zentriert */
    justify-content: space-between; /* Gleichmäßiger Abstand zwischen Items */
    justify-content: space-around;  /* Gleichmäßiger Abstand um Items */
    justify-content: space-evenly;  /* Völlig gleichmäßiger Abstand */
}

Beispiel:

css

.navbar {
    display: flex;
    justify-content: space-between;
}

Align-Items (Querachse)

Richtet Items entlang der Querachse aus (vertikal bei row):

css

.container {
    display: flex;
    align-items: stretch;      /* Volle Höhe (Default) */
    align-items: flex-start;   /* Oben */
    align-items: flex-end;     /* Unten */
    align-items: center;       /* Vertikal zentriert */
    align-items: baseline;     /* An Textbasislinie ausgerichtet */
}

Beispiel - Vertikal und horizontal zentrieren:

css

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  /* Volle Viewport-Höhe */
}

Flex-Wrap

css

.container {
    display: flex;
    flex-wrap: nowrap;   /* Default: Alles in eine Zeile */
    flex-wrap: wrap;     /* Umbricht auf neue Zeile */
    flex-wrap: wrap-reverse;
}

Gap

Abstand zwischen Flex-Items:

css

.container {
    display: flex;
    gap: 20px;              /* Gleicher Abstand horizontal und vertikal */
    gap: 20px 10px;         /* Vertikal | Horizontal */
    row-gap: 20px;          /* Nur vertikal */
    column-gap: 10px;       /* Nur horizontal */
}

Flex-Items Eigenschaften

Flex-Grow (Wachstum):

css

.item {
    flex-grow: 1;  /* Nimmt verfügbaren Platz ein */
}

Flex-Shrink (Schrumpfung):

css

.item {
    flex-shrink: 0;  /* Schrumpft nicht */
}

Flex-Basis (Ausgangsgröße):

css

.item {
    flex-basis: 200px;
}

Kurzform:

css

.item {
    flex: 1;  /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
    flex: 0 0 200px;  /* grow shrink basis */
}

Praktisches Flexbox-Beispiel

Einfaches 3-Spalten-Layout:

html

<div class="container">
    <div class="column">Spalte 1</div>
    <div class="column">Spalte 2</div>
    <div class="column">Spalte 3</div>
</div>

css

.container {
    display: flex;
    gap: 20px;
}

.column {
    flex: 1;  /* Alle Spalten gleich breit */
    padding: 20px;
    background-color: #f0f0f0;
}

Navigation:

html

<nav class="navbar">
    <div class="logo">Logo</div>
    <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Über</a>
        <a href="#">Kontakt</a>
    </div>
</nav>

css

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
    color: white;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

Transitions (Übergänge)

Transitions ermöglichen sanfte Animationen bei Zustandsänderungen:

Grundsyntax

css

.element {
    transition: property duration timing-function delay;
}

Einfache Transitions

Einzelne Eigenschaft:

css

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

.button:hover {
    background-color: red;
}

Mehrere Eigenschaften:

css

.button {
    background-color: blue;
    transform: scale(1);
    transition: background-color 0.3s, transform 0.3s;
}

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

Alle Eigenschaften:

css

.element {
    transition: all 0.3s ease;
}

Timing-Functions

css

transition: all 0.3s linear;      /* Gleichmäßige Geschwindigkeit */
transition: all 0.3s ease;        /* Langsam-schnell-langsam (Default) */
transition: all 0.3s ease-in;     /* Langsamer Start */
transition: all 0.3s ease-out;    /* Langsames Ende */
transition: all 0.3s ease-in-out; /* Langsamer Start und Ende */

Praktische Transition-Beispiele

Button mit Hover-Effekt:

css

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

Link-Unterstreichung:

css

.link {
    position: relative;
    text-decoration: none;
    color: black;
}

.link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: blue;
    transition: width 0.3s ease;
}

.link:hover::after {
    width: 100%;
}

Animations (Animationen)

Animationen ermöglichen komplexere Bewegungen mit Keyframes:

@keyframes definieren

css

@keyframes animationsname {
    from {
        /* Start-Zustand */
    }
    to {
        /* End-Zustand */
    }
}

/* Oder mit Prozenten: */
@keyframes animationsname {
    0% {
        /* Start */
    }
    50% {
        /* Mitte */
    }
    100% {
        /* Ende */
    }
}

Animation anwenden

css

.element {
    animation: animationsname duration timing-function delay iteration-count direction;
}

Beispiel:

css

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.box {
    animation: fadeIn 1s ease-in;
}

Animation-Eigenschaften

css

.element {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;  /* oder Zahl */
    animation-direction: normal;          /* normal, reverse, alternate, alternate-reverse */
    animation-fill-mode: forwards;        /* forwards, backwards, both */
}

Praktische Animations-Beispiele

Pulsierender Button:

css

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse-button {
    animation: pulse 2s ease infinite;
}

Rotating Spinner:

css

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}

Slide-In von links:

css

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-element {
    animation: slideIn 0.5s ease-out;
}

Bounce-Effekt:

css

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.bounce-element {
    animation: bounce 2s infinite;
}

Schatten (Shadows)

Box-Shadow

Schatten für Elemente:

css

box-shadow: x-offset y-offset blur spread color;

Beispiele:

Einfacher Schatten:

css

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Mehrere Schatten:

css

.card {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.1);
}

Innerer Schatten:

css

.element {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

Hover-Effekt mit Schatten:

css

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Glow-Effekt:

css

.button {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

Text-Shadow

Schatten für Text:

css

text-shadow: x-offset y-offset blur color;

Beispiele:

Einfacher Text-Schatten:

css

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

3D-Text-Effekt:

css

h1 {
    color: #fff;
    text-shadow:
        1px 1px 0 #ccc,
        2px 2px 0 #bbb,
        3px 3px 0 #aaa,
        4px 4px 0 #999;
}

Glow-Text:

css

h1 {
    color: white;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6;
}

Display-Property

Display-Werte

css

display: block;        /* Nimmt ganze Breite, neue Zeile */
display: inline;       /* Nur so breit wie Inhalt, keine Höhe/Breite */
display: inline-block; /* Kombiniert beides */
display: flex;         /* Flexbox */
display: grid;         /* Grid (fortgeschritten) */
display: none;         /* Versteckt Element komplett */

Beispiel:

css

.button {
    display: inline-block;  /* Erlaubt padding/margin wie block, aber inline */
    padding: 10px 20px;
}

Position

Position-Werte

css

position: static;     /* Default, normaler Fluss */
position: relative;   /* Relativ zur normalen Position */
position: absolute;   /* Relativ zum nächsten positionierten Elternelement */
position: fixed;      /* Relativ zum Viewport (bleibt beim Scrollen) */
position: sticky;     /* Wechselt zwischen relative und fixed */

Mit Positionierung:

css

.element {
    position: absolute;
    top: 20px;
    right: 30px;
    bottom: 20px;
    left: 30px;
}

Praktisches Beispiel - Fixed Header:

css

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
}

Responsive Design

Media Queries

css

/* Mobile First Ansatz */
.container {
    width: 100%;
}

/* Tablets */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

Breakpoints:

css

/* Mobile */
@media (max-width: 767px) {
    .menu {
        display: none;
    }
}

/* Tablet und größer */
@media (min-width: 768px) {
    .menu {
        display: flex;
    }
}

Best Practices

CSS-Organisation

1. Kommentare verwenden:

css

/* === Navigation === */
.navbar {
    /* Styles */
}

/* === Buttons === */
.button {
    /* Styles */
}

2. Klassen-Namenskonventionen (BEM):

css

/* Block */
.card { }

/* Block__Element */
.card__title { }
.card__content { }

/* Block--Modifier */
.card--featured { }

3. CSS-Reset:

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Performance-Tipps

Vermeide zu spezifische Selektoren:

css

/* Schlecht */
div.container > ul > li > a { }

/* Gut */
.nav-link { }

Nutze CSS-Variablen:

css

:root {
    --primary-color: #007bff;
    --spacing: 20px;
}

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

Minimiere Animationen:

css

/* Bevorzuge transform und opacity für bessere Performance */
.element {
    transform: translateX(100px);  /* Gut */
    /* left: 100px; */             /* Schlechter */
}

Vollständiges Beispiel-Projekt

HTML:

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1>Meine Website</h1>
            <nav class="nav">
                <a href="#" class="nav-link">Home</a>
                <a href="#" class="nav-link">Über</a>
                <a href="#" class="nav-link">Kontakt</a>
            </nav>
        </div>
    </header>

    <main class="main">
        <section class="hero">
            <h2>Willkommen!</h2>
            <p>Dies ist eine Beispiel-Website</p>
            <button class="button">Mehr erfahren</button>
        </section>

        <section class="cards">
            <div class="card">
                <h3>Feature 1</h3>
                <p>Beschreibung</p>
            </div>
            <div class="card">
                <h3>Feature 2</h3>
                <p>Beschreibung</p>
            </div>
            <div class="card">
                <h3>Feature 3</h3>
                <p>Beschreibung</p>
            </div>
        </section>
    </main>

    <footer class="footer">
        <p>&copy; 2025 Meine Website</p>
    </footer>
</body>
</html>

CSS:

css

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variablen */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --text-color: #333;
    --background-color: #f8f9fa;
    --spacing: 20px;
}

body {
    font-family: Arial, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing);
}

/* Header */
.header {
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav {
    display: flex;
    gap: 20px;
}

.nav-link {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.nav-link:hover {
    opacity: 0.8;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 80px var(--spacing);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.hero h2 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
}

/* Button */
.button {
    background-color: white;
    color: var(--primary-color);
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Cards */
.cards {
    display: flex;
    gap: 30px;
    padding: 60px var(--spacing);
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    flex: 1;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Footer */
.footer {
    background-color: var(--secondary-color);
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 60px;
}

/* Responsive */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        gap: 20px;
    }

    .hero h2 {
        font-size: 32px;
    }

    .cards {
        flex-direction: column;
    }
}

Ressourcen zum Weiterlernen

Dokumentation:

MDN CSS Dokumentation
CSS-Tricks
Can I Use - Browser-Kompatibilität prüfen

Praktische Tools:

CSS Grid Generator
Flexbox Froggy - Spielerisch Flexbox lernen
CSS Gradient Generator
Box Shadow Generator

Inspiration:

CodePen - CSS-Beispiele und Experimente
Dribbble - Design-Inspiration

Cheat Sheet - Wichtigste Eigenschaften

Kategorie	Eigenschaften
Text	`color`, `font-family`, `font-size`, `font-weight`, `text-align`, `line-height`
Box Model	`width`, `height`, `padding`, `margin`, `border`, `box-sizing`
Background	`background-color`, `background-image`, `background-size`, `background-position`
Flexbox	`display: flex`, `justify-content`, `align-items`, `gap`, `flex-direction`
Position	`position`, `top`, `right`, `bottom`, `left`, `z-index`
Effects	`box-shadow`, `text-shadow`, `border-radius`, `opacity`
Transitions	`transition`, `transform`
Animations	`@keyframes`, `animation`

Viel Erfolg beim Styling deiner Webseiten!

JavaScript

Praktische KI

Slides

Python

Frontend

Slides

CSS - Cascading Style Sheets ​

Einführung in CSS ​

Was ist CSS? ​

CSS einbinden ​

CSS-Syntax ​

Selektoren ​

Element-Selektoren ​

Klassen-Selektoren ​

ID-Selektoren ​

Kombinierte Selektoren ​

Weitere nützliche Selektoren ​

Farben ​

Farb-Formate ​

Text und Schriftarten ​

Font-Eigenschaften ​

Text-Formatierung ​

Box Model ​

Padding (Innenabstand) ​

Margin (Außenabstand) ​

Border (Rahmen) ​

Width und Height ​

Hintergründe ​

Background-Color ​

Background-Image ​

Gradients ​

Bilder ​

Bild-Styling ​

Object-Fit (wie Bild in Container passt) ​

Bild-Ausrichtung ​

Layout mit Flexbox ​

Flexbox-Grundlagen ​

Flex-Direction ​

Justify-Content (Hauptachse) ​

Align-Items (Querachse) ​

Flex-Wrap ​

Gap ​

Flex-Items Eigenschaften ​

Praktisches Flexbox-Beispiel ​

Transitions (Übergänge) ​

Grundsyntax ​

Einfache Transitions ​

Timing-Functions ​

Praktische Transition-Beispiele ​

Animations (Animationen) ​

@keyframes definieren ​

Animation anwenden ​

Animation-Eigenschaften ​

Praktische Animations-Beispiele ​

Schatten (Shadows) ​

Box-Shadow ​

Text-Shadow ​

Display-Property ​

Display-Werte ​

Position ​

Position-Werte ​

Responsive Design ​

Media Queries ​

Best Practices ​

CSS-Organisation ​

Performance-Tipps ​

Vollständiges Beispiel-Projekt ​

Ressourcen zum Weiterlernen ​

Cheat Sheet - Wichtigste Eigenschaften ​

CSS - Cascading Style Sheets

Einführung in CSS

Was ist CSS?

CSS einbinden

CSS-Syntax

Selektoren

Element-Selektoren

Klassen-Selektoren

ID-Selektoren

Kombinierte Selektoren

Weitere nützliche Selektoren

Farben

Farb-Formate

Text und Schriftarten

Font-Eigenschaften

Text-Formatierung

Box Model

Padding (Innenabstand)

Margin (Außenabstand)

Border (Rahmen)

Width und Height

Hintergründe

Background-Color

Background-Image

Gradients

Bilder

Bild-Styling

Object-Fit (wie Bild in Container passt)

Bild-Ausrichtung

Layout mit Flexbox

Flexbox-Grundlagen

Flex-Direction

Justify-Content (Hauptachse)

Align-Items (Querachse)

Flex-Wrap

Gap

Flex-Items Eigenschaften

Praktisches Flexbox-Beispiel

Transitions (Übergänge)

Grundsyntax

Einfache Transitions

Timing-Functions

Praktische Transition-Beispiele

Animations (Animationen)

@keyframes definieren

Animation anwenden

Animation-Eigenschaften

Praktische Animations-Beispiele

Schatten (Shadows)

Box-Shadow

Text-Shadow

Display-Property

Display-Werte

Position

Position-Werte

Responsive Design

Media Queries

Best Practices

CSS-Organisation

Performance-Tipps

Vollständiges Beispiel-Projekt

Ressourcen zum Weiterlernen

Cheat Sheet - Wichtigste Eigenschaften