CSS

Tutorials

Cascading Style Sheets, meistens als CSS abgekürzt, ist eine Beschreibungssprache, die das Erscheinungsbild einer in HTML oder XML formatierten Datei (inklusive verschiedener XML-Sprachen wie SVG oder XHTML) festlegt. CSS beschreibt, wie ein strukturiertes Element am Bildschirm, auf Papier, in Sprache oder anderen Medien dargestellt wird.

CSS ist eine der Kernsprachen des Open Web und basiert auf standardisierten W3C-Spezifikationen. Vorher wurden die verschieden Tiele der CSS-Spezifikation synchron entwickelt, was die Versionierung der letzten Empfehlung ermöglichte. Du hast vielleicht von CSS1, CSS2.1 und CSS3 gehört. CSS4 wurde jedoch nie eine offizielle Version.

Seit CSS3 wuchs der Umfang der Spezifikation beträchtlich und der Fortschritt an den verschiedenen CSS-Modulen begann, so sehr abzuweichen, dass es effizienter wurde, Empfehlungen getrennt pro Modul zu entwickeln und zu veröffentlichen.

  • CSS-Einführung

    Eine Schritt-für-Schritt-Einführung für Anfänger, welche die grundlegenden Informationen enthält.

  • CSS-TutorialUnser CSS-Lernbereich enthält eine Vielzahl von Tutorials, die alle Grundlagen behandeln und dich vom Anfänger- zum Profiniveau bringen.
  • CSS-Referenz

    Eine vollständige Übersicht für erfahrene Webentwickler, die alle Eigenschaften und Konzepte von CSS beschreibt.

Unser CSS-Lernbereich bietet mehrere Module, die dir CSS von Grund auf beibringen — kein Vorwissen wird benötigt.

Erste Schritte mit CSS
CSS (für englisch „Cascading Style Sheets“) wird zur Gestaltung und zum Layout von Webseiten verwendet — zum Beispiel, um Schriftart, Farbe, Größe und Abstand des Inhalts zu verändern, ihn in mehrere Spalten aufzuteilen oder Animationen und andere dekorative Merkmale hinzuzufügen. Dieses Modul stellt einen sanften Anfang auf deinem Weg zur Beherrschung von CSS bereit, mit den Grundlagen, wie es funktioniert, wie die Syntax aussieht, und wie du anfangen kannst, es zu nutzen, um Gestaltung zu HTML hinzuzufügen.
CSS-Bausteine
Dieses Modul macht weiter, wo „Erste Schritte mit CSS“ aufgehört hat — jetzt, wo du mit der Sprache und ihrer Syntax vertraut geworden bist und etwas grundlegende Erfahrung gesammelt hast, ist es Zeit, ein bisschen tiefer einzutauchen. Dieses Modul beschäftigt sich mit der Kaskade und Vererbung, allen verfügbaren Selektorarten, Einheiten, Festlegung von Größen, Gestaltung des Hintergrunds und der Kanten, Debugging, und vielem mehr.
Das Ziel ist hier, dir eine Werkzeugsammlung zum Schreiben kompetenten CSS-Codes bereitzustellen und dir zu helfen, die grundlegende Theorie zu verstehen, bevor es mit spezifischeren Themen wie Textgestaltung und CSS-Layout weitergeht.
Textgestaltung
Nach der Behandlung der Grundlagen der Sprache CSS ist das nächste Thema, auf das du dich konzentrierst, Text zu gestalten — eines der gewöhnlichsten Dinge, die du mit CSS tun wirst. Hier sehen wir uns die Grundlagen der Textgestaltung an, zum Beispiel das Verändern der Schriftart, Schriftdicke, Kursivschrift, Zeilen- und Buchstabenabstand, Schlagschatten und andere Textmerkmale. Wir runden das Modul ab, indem wir uns das Anwenden eigener Schriften auf die Seite und die Gestaltung von Listen und Links anschauen.
CSS-Layout
An dieser Stelle haben wir uns bereits die CSS-Grundlagen, Textgestaltung und, wie Boxen, in denen sich dein Inhalt befindet, gestaltet und manipuliert werden können, angeschaut. Jetzt ist es an der Zeit, sich anzusehen, wie Boxen in Bezug auf den Ansichtsbereich und einander am richtigen Ort platziert werden. Wir haben die notwendigen Voraussetzungen behandelt, weshalb wir jetzt tief ins CSS-Layout eintauchen können, indem wir uns verschiedene Bildschirmeinstellungen, moderne Layoutwerkzeuge wie Flexbox, CSS-Grids und Positionierung und ein paar der alten Methoden, über die du vielleicht noch etwas wissen möchtest, anschauen.
CSS nutzen, um übliche Probleme zu lösen
Dieses Modul beinhaltet Links zu Inhaltsabschnitten, die erklären, wie CSS genutzt werden kann, um sehr gewöhnliche Probleme beim Erstellen einer Webseite zu lösen.

Referenzen

Kochbuch

Das CSS-Layout-Cookbook versucht, Rezepte für übliche Layoutmuster zusammenzubringen, Dinge, die du in deiner Seite implementieren müssen könntest. Zusätzlich zur Bereitstellung von Code, den du als Anfangspunkt in deinen Projekten nutzen kannst, heben diese Rezepte die verschieden Möglichkeiten, wie Layoutspezifikationen genutzt werden können, und die Entscheidungen, die du als Entwickler treffen kannst, hervor.

Werkzeuge für die CSS-Entwicklung

Siehe auch