mitmario.dev
Blaues Schild mit Pinsel als Sinnbild für den CSS-Kurs
Interaktiver Kurs Im Browser Anfänger

CSS

Box-Modell, Positionierung, Flexbox und Grid. Geübt wird da, wo mehrere Eigenschaften zusammenwirken, und am Ende steht ein ganzes Portfolio, das du als Vorlage für deine eigene Seite mitnimmst.

Hier geht es los

Abschnitt 1 · CSS anschalten

Was ist CSS?

Lektion 1 von 5 · Noch nicht begonnen

Kurs starten

Lesen kannst du jede Lektion ohne Konto. Mit dem Basis Konto, das nichts kostet, lässt du die Beispiele laufen, löst die Aufgaben und behältst deinen Stand auf jedem Gerät.

Deine Strecke 0 von 16 Abschnitten erledigt

HTML vorher
  1. 01 CSS anschalten , noch offen
  2. 02 Selektoren , noch offen
  3. 03 Kaskade und Vererbung , noch offen
  4. 04 Das Box-Modell , noch offen
  5. 05 Werte, Einheiten und Farben , noch offen
  6. 06 Typografie , noch offen
  7. 07 Hintergründe, Rahmen und Tiefe , noch offen
  8. 08 Positionierung , noch offen
  9. 09 Flexbox , noch offen
  10. 10 Grid , noch offen
  11. 11 Flex oder Grid? Layouts zusammensetzen , noch offen
  12. 12 Responsiv gestalten , noch offen
  13. 13 Bewegung , noch offen
  14. 14 Komponenten in der Praxis , noch offen
  15. 15 Modernes CSS , noch offen
  16. 16 Sauberes CSS , noch offen
Ein Punkt ist ein Abschnitt, jeder endet mit einem kurzen Test. Ein Klick schlägt ihn unten auf.

Abschnitt 3

Kaskade und Vererbung

0 von 6 erledigt
  1. 3.1 Wie der Browser entscheidet
  2. 3.2 Spezifität rechnen
  3. 3.3 Vererbung
  4. 3.4 @layer und !important
  5. 3.5 Einen Stilkonflikt auflösen Projekt

Am Ende des Abschnitts

Einen Stilkonflikt auflösen

Lektion 3.5 · Aufgabe mit Prüfliste

Danach ein kurzer Test, eine Frage nach der anderen.

Mit Lektion 3.1 anfangen

Lehrplan

0 von 16 erledigt
01 CSS anschalten 0 / 5
  1. 1.1 Was ist CSS?
  2. 1.2 Die CSS-Regel
  3. 1.3 CSS einbinden
  4. 1.4 Kommentare, Fehler und was der Browser verwirft
Mit Lektion 1.1 anfangen
02 Selektoren 0 / 8
  1. 2.1 Typ, Klasse und ID
  2. 2.2 Kombinatoren und Gruppen
  3. 2.3 Attribut-Selektoren
  4. 2.4 Zustände mit Pseudoklassen
  5. 2.5 Struktur mit Pseudoklassen
  6. 2.6 Pseudoelemente
  7. 2.7 Die Navigation ohne Extra-Klassen Projekt
Mit Lektion 2.1 anfangen
03 Kaskade und Vererbung 0 / 6
  1. 3.1 Wie der Browser entscheidet
  2. 3.2 Spezifität rechnen
  3. 3.3 Vererbung
  4. 3.4 @layer und !important
  5. 3.5 Einen Stilkonflikt auflösen Projekt
Mit Lektion 3.1 anfangen
04 Das Box-Modell 0 / 8
  1. 4.1 Die vier Ringe
  2. 4.2 box-sizing
  3. 4.3 Breite, Höhe und ihre Grenzen
  4. 4.4 Margin Collapsing
  5. 4.5 display
  6. 4.6 overflow
  7. 4.7 Die Projektkarte Projekt
Mit Lektion 4.1 anfangen
05 Werte, Einheiten und Farben 0 / 6
  1. 5.1 Einheiten
  2. 5.2 Farben
  3. 5.3 Rechnen im Stylesheet
  4. 5.4 Custom Properties
  5. 5.5 Die Design-Tokens des Portfolios Projekt
