--- title: CSS slug: Learn/CSS tags: - Anfänger - CSS - Debuggen - Einsteiger translation_of: Learn/CSS ---

Cascading Stylesheets — oder {{glossary("CSS")}} — ist die zweite Technologie, die Sie nach {{glossary("HTML")}} lernen sollten. Während HTML genutzt wird, um die Struktur und Semantik Ihrer Inhalte zu definieren, dient CSS dazu, deren Erscheinung und Layout zu beeinflussen. So lässt sich CSS beispielsweise nutzen, um die Schriftarten, Farben, Größen und räumliche Abstände Ihrer Inhalte zu verändern, Inhalte in mehreren Spalten anzuordnen oder Animationen und andere dekorative Merkmale hinzuzufügen.

Lernprozess

Sie sollten sich unbedingt mit den Grundlagen von HTML auseinandersetzen, bevor Sie sich an CSS versuchen. Wir empfehlen Ihnen, zunächst unser "Einführung in HTML"-Modul durchzuarbeiten — anschließend können Sie folgende Themen angehen:

CSS, beginnend mit diesem Modul "Einführung in CSS"
Fortgeschrittene HTML Module
JavaScript, und wie man es einsetzt, um Webseiten dynamische Funktionalität hinzuzufügen

Wir empfehlen, HTML und CSS gleichzeitig zu lernen und immer wieder zwischen beiden Themen hin- und her zu springen. Denn HTML ist sehr viel interessanter mit CSS, und CSS lässt sich schwerlich ohne HMTL erlernen.

Bevor Sie in dieses Thema starten, sollten Sie zumindest ein grundlegendes Verständnis im Umgang mit Computern sowie dem passiven Gebrauch des Internets (also einfach nur Surfen und Inhalte konsumieren) haben. Sie sollten eine einfache Arbeitsumgebung eingerichtet haben, wie im Artikel "Nötige Software installieren" ausführlich beschrieben, und wissen, wie Sie Dateien erzeugen und verwalten, wie im Artikel "Dateien nutzen" beschrieben — beides Teil unseres Anfängerkurses "Das Web für Einsteiger".

Es ist empfehlenswert, im Vorfeld den Artikel "Das Web für Einsteiger" durchzuarbeiten, bevor Sie sich an diesem Thema versuchen, aber es ist keinesfalls zwingend erforderlich; das Meiste, was im CSS Grundlagenartikel angerissen wird, wird auch in unserem Modul "Einführung in CSS" behandelt, allerdings weit ausführlicher.

Module

Dieses Thema unterteilt sich in die folgenden Module, die Sie in der vorgeschlagenen Reihenfolge abarbeiten sollten. Sie sollten definitiv mit dem Ersten beginnen.

Einführung in CSS: Dieses Modul vermittelt Ihnen, wie CSS grundlegend funktioniert, inklusive Selektoren und Eigenschaften, CSS-Schreibregeln, Anwendung von CSS auf HTML, wie man Maße, Farben und andere Einheiten in CSS spezifiziert, Kaskadierung und Vererbung, Box-Modell Grundlagen, und das Debuggen von CSS.
Textgestaltung: Hier lernen wir Grundlagen der Textgestaltung, wie das Setzen der Schriftart, Fett- und Kursivdruck, Zeilen- und Buchstabenabstand, und Schattierung sowie andere Textmerkmale. Abgerundet wird dieses Modul mit der Anwendung von eigenen Schriftarten auf Ihre Webseite und die Gestaltung von Listen und Links.
Boxgestaltung: Als Nächstes befassen wir uns mit der Gestaltung von Boxen, einem der grundlegenden Schritte in Richtung Webseitenlayout. In diesem Modul rekapitulieren wir das Box-Modell, anschließend schauen wir uns an, wie man das Layout einer Box kontrolliert, indem man Polsterung, Rahmen und Randabstände festlegt, Hintergrundfarben, -bilder und andere Eigenschaften einsetzt, und ausgefallene Dinge wie Schattenwurf und Filter einstellt.
CSS-Layout: Jetzt haben wir uns die Grundlagen von CSS angeeignet: Wir wissen wie man Texte formatiert und wie man Boxen gestaltet und manipuliert, die Ihre Inhalte umfassen. Nun wird es Zeit sich anzusehen, wie Sie Ihre Boxen an die richtige Stelle und in richtiger Relation zum Darstellungsfeld setzen, und umgekehrt. Wir haben alle nötigen Voraussetzungen, um tief in's Thema CSS-Layout einzutauchen, uns verschiedene Bildschirm-Einstellungen anzusehen, traditionelle Methoden wie Schweben und Positionierung, und neumodische Layoutwerkzeuge wie Flexboxen.
Responsives Design (ausstehend): Mit einer Vielzahl verschiedener Endgeräte kann man heutzutage im Netz surfen, infolge dessen ist Responsives Webdesign (RWD) zu einer Kerndisziplin des Webdesigns geworden. Dieses Modul wird die grundlegenden Prinzipien und Werkzeuge des RWD behandeln, das Anwenden verschiedener CSS auf ein Dokument in Abhängigkeit von Geräteeigenschaften wie Bildschirmgröße, -format und -auflösung erklären, und die verfügbaren Technologien zum Darstellen von Videos und Bildern in Abhängigkeit von jenen Eigenschaften ausloten.

Lösen typischer CSS-Probleme

CSS nutzen, um typische Probleme zu lösen verweist auf Artikelabschnitte, die erklären, wie man mit CSS die häufigsten Problems beim Erstellen einer Webseite behebt.

Von Anfang an werden sie meist HTML-Elemente und deren Hintergründe einfärben, Größe, Form und Position von Elementen ändern sowie Rahmen definieren und hinzufügen. Aber es gibt nicht viel, was Sie nicht tun können, sobald Sie auch nur ein solides Verständnis der Grundlagen von CSS haben. Das Beste am CSS-Lernprozesses ist, dass man nur mit Grundlagenwissen bereits ein gutes Gefühl dafür entwickelt, was möglich und was nicht möglich ist, selbst wenn Sie noch nicht wirklich wissen, wie diese mögliche Lösung aussieht.

Siehe auch

CSS auf MDN: Die Hauptübersicht für die CSS-Dokumentation auf MDN, wo Sie ausführliche Referenzdokumente für alle Merkmale der CSS-Sprache finden. Möchten Sie nachschlagen, welche verschieden Werte eine Eigenschaft annehmen kann? Dann ist dies der richtige Ort zum stöbern.