CSS Grundlagen für Anfänger

1. Selektoren

Element-, Klassen- und ID-Selektoren

/* Element-Selektor */
p { color: blue; }

/* Klassen-Selektor */
.meinText { font-weight: bold; }

/* ID-Selektor */
#haupttitel { font-size: 2em; }
                        

Beispiel-HTML:
<p>Text</p>
<p class="meinText">Fetter Text</p>
<h1 id="haupttitel">Titel</h1>

Mit Selektoren bestimmst du, welche Elemente vom CSS betroffen sind. Klassen mit Punkt, IDs mit #.

2. Farben & Hintergründe

Farbangaben und Hintergrund

/* Farbwerte */
h2 { color: #e17055; } /* Hex */
p { color: rgb(24, 90, 157); } /* RGB */
span { color: rgba(67, 206, 162, 0.7); } /* RGBA mit Transparenz */

/* Hintergrundfarbe */
body { background-color: #eaf6fb; }

/* Gradient als Hintergrund */
.header {
    background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
}
                        

Beispiel-HTML:
<h2>Farbiger Titel</h2>
<p>Normaler Text</p>
<span>Transparenter Text</span>

Farben können als Namen, Hex (#FFAA00), RGB oder RGBA angegeben werden. Gradients erzeugen Farbverläufe.

3. Box-Modell

Abstand, Rahmen und Grösse

.box {
    margin: 20px;         /* Aussenabstand */
    padding: 15px;        /* Innenabstand */
    border: 2px solid #43cea2;
    width: 300px;
    height: 120px;
}
                        

Beispiel-HTML:
<div class="box">Box-Inhalt</div>

Das Box-Modell besteht aus margin (aussen), border (Rahmen), padding (innen) und der eigentlichen Grösse.

4. Schrift & Text

Schriftarten und Textgestaltung

body {
    font-family: 'Segoe UI', Verdana, Arial, sans-serif;
    font-size: 18px;
}

h1 {
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    color: #185a9d;
}

p {
    font-style: italic;
    line-height: 1.8;
}
                        

Beispiel-HTML:
<h1>Überschrift</h1>
<p>Text mit Zeilenabstand</p>

Mit font-family, font-size und text-align gestaltest du die Schrift und den Text auf deiner Seite.

5. Layout: Display, Float & Clear

Block, Inline & Floating

.block {
    display: block;
    background: #dff9fb;
}
.inline {
    display: inline;
    color: #e17055;
}
.left {
    float: left;
    width: 50px;
    height: 50px;
    background: #43cea2;
}
.clear {
    clear: left;
}
                        

Beispiel-HTML:
<div class="block">Block</div>
<span class="inline">Inline</span>
<div class="left">Float</div>
<div class="clear">Clear</div>

Mit display, float und clear kannst du das Layout von Elementen beeinflussen. Block nimmt volle Breite, Inline nur Inhalt.

6. Flexbox

Flexibles Layout

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: #eaf6fb;
    padding: 15px;
}
.flex-item {
    background: #43cea2;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
}
                        

Beispiel-HTML:
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

Flexbox macht das Layout flexibel und einfach: Reihen, Spalten, Abstand und Ausrichtung sind schnell steuerbar.

7. CSS Grid

Raster-Layout

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
    background: #dff9fb;
    padding: 15px;
}
.grid-item {
    background: #185a9d;
    color: white;
    padding: 12px;
    border-radius: 6px;
}
                        

Beispiel-HTML:
<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
</div>

Mit CSS Grid kannst du komplexe, responsive Rasterlayouts definieren.

8. Positionierung

Absolute, Relative & Fixed

.relative {
    position: relative;
    left: 20px;
    top: 10px;
}
.absolute {
    position: absolute;
    right: 10px;
    top: 30px;
}
.fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #e17055;
    color: white;
    padding: 5px 15px;
}
.sticky {
    position: sticky;
    top: 0;
    background: #43cea2;
}
                        

Beispiel-HTML:
<div class="relative">Relativ</div>
<div class="absolute">Absolut</div>
<div class="fixed">Fixiert</div>
<div class="sticky">Sticky</div>

Mit position steuerst du die Lage von Elementen: relativ zum Fluss, absolut im Container, fixiert am Bildschirm.

9. Pseudoklassen & Pseudoelemente

Hover, Focus und spezielle Elemente

