Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Cascading Stylesheets — oder CSS — ist die zweite Technologie, die Sie nach 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, Letztere in mehrere 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 durch zu arbeiten — 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 hinzu zu fü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 haben, sowie dem passiven Gebrauch des Internets (also einfach nur Surfen und Inhalte konsumieren). 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" — beides Teil unseres Anfängerkurses "Das Web für Einsteiger".

Es ist empfehlenswert, sich im Vorfeld durch den Artikel "Das Web für Einsteiger" zu arbeiten, bevor Sie sich an diesem Thema versuchen, aber keinesfalls zwingend; das Meiste, was in den CSS Grundlagenartikel angerissen wird, wird in unserem Modul "Einführung in CSS"  behandelt, wiewohl 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 and Vererbung, Box Model Grundlagen, und das Debuggen von CSS.
Textgestaltung
Hier lernen wir Grundlagen der Textgestaltueng, wie das Setzen der Schriftart, Fett- und Kursivdruck, Zeilen- und Buchstabenabstand, and Schattierung und 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 richtung Webseitenlayout. In diesem Modul rekapitulieren wir das Boxmodell, 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
Bis hierher haben wir uns nunmehr die Grundlagen von CSS angeeignet, wissen wie man Text formatiert und wie man Boxen gestaltet und manipuliert, wo Ihre Inhalte drinne sitzen. 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 Voraussetzung, um tief ins Thema CSS-Layout einzutauchen, uns verschiedene Bildschirmeinstellungen 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 Webpage behebt: [...]

Weiteres

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 Werte eine Eigenschaft alle annehmen kann? Das ist der richtige Ort zum stöbern.

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: optimus-yarnspinner
 Zuletzt aktualisiert von: optimus-yarnspinner,