CSS

CSS (Cascading Style Sheets, zu deutsch „Mehrstufige Formatvorlagen“) 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
  • Warum Layouts mit CSS?
  • Stylesheets einbinden
  • Syntax

• Einstieg in Flexbox
  • Warum Flexbox?
  • Fixer Footer
  • Responsives Mehrspaltenlayout

• Einstieg in das Grid Layout
  • Grid-Container
  • implizite Erzeugung von Rastern
  • Ausrichtung von Grid-Items

• fertige Layouts
  Beispielseiten zur freien Verwendung

Referenz

• CSS-Eigenschaften
  alphabetisch sortierte Kurzübersicht (Referenz)
• CSS-Funktionen
  • Custom properties (CSS-Variablen)

Selektoren

• CSS/Selektoren
  alphabetisch sortierte Kurzübersicht (Referenz)
• CSS/Tutorials/Selektoren
  • Kombinatoren
  • Pseudoelemente
  • Pseudoklassen

weiterführendes Wissen

• @-Regeln
  • Media Queries
  • Mixins mit @apply
• Erlaubte Wertetypen
• Namensräume und Selektoren
• Wertvarianten und Vererbung

Tutorials

Ausrichtung und Positionierung

• Abstand
  • margin (Außenabstand)
  • padding (Innenabstand)
  • gap (für columns, Flexbox & grid)
• Ausrichtung mit CSS
  • position
  • float und clear
  • CSS-Shapes
  • Stapelkontext (z-index)
  • Inhalte zentrieren
  • variable Elemente nebeneinander

Animation

• CSS-animation
  • transition
  • animation
  • offset-path
• CSS-transform

Druckausgabe

• Print-CSS
• Druckvorlage

Entwicklung

• Validierungs-Stylesheet

Formulare

• Einstieg in Formulare
  • Beschriftungen
  • Buttons und Schalter
• Wartungsfreundliches CSS am Beispiel eines Buttons

Grafiken

• Bilder im Internet
  • Bilder mit CSS formatieren
  • Bildergalerie
  • Bilderkarussell (mit CSS-animation)
• Hintergrund
  • Image Replacement
  • Sprites
• Masken und Beschneidungen
  • clip-path
  • mask

Icons

• Einbinden von Icon-Fonts

Layouts

• Single-Page Webseite
• CSS/Tutorials/Tooltips mit CSS

Listen und Menüs

• Einstieg in Links
  • Links -Gestaltung mit CSS
• Listen
  • Gestaltung mit CSS
  • Hybride Nummerierung
  • Fußnoten mit CSS
• Einstieg in Navigation
  • Dropdown-Menüs
• Menüs und mehr mit dem Checkbox-Hack

Tabellen

• Einstieg in Tabellen
  • Gestaltung mit CSS
  • Responsive Gestaltung
• Tabelle mit festem Kopf
• Alternativen zu Tabellen

Text & Typografie

• Typografie
  • Schriftformatierung
  • Textformatierung
  • Textausrichtung
  • Spalten mit columns
• Schreib- und Leserichtung

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.
• tympanus.net: CODROPS aktueller Blog mit vielen Tutorials und
  • CSS Reference