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

Eigenschaften

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

Selektoren

• einfache Selektoren
• Kombinatoren
• Pseudoelemente
• Pseudoklassen

weiterführendes Wissen

• @-Regeln
• Erlaubte Wertetypen
• Namensräume und Selektoren
• Wertvarianten und Vererbung
• Custom properties (CSS-Variablen):
• Mixins mit @apply

Tutorials

Layouts

• mehrspaltige Layouts mit float
• Ausrichtung: float und clear richtig verwenden
• Elementfluss: position richtig verwenden (von Matthias Apsel)
• feststehender footer mit position
• Inhalte zentrieren
• variable Elemente nebeneinander
• Akkordeon (Aufklappmechanimus)
• Single-Page Webseite

Druckausgabe

• Print-CSS
• Printvorlage

Entwicklung

• Validierungs-Stylesheet

Formulare

• HTML/Tutorials/Formulare
  • browsereigene Validierung mit HTML5
  • Buttons und Schalter
  • Suchformulare
• Wartungsfreundliches CSS am Beispiel eines Buttons

Grafiken

• hochauflösende Bilder responsiv darstellen
• Bilder mit Bildunterschriften
• Bilder mit CSS-Sprites zusammenfassen
• Image-Replacement
• Mehrere Hintergrundbilder verwenden (von Matthias Apsel)
• Bildergalerie
• Bilderkarussell
• Bildwechsler (mit CSS-animation)

Icons

• Einbinden von Icon-Fonts

Listen und Menüs

• Listen mit CSS gestalten
• Listen mit hybrider Nummerierung formatieren
• Dropdown-Menüs mit CSS gestalten
• Menüs und mehr mit dem Checkbox-Hack

Tabellen

• Tabellen responsiv gestalten
• Tabellen mit CSS gestalten
• Tabelle mit festem Kopf
• Alternativen zu Tabellen

Text & Typographie

• Texteffekte
  • 3D-Look
  • Umriss
  • Neon
  • Text gedreht
  • Text mit Farbverlauf
  • Überschrift mit Linie links und rechts

• Textformatierung
  • Überschriften interessant gestalten
  • Ribbons (Hintergrundbänder)
  • Initialen (dekorative Anfangsbuchstaben)
  • Hängende Interpunktion (Zitate und Anführungszeichen interessant gestalten)
  • Fußnoten mit CSS

• Sonstiges
  • Tooltips mit CSS
  • Unterlängen
  • vertikaler Rhythmus
  • Google-Fonts einbinden
  • Google-Fonts selbst hosten
  • Zeilenumbruch erzwingen

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