a:hover { color: #e17055; }
input:focus { border-color: #43cea2; }
p:first-child { font-weight: bold; }
li:last-child { color: #185a9d; }
.box::before { content: "★ "; color: #e17055; }
.box::after { content: " ✔"; color: #43cea2; }
                        

Beispiel-HTML:
<a href="#">Link</a>
<input type="text">
<p>Erster Absatz</p>
<ul><li>Item 1</li><li>Item 2</li></ul>
<div class="box">Box-Inhalt</div>

Pseudoklassen reagieren auf Zustände (hover, focus), Pseudoelemente (before, after) fügen Inhalt hinzu.

10. Responsive Design & Media Queries

Mobile Anpassungen mit Media Query

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }
    .grid-container {
        grid-template-columns: 1fr;
    }
}
                        

Beispiel-HTML:
<div class="grid-container">...</div>

Mit Media Queries passt du das Layout für verschiedene Bildschirmgrössen und Geräte an.

11. Übergänge & Animationen

Sanfte Übergänge

.button {
    background: #43cea2;
    color: white;
    transition: background 0.3s;
}
.button:hover {
    background: #e17055;
}
                        

Beispiel-HTML:
<button class="button">Hover mich!</button>

Einfache Animation mit Keyframes

@keyframes bewegen {
    from { left: 0; }
    to { left: 100px; }
}
.animiert {
    position: relative;
    animation: bewegen 2s infinite alternate;
}
                        

Beispiel-HTML:
<div class="animiert">Animiert!</div>

Mit transition und animation erstellst du visuelle Effekte und Bewegungen.

12. CSS Variablen (Custom Properties)

Basis-Syntax & Verwendung

:root {
    --main-color: #43cea2;
    --text-color: #185a9d;
}
.box {
    background: var(--main-color);
    color: var(--text-color);
}
            

Beispiel-HTML:
<div class="box">Mit CSS-Variablen</div>

CSS-Variablen machen dein Design flexibel und zentral wartbar. Sie werden mit var(--name) verwendet.

13. Browser-Kompatibilität & Vendor Prefixes

Wofür sind Vendor-Prefixes?

.button {
    /* Vendor-Prefixes für abgerundete Ecken */
    -webkit-border-radius: 8px; /* Chrome, Safari, alte Versionen */
    -moz-border-radius: 8px;    /* Firefox, alte Versionen */
    border-radius: 8px;         /* Standard */
}
            

Manche CSS-Eigenschaften brauchen Zusatz-Präfixe, damit sie überall funktionieren. Prüfe mit Can I use die Browser-Unterstützung.

14. CSS Best Practices

Gute Gewohnheiten & Tipps

/* Immer kommentieren! */
.header { ... }

/* Spezifische Selektoren vermeiden, z.B. */
body .container .header h1 { ... } /* Zu spezifisch! */

/* Besser: */
.header-title { ... }

/* Gruppieren nach Funktion/Thema */
.form-input { ... }
.form-button { ... }
            

Halte CSS übersichtlich: Kommentiere, gruppiere, vermeide zu hohe Spezifität. Nutze sprechende Klassennamen!

15. Externe Stylesheet vs. Inline-Styles

Externe Datei einbinden

style.css

/* style.css */
h1 { color: #43cea2; }
            

Im <head> der HTML-Datei:
<link rel="stylesheet" href="style.css">

Inline-Style (nur im Notfall)

Externe Stylesheets sind übersichtlicher und wiederverwendbar. Inline-Styles sind schwer wartbar – nur für schnellen Test geeignet.

16. CSS Preprozessoren (Sass, Less)

Was ist ein Preprozessor?

Sass und Less sind Werkzeuge, mit denen du CSS-Variablen, Funktionen und verschachtelte Regeln nutzen kannst. Sie werden zu normalem CSS „kompiliert“. Für Einsteiger ist CSS allein oft genug – bei grossen Projekten lohnt sich ein Preprozessor!

17. Accessibility (Barrierefreiheit)

Kontrast & Fokus-Stil

.button {
    background: #185a9d;
    color: #fff; /* Guter Kontrast */
}
.button:focus {
    outline: 2px solid #e17055; /* Sichtbarer Fokus für Tastatur-Nutzer */
}
            

Achte auf hohe Farbkontraste und gut sichtbare Fokus-Ränder. Nutze Contrast Checker und teste die Seite mit Tastatur-Navigation.

Screenreader & Semantik

/* Versteckter Text für Screenreader */
.sr-only {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
            

Mit der Klasse .sr-only kannst du Zusatzinfos nur für Screenreader bereitstellen. Verwende immer passende HTML-Tags (z.B. <label> für Formulare).