CSS-Dokumentation
Kompakte, beispielorientierte CSS-Referenz. Konzept lesen, Code ansehen, dann in einem Coddy-Lernweg üben.
Geführten CSS-Lernweg startenErste Schritte
- Inline CSSInline CSS schreibt Deklarationen mit dem style-Attribut direkt an ein Element. Hier lernst du die Syntax, wann Inline-Styles die richtige Wahl sind, warum sie Stylesheets schlagen und wie sie sich von internem und externem CSS unterscheiden.
- Externes CSSExternes CSS steht in einer .css-Datei, die jede Seite mit <link rel="stylesheet"> einbindet; internes CSS steht in einem <style>-Element innerhalb einer Seite. Hier lernst du beides, wie Dateipfade funktionieren und welche Regel gewinnt, wenn beide aufeinandertreffen.
- CSS KommentareCSS hat genau eine Kommentar-Syntax, /* ... */, für eine und für mehrere Zeilen. Hier lernst du, wo Kommentare stehen dürfen, wie du eine Regel auskommentierst und warum // und verschachtelte Kommentare stillschweigend die nächste Regel kaputt machen.
- CSS !important!important lässt eine Deklaration gegen normale Deklarationen gewinnen, egal wie spezifisch diese sind. Hier lernst du, was es genau schlägt, was es schlägt, wie Spezifität darunter funktioniert und wie du einen Style-Konflikt sauberer gewinnst.
- CSS VariablenCSS Variablen (Custom Properties) speichern einen Wert einmal und verwenden ihn mit var() wieder. Hier lernst du, wie du sie in :root deklarierst, ihren Geltungsbereich nutzt und sie überschreibst, Fallbacks angibst, Themes mit JavaScript umschaltest und die Falle mit ungültigen Werten vermeidest.
Selektoren
- CSS SelektorenEin CSS-Selektor wählt die Elemente aus, die eine Regel gestaltet. Hier lernst du jeden Selektortyp, die vier Kombinatoren (Nachfahre, Kind, direkter Nachbar, allgemeiner Nachbar), Attributselektoren und Gruppierung, und du testest Selektoren live.
- CSS KlassenDer Klassenselektor (.name) stylt jedes Element mit dieser Klasse; der ID-Selektor (#name) stylt das eine Element mit dieser id. Hier lernst du die Syntax, mehrere und verkettete Klassen, Klasse vs. ID, Regeln für Namen und das Umschalten von Klassen mit JavaScript.
- PseudoklassenPseudoklassen wählen Elemente nach Position oder Zustand aus: :nth-child(), :first-child, :not(), :focus, :checked, :has() und mehr. Hier lernst du die Syntax, die Formel an+b mit einem Live-Tester und den Unterschied zwischen nth-child und nth-of-type.
- ::before und ::after::before und ::after fügen generierten Inhalt als erstes und letztes Kind eines Elements ein, direkt aus dem CSS. Hier lernst du die Eigenschaft content, warum ein leeres content Pflicht ist, wie du sie positionierst, Tooltips mit attr(), Zähler und wo sie nicht funktionieren.
- CSS HoverDie Pseudoklasse :hover stylt ein Element, solange der Mauszeiger darüber ist. Hier lernst du Hover-Effekte für Buttons und Karten, weiche Übergänge, Linkfarben mit :link, :visited, :hover und :active in der richtigen Reihenfolge und Hover auf Touchscreens.
Box-Modell
- Box-ModellJedes Element ist eine Box aus vier Schichten: Inhalt, Padding, Rahmen und Margin. Hier lernst du, wie jede Schicht zur Größe beiträgt, wie box-sizing: border-box die Rechnung ändert, und siehst jede Schicht live vermessen.
- CSS PaddingPadding ist der Innenabstand eines Elements, zwischen seinem Inhalt und seinem Rahmen. Hier lernst du die padding-Kurzschreibweise mit 1 bis 4 Werten, die Eigenschaften für einzelne Seiten, logisches Padding, Prozentwerte und wie Padding die Größe eines Elements verändert.
- CSS MarginMargin ist der transparente Abstand außerhalb des Rahmens eines Elements, der andere Elemente wegschiebt. Hier lernst du die margin-Kurzschreibweise, Zentrieren mit margin: 0 auto, negative Margins, margin auto in Flexbox und warum vertikale Margins zusammenfallen.
- Margin vs PaddingPadding ist der Abstand innerhalb des Rahmens eines Elements, Margin der Abstand außerhalb. Sieh beides an derselben Box, nebeneinander und live, und lerne, was du für Hintergründe, Klickflächen, Abstände zwischen Elementen und zum Zentrieren nimmst.
- CSS BorderDie Eigenschaft border zeichnet eine Linie um das Padding eines Elements. Hier lernst du die border-Kurzschreibweise, jeden Rahmenstil, Farben und einzelne Seiten, abgerundete Ecken mit border-radius und wie sich Rahmen von Outlines unterscheiden.
- Breite und Höhewidth und height legen die Größe der Box eines Elements fest. Hier lernst du feste und prozentuale Größen, warum height: 100% oft nichts bewirkt, min-height und max-width für flexible Layouts, auto vs. 100% und die fit-content-Schlüsselwörter.
Text und Schriften
- SchriftgrößeDie Eigenschaft font-size legt fest, wie groß Text ist. Hier lernst du die Einheiten, die sie annimmt (px, rem, em, %, Schlüsselwörter, vw), wie du die Schriftgröße in HTML änderst, warum rem die sichere Wahl ist und wie sich em-Größen multiplizieren.
- CSS fettDie Eigenschaft font-weight macht Text fett, dünn oder alles dazwischen. Hier lernst du die Zahlenskala von 100 bis 900, normal und bold, die relativen Werte bolder und lighter und warum eine Schriftstärke manchmal keinen Unterschied zeigt.
- Zeilenabstandline-height legt die Höhe jeder Textzeile fest und damit den Abstand zwischen den Zeilen. Hier lernst du, warum eine Zahl ohne Einheit der richtige Standard ist, wie px-, em- und %-Werte unterschiedlich vererbt werden und gute Werte für Fließtext und Überschriften.
- TextfarbeDer Tag <font color> ist veraltet; die Textfarbe in HTML legst du mit der CSS-Eigenschaft color fest. Hier lernst du, wie du eine ganze Seite, ein einzelnes Wort, einen Link oder eine Überschrift einfärbst, mit Farbnamen, Hex und rgb, und wie Text lesbar bleibt.
- UnterstreichenUnterstreiche Text mit text-decoration und steuere dann die Linie: ihre Farbe, ihren Stil, ihre Dicke und ihren Abstand zum Text. Außerdem: wie du die Unterstreichung von Links entfernst und wann du es lieber lässt.
- Textschattentext-shadow zeichnet einen oder mehrere Schatten hinter Text. Hier lernst du die vier Werte (x-Versatz, y-Versatz, Unschärfe, Farbe), wie du Schatten für Glow-, Kontur- und 3D-Effekte stapelst und wie ein Schatten Text auf unruhigen Hintergründen lesbar hält.
Farben und Hintergründe
- CSS FarbenAlle Wege, eine Farbe in CSS zu schreiben: Farbnamen, Hex-Codes, rgb() und rgba(), hsl(), Transparenz mit Alphakanal, currentColor und die neueren oklch() und color-mix(). Jeweils mit Live-Beispiel und einem Farbumrechner.
- Hintergrundfarbebackground-color füllt die Box eines Elements mit einer Farbe. Hier lernst du, wie du die Hintergrundfarbe einer ganzen Seite, eines div, einer Tabellenzeile oder eines einzelnen Wortes setzt, wie Transparenz funktioniert, warum bgcolor veraltet ist und wie sich background-color von der Kurzschreibweise background unterscheidet.
- Hintergrundbildbackground-image legt ein Bild oder einen Farbverlauf hinter den Inhalt eines Elements. Hier lernst du url() und Farbverläufe, background-size (cover und contain), background-position, background-repeat, das Übereinanderlegen mehrerer Hintergründe und die Kurzschreibweise background.
- FarbverlaufCSS-Farbverläufe sind Bilder, die der Browser aus Farben zeichnet. Hier lernst du radial-gradient (Form, Größe, Position), linear-gradient (Richtung und Winkel), conic-gradient, Farbstopps, harte Stopps für Streifen, wiederholte Verläufe und Text mit Farbverlauf.
- CSS Schattenbox-shadow zeichnet Schatten um die Box eines Elements. Hier lernst du die fünf Werte (x, y, Unschärfe, Spread, Farbe), Inset-Schatten, mehrere Schatten für realistische Tiefe, Fokusringe mit Spread und die Fehler, die Schatten trüb aussehen lassen.
Layout
- CSS DisplayDie Eigenschaft display entscheidet, wie ein Element am Layout teilnimmt. Hier lernst du block, inline und inline-block mit vermessenen Boxen nebeneinander, display none vs. visibility hidden und wo flex, grid, flow-root und contents hingehören.
- CSS Positionposition: absolute platziert ein Element an exakten Koordinaten innerhalb seines nächsten positionierten Vorfahren. Hier lernst du, wie absolute mit position: relative zusammenspielt, dann fixed und sticky, die Eigenschaften top/right/bottom/left und inset und warum sticky manchmal nicht klebt.
- CSS z-indexz-index entscheidet, welches von überlappenden Elementen oben gezeichnet wird. Hier lernst du, bei welchen Elementen es wirkt, wie Stacking Contexts Elemente gruppieren, sodass z-index 9999 trotzdem verlieren kann, was einen Stacking Context erzeugt und wie du ein z-index reparierst, das nicht funktioniert.
- CSS Overflowoverflow entscheidet, was mit Inhalt passiert, der nicht in seine Box passt: anzeigen, abschneiden oder Scrollleisten hinzufügen. Hier lernst du visible, hidden, scroll, auto und clip, overflow-x und overflow-y, Text mit Auslassungspunkten und die Nebenwirkungen, die overflow auf das Layout hat.
- Float und Clearfloat schiebt ein Element an eine Seite und lässt Text darum herumfließen, so wie Magazine Fotos platzieren. Hier lernst du float left, right und inline-start, clear, warum ein Elternelement um Floats zusammenfällt, wie display: flow-root das behebt und warum Floats nicht mehr für Seitenlayouts verwendet werden.
- div zentrierenJeder Weg, ein div horizontal, vertikal oder in beide Richtungen zu zentrieren: Flexbox, Grid, margin auto, absolute Positionierung mit transform, inset mit margin auto und align-content. Jede Methode läuft live und misst ihre eigene Zentrierung, dazu eine Tabelle, wann du welche nimmst.
- Bild zentrierenEin <img> ist inline und wird deshalb wie Text zentriert: mit text-align: center am Elternelement. Oder du machst es zu einem Block mit margin: 0 auto, oder du zentrierst es mit Flexbox oder Grid, auch vertikal. Jede Methode läuft live und misst das Ergebnis.
Flexbox und Grid
- CSS FlexboxFlexbox ordnet Items in einer Zeile oder Spalte an und steuert, wie sie sich den Platz teilen und ausrichten. Hier lernst du display: flex, Haupt- und Querachse, jede Container-Eigenschaft, flex-grow, flex-shrink und flex-basis, mit einem Live-Playground, der misst, wo jedes Item landet.
- Justify Contentjustify-content platziert Flex-Items entlang der Hauptachse und align-items entlang der Querachse. Sieh jeden Wert nebeneinander und nachgemessen, mit einem klickbaren Ausrichtungsraster, align-self und den Gründen, warum justify-content manchmal nichts bewirkt.
- Flex Wrapflex-wrap entscheidet, ob sich Flex-Items in eine Zeile quetschen oder in die nächste wandern, und flex-direction, ob sie in einer Zeile oder Spalte laufen. Hier lernst du beides mit Live-Beispielen, die Kurzschreibweise flex-flow, align-content und eine responsive Kartenreihe ganz ohne Media Queries.
- CSS GridCSS Grid ordnet Items gleichzeitig in Zeilen und Spalten an. Hier lernst du display: grid, grid-template-columns, die Einheit fr, repeat() und minmax(), auto-fill vs. auto-fit, das Platzieren von Items mit grid-column und grid-template-areas, mit einem Live-Grid, das du bearbeitest und vermisst.
Responsive Design
- Media QueriesEine Media Query wendet CSS nur an, wenn eine Bedingung zutrifft, etwa eine Mindestbreite des Bildschirms, ein dunkles Farbschema oder ein Mauszeiger. Hier lernst du die @media-Syntax, Mobile-First-Breakpoints, die Bereichssyntax, prefers-color-scheme, matchMedia in JavaScript und Container Queries.
- CSS Einheitenrem bezieht sich auf die Schriftgröße der Wurzel, em auf die Schriftgröße des aktuellen Elements, px ist fest, und % hängt von der Eigenschaft ab. Sieh jede Einheit in einer verschachtelten Demo vermessen, warum em sich multipliziert, wann du welche nimmst und wie vw, vh und dvh funktionieren.
- CSS clamp()clamp(MIN, PREFERRED, MAX) liefert den bevorzugten Wert, aber nie weniger als MIN oder mehr als MAX. Hier lernst du, wie damit Schriftgrößen und Abstände ohne Media Queries fließend werden, wie du den mittleren Wert berechnest und wie min() und max() damit zusammenhängen.
- CSS calc()Mit calc() rechnest du in CSS und mischst Einheiten, etwa 100% minus eine feste 200px-Seitenleiste. Hier lernst du die Syntaxregeln (die Leerzeichen zählen), calc() mit CSS-Variablen, typische Layouts, die es löst, und warum ein ungültiges calc() stillschweigend ignoriert wird.
Übergänge und Effekte
- CSS TransitionEine CSS-Transition animiert eine Eigenschaft von ihrem alten zu ihrem neuen Wert, wenn sie sich ändert, zum Beispiel beim Hovern. Hier lernst du die Kurzschreibweise transition, jede Timing-Funktion nebeneinander, was sich animieren lässt und was nicht, den Workaround für height: auto und reduzierte Bewegung.
- CSS AnimationCSS-Animationen führen ein Element durch die Schritte, die du in @keyframes festlegst, von selbst und so oft du willst. Hier lernst du die @keyframes-Syntax, alle acht animation-Eigenschaften, fill-mode und direction, Ladeanzeigen, Pausieren und wie du reduzierte Bewegung respektierst.
- CSS TransformDie Eigenschaft transform verschiebt, skaliert, dreht und neigt ein Element, ohne das Layout drumherum zu ändern. Hier lernst du jede transform-Funktion, warum die Reihenfolge der Funktionen zählt, transform-origin, die eigenständigen Eigenschaften translate, scale und rotate und den Zentriertrick mit translate(-50%, -50%).
- CSS drehenDreh ein Element mit transform: rotate(45deg) oder der neueren Eigenschaft rotate. Hier lernst du Winkeleinheiten (deg, turn, rad), das Drehen um eine Ecke mit transform-origin, gedrehten Text und Icons, eine sich drehende Ladeanzeige und 3D-Drehung mit rotateX und rotateY.
- CSS Transparenzopacity macht ein ganzes Element und alles darin durchsichtig, von 0 (unsichtbar) bis 1 (deckend). Hier lernst du die Werte, warum opacity auch den Text ausblendet und wie du nur den Hintergrund transparent machst, opacity: 0 vs. visibility vs. display und Einblenden beim Hovern.
- CSS Blur und Filterfilter: blur(5px) zeichnet ein Element weich, und backdrop-filter: blur() zeichnet weich, was dahinter liegt. Hier lernst du jede Filterfunktion (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) mit Live-Schiebereglern, wie du sie kombinierst und das Problem mit unscharfen Rändern.
