CSS

CSS (Cascading Style Sheets, zu deutsch „Kaskadierende Stilvorlagen“) ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Warum Sie Layouts mit CSS einsetzen sollten, wird in diesem Artikel genauer erläutert.

Inhalte, die durch HTML strukturiert werden, besitzen bereits einige vom Browser vorgegebene Formatierungen. Zum Beispiel sind Überschriften groß und fett oder Hyperlinks blau und unterstrichen. Mit Hilfe von CSS kann die Darstellung von HTML- und XML-Dokumenten auf vielfältige Art verändert werden.

Grundlagen

• Syntax (Einstieg in den Aufbau von CSS)
• Stylesheets in Dokumente einbinden
• Das Box-Modell
• Medienabfragen (Media Queries)

Selektoren

• einfache Selektoren
• Kombinatoren
• Pseudoelemente
• Pseudoklassen

Eigenschaften

• Schriftbild
• Textformatierung
• Textausrichtung
• Rahmen und Schatten
• Hintergrundfarben und -bilder
• Animationen
• Flexbox
• Grid Layout

Anwendung und Praxis

• Layouts mit CSS - Warum CSS?
• responsive Bilder
• Listen mit hybrider Numerierung
• responsive Tabellen
• Bildwechsler
• …

weiterführendes Wissen

• die Kaskade
• @-Regeln
• Erlaubte Wertetypen
• Namensräume und Selektoren
• Wertvarianten und Vererbung
• Arbeit mit Variablen
• Mixins mit @apply

Diese Layoutvorschläge dürfen Sie gern verwenden:

• fertige Layouts

Präprozessoren erleichtern einem die Arbeit:

• ACSS
• SASS

Weblinks

Quellen des W3-Konsortiums zu CSS

• W3C: CSS CSS-Portalseite des W3C
  • W3C: CSS Current Status: Von dieses Seite aus können Sie alles, was das W3-Konsortium zu CSS veröffentlicht hat, erreichen.

RFCs (Requests for Comment) zu CSS

• The text/css Media Type (RFC 2318): RFC 2318 vom März 1998 zum Mime-Type text/css.

Internationale Hilfen und Quellen zu CSS

• css-tricks.com sehr informative und topaktuelle Seite von Chris Coyier
• HTML Writers Guild: CSS Frequently Asked Questions: CSS-Dokumentation in Form "häufig gestellter Fragen".
  von der HTML Writers Guild.
• quirksmode.org: Kompatibilitäts-Übersichtstabelle speziell für CSS-Erweiterungen (z.B. erweiterte Selektoren, neue CSS-Eigenschaften), welcher Browser in welcher Version welches Feature unterstützt oder nicht unterstützt.
• theoplagroup.com: SelectORacle: Wer durch die Selektoren eines Stylesheets nicht mehr durchblickt, dem verschafft das "Selectoracle" Überblick, indem auch die komplexesten Selektoren wieder in englische Sprache übersetzt werden.
• tympanus.net: CODROPSaktueller Blog mit vielen Tutorials und
  • CSS Reference