CSS lesen lernen in 30 Minuten
CSS beschreibt das Erscheinungsbild einer Website. Einfache CSS-Regeln lassen sich lesen, verstehen und sicher anwenden, ohne selbst Programmierer zu sein.
(kein Schreiben, nur Verstehen!)
Minute 0–5: Was ist CSS überhaupt?
CSS beschreibt wie etwas aussieht, nicht was es ist.
h1 {
color: #0d6efd;
}
- h1 → was? (Überschrift)
- color → was ändern?
- #0d6efd → womit? (Blau)
Minute 5–10: Aufbau einer CSS-Regel
selektor {
eigenschaft: wert;
}
👉 Lesereihenfolge:
„Für selektor gilt eigenschaft mit dem Wert wert.“
Minute 10–15: Die 10 wichtigsten Begriffe (merken!)
| Begriff | Bedeutung |
|---|---|
| color | Textfarbe |
| background-color | Hintergrundfarbe |
| font-size | Schriftgröße |
| line-height | Zeilenabstand |
| margin | Außenabstand |
| padding | Innenabstand |
| text-align | Textausrichtung |
| a:hover | Link beim Darüberfahren |
| @media | Mobile Ansicht |
| px | Pixel |
Minute 15–20: Kommentare lesen
p {
font-size: 16px; /* Standardgröße */
}
👉 Bedeutet:
👉 Alles zwischen /* ... */ ist nur Erklärung, kein Code.
Minute 20–25: Mobile Regeln erkennen
@media (max-width: 768px) {
body {
font-size: 17px;
}
}
👉 Bedeutet:
„Wenn der Bildschirm kleiner als 768 Pixel ist, dann …“
Minute 25–30: Gefahrlos testen
- CSS in user.css
- Seite neu laden
- Gefällt es nicht → löschen
- Nichts kaputt 😉
✅ Fazit
- Du musst CSS nicht schreiben
- Du musst CSS nur grob lesen können
- KI macht den Rest