Mit Lektion 5.1 anfangen
06 Typografie 0 / 7
  1. 6.1 Schriftfamilien und Font-Stacks
  2. 6.2 Größe und Zeilenhöhe
  3. 6.3 Eigene Schriften einbinden
  4. 6.4 Text auszeichnen und ausrichten
  5. 6.5 Umbruch und Überlauf
  6. 6.6 Der Hero-Text Projekt
Mit Lektion 6.1 anfangen
07 Hintergründe, Rahmen und Tiefe 0 / 6
  1. 7.1 Hintergrundfarbe und -bild
  2. 7.2 Größe, Position und Verläufe
  3. 7.3 Rahmen und Radien
  4. 7.4 Schatten und Tiefe
  5. 7.5 Der Hero mit Bild Projekt
Mit Lektion 7.1 anfangen
08 Positionierung 0 / 8
  1. 8.1 Der normale Fluss
  2. 8.2 position: relative
  3. 8.3 position: absolute und der Bezugsrahmen
  4. 8.4 position: fixed
  5. 8.5 position: sticky
  6. 8.6 z-index und der Stacking Context
  7. 8.7 Badge, Overlay und klebende Kopfzeile Projekt
Mit Lektion 8.1 anfangen
09 Flexbox 0 / 9
  1. 9.1 Die zwei Achsen
  2. 9.2 Richtung und Umbruch
  3. 9.3 Verteilen auf der Hauptachse
  4. 9.4 Ausrichten auf der Querachse
  5. 9.5 Abstände mit gap
  6. 9.6 Wachsen und schrumpfen
  7. 9.7 Die Kopfzeile Projekt
  8. 9.8 Gleiche Höhen und die klebende Fußzeile Projekt
Mit Lektion 9.1 anfangen
10 Grid 0 / 9
  1. 10.1 Zeilen und Spalten
  2. 10.2 repeat(), minmax() und auto-fit
  3. 10.3 Elemente platzieren
  4. 10.4 Benannte Bereiche
  5. 10.5 Ausrichten im Raster
  6. 10.6 Das implizite Raster
  7. 10.7 subgrid
  8. 10.8 Projektraster und Seitenlayout Projekt
Mit Lektion 10.1 anfangen
11 Flex oder Grid? Layouts zusammensetzen 0 / 5
  1. 11.1 Wann Flex, wann Grid, wann beides
  2. 11.2 Zentrieren
  3. 11.3 Ein Raster von Hand
  4. 11.4 Die halbe Startseite Projekt
Mit Lektion 11.1 anfangen
12 Responsiv gestalten 0 / 7
  1. 12.1 Mobile First und der Viewport
  2. 12.2 Media Queries
  3. 12.3 Nutzervorlieben abfragen
  4. 12.4 Flexible Bilder und Medien
  5. 12.5 Container Queries
  6. 12.6 Dunkelmodus und jeder Bildschirm Projekt
Mit Lektion 12.1 anfangen
13 Bewegung 0 / 6
  1. 13.1 transition
  2. 13.2 transform
  3. 13.3 @keyframes und animation
  4. 13.4 Bewegung mit Rücksicht
  5. 13.5 Das Menü, das auffährt Projekt
Mit Lektion 13.1 anfangen
14 Komponenten in der Praxis 0 / 6
  1. 14.1 Buttons und ihre Zustände
  2. 14.2 Formulare gestalten
  3. 14.3 Listen und Tabellen
  4. 14.4 Overlay und Untermenü ohne JavaScript
  5. 14.5 Das Kontaktformular Projekt
Mit Lektion 14.1 anfangen
15 Modernes CSS 0 / 8
  1. 15.1 Neues sicher einsetzen mit @supports
  2. 15.2 CSS Nesting
  3. 15.3 Getypte Custom Properties mit @property
  4. 15.4 Stile begrenzen mit @scope
  5. 15.5 Ankerpositionierung
  6. 15.6 Bewegung, die am Scrollen hängt
  7. 15.7 Übergänge aus dem Nichts
Mit Lektion 15.1 anfangen
16 Sauberes CSS 0 / 7
  1. 16.1 Struktur und Namen
  2. 16.2 Logische Eigenschaften
  3. 16.3 Fehler finden mit den Entwicklerwerkzeugen
  4. 16.4 Deine erste eigene styles.css
  5. 16.5 Das Portfolio fertigstellen Projekt
  6. 16.6 Bau dir was
Mit Lektion 16.1 anfangen

111 Lektionen91 Aufgaben mit Prüfliste16 Abschnittstestsläuft im Browserdas Basis Konto reicht