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.

Grundlagen

• Einstieg in CSS
  • Stylesheets einbinden
  • Guter CSS-Stil
• 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