Dieser Kurs schlüsselt die Grundlagen von CSS in übersichtliche, leicht verständliche Teile auf. In den nächsten Modulen erfahren Sie, wie die wichtigsten Aspekte von CSS funktionieren und wie Sie sie effektiv in Ihren Projekten einsetzen. Nutzen Sie den Menübereich neben dem Logo „Learn CSS“, um durch die Module zu navigieren.
Sie lernen CSS-Grundlagen wie das Boxmodell, Kaskaden und Spezifität, Flexbox, Raster und Z-Index kennen. Außerdem lernen Sie Funktionen, Farbtypen, Farbverläufe, logische Eigenschaften und die Vererbung kennen, um Sie als vielseitiger Frontend-Entwickler für jede Benutzeroberfläche zu rüsten.
Jedes Modul ist voller interaktiver Demos und Selbsttests, mit denen Sie Ihr Wissen testen können. Neben Lesematerialien und Demos gibt es auch eine Podcastfolge zu jedem Thema. So kannst du dein Wissen vertiefen und erweitern.
Dieser Kurs richtet sich sowohl an Anfänger als auch für fortgeschrittene CSS-Entwickler. Sie können die Reihe von Anfang bis Ende durchgehen, um einen allgemeinen Überblick über CSS zu erhalten, oder sie als Referenz für bestimmte Stilelemente verwenden. Falls Sie noch nicht mit der Webentwicklung vertraut sind, lesen Sie den Artikel HTML lernen. Dort erfahren Sie, wie Sie Markup schreiben und Ihre Stylesheets verknüpfen.
Die folgenden Themen werden behandelt:
Boxmodell
Da alles, was CSS anzeigt, ein Feld ist, ist das Verständnis der Funktionsweise des CSS-Box-Modells eine zentrale Grundlage von CSS.
Selektoren
Wenn Sie CSS auf ein Element anwenden möchten, müssen Sie es auswählen. CSS bietet verschiedene Möglichkeiten, dies zu tun. Diese werden in diesem Modul näher erläutert.
Der Wasserfall
Manchmal können zwei oder mehr konkurrierende CSS-Regeln auf ein Element angewendet werden. Finden Sie heraus, wie der Browser auswählt, welche Version verwendet wird, und wie Sie diese Auswahl steuern.
Spezifität
In diesem Modul werfen wir einen genaueren Blick auf die Spezifität – ein wichtiger Teil der Kaskade.
Übernahme
Einige CSS-Eigenschaften werden übernommen, wenn Sie keinen Wert für sie angeben. In diesem Modul erfahren Sie, wie das funktioniert und wie Sie es zu Ihrem Vorteil nutzen können.
Farbe
Es gibt mehrere Möglichkeiten, Farben in CSS anzugeben. In diesem Modul werden die am häufigsten verwendeten Farbwerte untersucht.
Größeneinheiten
Hier erfahren Sie, wie Sie mit dem flexiblen Medium des Webs die Größe von Elementen mithilfe von CSS anpassen.
Layout
Eine Übersicht über die verschiedenen Layoutmethoden, die du beim Erstellen einer Komponente oder eines Seitenlayouts auswählen kannst.
Flexbox
Flexbox ist ein Layoutmechanismus, mit dem Elementgruppen in einer Dimension angelegt werden können. In diesem Modul erfahren Sie, wie Sie sie verwenden.
Raster
CSS Grid Layout bietet ein zweidimensionales Layoutsystem, das das Layout in Zeilen und Spalten steuert. Entdecken Sie alles, was die Matrix zu bieten hat.
Logische Eigenschaften
Logische, flussrelative Eigenschaften und Werte sind mit dem Textfluss verknüpft, nicht mit der physischen Form des Bildschirms. Hier erfahren Sie, wie Sie von diesem neueren CSS-Ansatz profitieren können.
Abstände
Hier erfährst du, wie du die beste Methode für den Abstand zwischen Elementen für die verwendete Layoutmethode und die zu erstellende Komponente auswählst.
Pseudoelemente
Ein Pseudoelement ist mit dem Hinzufügen oder Targeting eines zusätzlichen Elements vergleichbar, ohne dass zusätzlicher HTML-Code hinzugefügt werden muss. Es gibt verschiedene Rollen, die in diesem Modul näher erläutert werden.
Pseudoklassen
Mit Pseudoklassen können Sie CSS basierend auf Statusänderungen anwenden. Das bedeutet, dass Ihr Design auf Nutzereingaben reagieren kann, z. B. eine ungültige E-Mail-Adresse.
Rahmen
Ein Rahmen dient als Rahmen für die Boxen. Hier erfahren Sie, wie Sie Größe, Stil und Farbe von Rahmen mit CSS ändern.
Schatten
Es gibt eine Reihe von Möglichkeiten, Text und Elementen in CSS Schatten hinzuzufügen. Hier erfahren Sie, wie die einzelnen Optionen verwendet werden und für welche Aufgaben sie konzipiert wurden.
Fokus
Verstehen Sie, wie wichtig es ist, sich bei Ihren Webanwendungen zu konzentrieren. Sie erfahren, wie Sie den Fokus verwalten und dafür sorgen, dass der Pfad durch Ihre Seite sowohl für Personen, die eine Maus verwenden, als auch für Personen, die zum Navigieren die Tastatur verwenden, funktioniert.
Z-Index und Stapelkontexte
Mithilfe des Z-Index und des Stapelkontexts können Sie die Reihenfolge steuern, in der Elemente übereinander liegen.
Funktionen
CSS verfügt über eine Reihe integrierter Funktionen. Machen Sie sich mit einigen der wichtigsten Funktionen und ihrer Verwendung vertraut.
Farbverläufe
In diesem Modul erfahren Sie, wie Sie die verschiedenen Arten von Farbverläufen verwenden, die in CSS verfügbar sind. Mit Farbverläufen lässt sich eine ganze Reihe nützlicher Effekte erzeugen, ohne dass Grafikanwendungen zum Erstellen von Bildern erforderlich sind.
Animationen
Animationen sind eine hervorragende Möglichkeit, interaktive Elemente hervorzuheben und Ihre Designs interessanter und unterhaltsamer zu gestalten. Hier erfahren Sie, wie Sie Animationseffekte mit CSS hinzufügen und steuern.
Filter
Mit Filtern in CSS können Sie Effekte anwenden, von denen Sie vielleicht nur glauben, dass sie in einer Grafikanwendung möglich wären. In diesem Modul erfahren Sie, was verfügbar ist.
Mischmodi
Wenn Sie zwei oder mehr Ebenen kombinieren, können Sie Kompositionseffekte erstellen. In diesem Modul zu Mischmodi erfahren Sie, wie Sie ein Bild vor weißem Hintergrund isolieren.
Listen
Eine Liste besteht strukturell aus einem Listencontainerelement, das mit Listenelementen gefüllt ist. In diesem Modul lernen Sie, wie Sie alle Teile einer Liste mit Stilen versehen.
Übergänge
Übergänge zwischen Zuständen eines Elements definieren Verwenden Sie Übergänge, um die User Experience zu verbessern, indem Sie visuelles Feedback für die Nutzerinteraktion geben.
Überlauf
„Überlauf“ bezeichnet die Art und Weise, wie Sie mit Inhalten umgehen, die nicht in eine festgelegte übergeordnete Größe passen. In diesem Modul denken Sie über den Tellerrand hinaus und lernen, überlaufende Inhalte zu gestalten.
Hintergründe
Hier erfahren Sie, wie Sie die Hintergründe von Feldern mithilfe von CSS gestalten.
Text und Typografie
Erfahren Sie, wie Sie Text im Web formatieren.
Fazit und nächste Schritte
Weitere Ressourcen, die Ihnen bei den nächsten Schritten helfen
Bist du bereit, CSS zu lernen? Los gehts.