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.

Referenz
alphabetisch sortierte Kurzübersichten

• CSS-Eigenschaften
• CSS-Funktionen
  • Custom properties (CSS-Variablen)
• CSS-Selektoren

• Media Queries
  • Medienabfragen einbinden
  • Medienmerkmale
  • Benutzereinstellungen
  • Container Queries

• Schnell-Index (alphabetisch)
• @-Regeln
• Erlaubte Wertetypen
  • Wertvarianten und Vererbung
• fertige Layouts
  Beispielseiten zur freien Verwendung

Tutorials

Einstieg in CSS

* {
  color: red;
  margin: 1em;
}
Stylesheets für HTML und SVG

HEADER NAV MAIN ASIDE FOOTER
Einstieg ins Grid Layout

Boxmodell und Größenangaben

Grundlagen

• Einstieg in CSS
  • Stylesheet einbinden
    • Warum Layouts mit CSS?
  • Syntax
    • Regelsätze und Deklarationen
  • Gestaltungstipps
    • Guter CSS-Stil

• Einstieg in Flexbox
  • Warum Flexbox?
  • Flex-Container
  • Flex-Items
  • Ausrichtung
  • Fixer Footer
  • Responsives Mehrspaltenlayout

• Einstieg in das Grid Layout
  • Grid-Container
  • Grid-Items (Rasterelemente)
  • benannte Linien und Rasterbereiche
  • Responsive Raster ohne Media Queries
  • Ausrichtung von Grid-Items

Ausrichtung und Positionierung

• Boxmodell
  • Größenangaben
  • übergroßer Inhalt
  • margin (Außenabstand)
  • padding (Innenabstand)
  • Logische Eigenschaften
• 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

 

• Benutzeroberfläche
  • appearance
  • accent-color
  • theme-color
  • cursor
  • caret-color
  • user-select

  Druckausgabe

• Print-CSS
• Druckvorlage

Entwicklung

• Validierungs-Stylesheet

Formulare

• Einstieg in Formulare
  • Beschriftungen
  • Radio-Buttons und Checkboxen
  • Gestaltung mit CSS

Grafiken

• Bilder im Internet
  • Bilder mit CSS formatieren
  • Bildergalerie
  • Bilderkarussell (mit CSS-animation)
• Hintergrund
  • Image Replacement
  • Sprites
• Vermischen mit Blend-Modes
• 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
• Zeilenumbruch
  • Zeilenumbruch beinflussen
  • 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.
• tympanus.net: CODROPS aktueller Blog mit vielen Tutorials und
  • CSS Reference