CSS (Cascading Style Sheets)
Darstellung von HTML-Elementen
(Materialsammlung)
Zuletzt geändert:
Mit CSS-Anweisungen wird die Darstellung von HTML-Elementen gesteuert. Grundlegende Anweisungen werden in .css-Dateien für einen gesamten Webauftritt festglegt.
CSS-Eigenschaften (Auswahl)
background
Festlegen einer Hintergrundfarbe oder einer Hintergrundgrafik.
background: red
color
Festlegen der Schriftfarbe.
color: green
content
Hinzufügen oder Modifizieren von HTML-Inhalt
cursor
Modifizieren der Mauszeiger.
font-family
Festlegen der Schriftart (mit oder ohne Serifen, …)
- font-family: serif
- font-family: sans-serif
- font-family: monospace
- Schriftarten
- Reflexionen zum Einsatz von Schriftarten mit und ohne Serifen …
-
MDN |
font-family - Erläuterungen und Beispiele aus dem Mozilla Developer Network.
font-size
Festlegen der Schriftgröße.
- font-size: 25px
- font-size: 20px
- font-size: 16px
- font-size: larger
- font-size: smaller
- font-size: large
- font-size: medium
- font-size: small
- font-size: 80%
font-style
Text kursiv formatieren
font-style: italic
font-weight
Festlegen der Strichstärke (Fett formatieren).
- font-weight: normal
- font-weight: bold
letter-spacing
Erhöhte Zeichenabstände festlegen.
letter-spacing: 2px
margin
Festlegen von Außenabständen einer Überschrift
- margin-left: 1em
- margin: 0
- margin-top: 1ex
- margin-bottom: 1ex
- margin: 0
- margin: 0
- margin: 1ex 1em
- margin: 0
outline
Außenlinie um das Element.
outline : solid 2px blue; outline-offset: 2px;
opacity
Transparenz zum Hintergrund.
- opacity: 0.1
- opacity: 0.5
- opacity: 1
padding
Einrücken von Text innerhalb eines Elements.
- padding: 0
- padding-left: 1em
scroll-padding
Effekte zum Einrücken und Verschieben beim Scrollen und bei Fokus (vergleiche Erfolgskriterium 2.4.11 ).
text-align
Festlegen der horizontalen Ausrichtung des Texts in einem Element (linksbündig / zentriert / rechtsbündig)
- text-align: left
- text-align: center
- text-align: right
text-decoration
Festlegen von Unterstreichungen.
text-decoration: underline;
text-transform
Festlegen der Groß- und Kleinschreibung
text-transform: uppercase
Barrierefreiheit und Nutzungsfreundlichkeit
- Die wichtigsten Anweisungen für Formatierungen sollten in einer zentralen CSS-Datei festgelegt werden. Auf diese Weise wird am sichersten gewährleistet, dass das Erscheinungsbild einzelner HTML-Elemente über einen gesamten Webauftritt konsistent bleibt. Zudem lässt sich dadurch einfach die Darstellung für den gesamten Webauftritt verändern.
- CSS-Anweisungen sollten so sparsam wie möglich eingesetzt werden. Die Darstellung der HTML-Elemente wird dadurch dem Browser überlassen und kommt den Erfahrungswerten für das Erscheinungsbild entgegen.
Beispiele
- Sichtbarkeit bei Fokus
- Einsprunglinks durch Drücken der Tab-Taste sichtbar machen.
- Exklusive Informationen für Screen Reader
- Verbergen von HTML-Elementen vom Bildschirm, um einen kurzen Hinweis explizit nur an Screen Reader auszugeben.
- Sprache der Zieldatei indizieren
-
Mit dem HTML-Attribut
hreflangkann die Sprache der Zielseite eines Links technisch angegeben werden. Mittels CSS kann für diese Links ein barrierefreier Indikator festgelegt werden.