In diesem Kurs werden die Grundlagen von CSS in leicht verständliche Abschnitte unterteilt. In den nächsten Modulen erfahren Sie, wie die wichtigsten Aspekte von CSS funktionieren und wie Sie sie effektiv in Ihren Projekten einsetzen können. Verwenden Sie den Menübereich neben dem Logo „CSS lernen“, um durch die Module zu navigieren.
Sie lernen die CSS-Grundlagen kennen, z. B. das Box-Modell, die Kaskade und Spezifität, Flexbox, Grid und z-index. Außerdem lernen Sie Funktionen, Farbtypen, Verläufe, logische Eigenschaften und Vererbung kennen, damit Sie ein vielseitiger Frontend-Entwickler werden, der jede Benutzeroberfläche meistern kann.
Jedes Modul enthält interaktive Demos und Selbsttests, mit denen Sie Ihr Wissen überprüfen können. Neben dem Lesen und den Demos gibt es zu jedem Thema eine Podcastfolge, die Ihnen eine weitere Möglichkeit bietet, Ihr Wissen zu erweitern.
Dieser Kurs richtet sich sowohl an Anfänger als auch an fortgeschrittene CSS-Entwickler. Sie können sich die gesamte Reihe ansehen, um ein allgemeines Verständnis von CSS zu erhalten, oder sie als Referenz für bestimmte Formatierungsthemen verwenden. Wenn Sie noch keine Erfahrung mit der Webentwicklung haben, können Sie sich diese HTML-Anleitung ansehen, um zu erfahren, wie Sie Markup schreiben und Stylesheets verknüpfen.
In diesem Kurs lernen Sie Folgendes:
Box-Modell
Da alles, was in CSS angezeigt wird, ein Feld ist, ist es wichtig, die Funktionsweise des CSS-Boxmodells zu verstehen.
Selektoren
Wenn Sie CSS auf ein Element anwenden möchten, müssen Sie es auswählen. Dazu gibt es verschiedene Möglichkeiten, die Sie in diesem Modul kennenlernen.
Verschachtelung
Durch das Verschachteln von CSS-Stilregeln können Sie Ihre Stylesheets besser organisieren, leichter lesbar und wartungsfreundlicher machen.
Die Kaskade
Manchmal können zwei oder mehr konkurrierende CSS-Regeln auf ein Element angewendet werden. Hier erfahren Sie, wie der Browser die zu verwendende Sprache auswählt und wie Sie diese Auswahl steuern können.
Spezifität
In diesem Modul geht es um die Spezifität, einen wichtigen Teil der Kaskade.
Übernahme
Einige CSS-Eigenschaften werden übernommen, wenn Sie keinen Wert dafür angeben. In diesem Modul erfahren Sie, wie das funktioniert und wie Sie es zu Ihrem Vorteil nutzen können.
Farbe
Es gibt verschiedene Möglichkeiten, Farben in CSS anzugeben. In diesem Modul werden die am häufigsten verwendeten Farbwerte behandelt.
Einheiten für die Größe
Hier erfahren Sie, wie Sie Elemente mit CSS anpassen können.
Layout
Ein Überblick über die verschiedenen Layoutmethoden, die Ihnen beim Erstellen eines Komponenten- oder Seitenlayouts zur Verfügung stehen.
Flexbox
Flexbox ist ein Layoutmechanismus, mit dem Gruppen von Elementen in einer Dimension angeordnet werden können. In diesem Modul erfahren Sie, wie Sie das Tool verwenden.
Raster
CSS Grid Layout bietet ein zweidimensionales Layoutsystem, mit dem sich das Layout in Zeilen und Spalten steuern lässt. Entdecken Sie alle Funktionen des Rasters.
Logische Eigenschaften
Logische, flussbezogene Eigenschaften und Werte sind mit dem Textfluss verknüpft, nicht mit der physischen Form des Bildschirms. Hier erfahren Sie, wie Sie diesen neuen Ansatz für CSS nutzen können.
Benutzerdefinierte Properties
Mit benutzerdefinierten Eigenschaften oder CSS-Variablen können Sie Werte in Ihrem CSS organisieren und wiederverwenden, sodass Ihre Stile flexibler und leichter zu verstehen sind.
Abstand
Hier erfahren Sie, wie Sie die beste Methode zum Anordnen von Elementen für das von Ihnen verwendete Layout und die Komponente, die Sie erstellen, auswählen.
Pseudoelemente
Mit einem Pseudoelement können Sie ein zusätzliches Element hinzufügen oder darauf ausrichten, ohne zusätzlichen HTML-Code hinzufügen zu müssen. Sie haben verschiedene Rollen, die Sie in diesem Modul kennenlernen.
Pseudoklassen
Mit Pseudoklassen können Sie CSS basierend auf Statusänderungen anwenden. Das bedeutet, dass Ihr Design auf Nutzereingaben reagieren kann, z. B. auf eine ungültige E-Mail-Adresse.
Rahmen
Mit einem Rahmen können Sie Ihre Felder umranden. Hier erfahren Sie, wie Sie die Größe, den Stil und die Farbe von Rahmen mit CSS ändern.
Schatten
Es gibt verschiedene Möglichkeiten, Text und Elementen in CSS Schatten hinzuzufügen. Hier erfahren Sie, wie Sie die einzelnen Optionen verwenden und für welche Aufgaben sie entwickelt wurden.
Fokus
Sie verstehen, wie wichtig der Fokus in Ihren Webanwendungen ist. Sie erfahren, wie Sie den Fokus verwalten und dafür sorgen, dass der Pfad durch Ihre Seite sowohl für Nutzer, die eine Maus verwenden, als auch für Nutzer, die die Tastatur zur Navigation verwenden, funktioniert.
Cursor und Zeiger
Der Cursor ist für Nutzer ein wichtiges Hilfsmittel, um zu erkennen, mit welchen Elementen sie interagieren. In diesem Modul erfahren Sie, wie Sie Cursor unter bestimmten Umständen gestalten können.
Z-Index und Stapelkontexte
Hier erfahren Sie, wie Sie die Reihenfolge steuern, in der Elemente übereinander geschichtet werden, indem Sie den Z-Index und den Stapelkontext verwenden.
Ankerpositionierung
Mit der CSS-Ankerpositionierung lässt sich ein Element deklarativ relativ zu einem anderen Element positionieren.
Pop-over und Dialogfeld
Ein Popover ist ein beliebiges Element mit einem Popover-Attribut. Es ist für eine Vielzahl von interaktiven Mustern nützlich, darunter Tooltips, Benachrichtigungen und Toasts.
Funktionen
CSS bietet eine Reihe integrierter Funktionen. Hier erfahren Sie mehr über einige der wichtigsten Funktionen und wie Sie sie verwenden.
Pfade, Formen, Zuschneiden und Maskieren
Mit Pfaden, Formen, Clipping und Maskierung können Entwickler komplexe Formen in CSS rendern. Dazu stehen ihnen verschiedene Funktionen zur Verfügung, mit denen sie unvergessliche Nutzererlebnisse schaffen können.
Verläufe
In diesem Modul erfahren Sie, wie Sie die verschiedenen Arten von Verläufen verwenden, die in CSS verfügbar sind. Mit Verläufen lassen sich viele nützliche Effekte erzielen, ohne dass Sie Bilder mit Grafikprogrammen erstellen müssen.
Animationen
Animationen sind eine gute Möglichkeit, interaktive Elemente hervorzuheben und Ihre Designs interessanter und unterhaltsamer zu gestalten. Hier erfahren Sie, wie Sie mit CSS Animationseffekte hinzufügen und steuern.
Filter
Mit Filtern in CSS können Sie Effekte anwenden, die Sie vielleicht nur in einer Grafikanwendung für möglich gehalten haben. In diesem Modul erfahren Sie, was verfügbar ist.
Mischmodi
In diesem Modul zu Mischmodi erfahren Sie, wie Sie Kompositionseffekte erstellen, indem Sie zwei oder mehr Ebenen mischen, und wie Sie ein Bild mit weißem Hintergrund isolieren.
Listen
Eine Liste besteht strukturell aus einem Listencontainerelement, das mit Listenelementen gefüllt ist. In diesem Modul erfahren Sie, wie Sie alle Teile einer Liste gestalten.
Zähler
CSS bietet verschiedene Möglichkeiten, die Zähler in einer Liste für unterschiedliche Anwendungsfälle zu steuern. In diesem Modul erfahren Sie, wie Sie die Zähler in einer Liste steuern.
Übergänge
Informationen zum Definieren von Übergängen zwischen den Status eines Elements. Verwenden Sie Übergänge, um die Nutzerfreundlichkeit zu verbessern, indem Sie visuelles Feedback für Nutzerinteraktionen geben.
Übergänge für SPAs ansehen
Mit View Transitions können Sie Kontinuität oder Kontext zwischen den Seiten in Ihrer SPA herstellen.
Überlauf
Mit „Overflow“ wird festgelegt, wie mit Inhalten umgegangen wird, die nicht in eine bestimmte Größe des übergeordneten Elements passen. In diesem Modul lernen Sie, wie Sie überlaufende Inhalte gestalten können.
Hintergründe
Hier erfahren Sie, wie Sie mit CSS Hintergründe für Felder gestalten.
Text und Typografie
Informationen zum Formatieren von Text im Web
Containerabfragen
Im Gegensatz zu Media-Anfragen können Sie mit Container-Anfragen Elemente basierend auf der Größe und dem Status ihrer übergeordneten Elemente oder Container genauer anpassen.
Fazit und nächste Schritte
Weitere Ressourcen, die Ihnen bei den nächsten Schritten helfen
Sind Sie bereit, CSS zu lernen? Jetzt starten