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.
Allgemeine Empfehlungen
- 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.
CSS-Eigenschaften (Auswahl)
background
Festlegen einer Hintergrundfarbe oder einer Hintergrundgrafik.
background: red
color
Festlegen der Schriftfarbe.
color: green
font-family
Festlegen der Schriftart (mit oder ohne Serifen, …)
- font-family: serif
- font-family: sans-serif
- font-family: monospace
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
Tipps zu einzelnen CSS-Anweisungen
content before und after
Inhalt sollte in der Regel direkt in HTML-Elementen erscheinen. Eine Ausnahme stellen die CSS Pseudo-Elemente :before und :after dar. Mit deren Hilfe kann HTML-Elementen ein Inhalt beigefügt werden.
Der folgende CSS-Code stellt Elementen mit der Klasse mobil ein Icon für Smart Phones voran (📱). Auf diese Weise können beispielsweise Mobilnummern einheitlich gekennzeichnet werden:
.mobil:before { content: '\1F4F1'; }
Die Namen von Unicode-Zeichen werden durch Screen Reader weithin durch eine Sprachausgabe wiedergegeben. Allerdings sollte deren Interpretation eines Zeichens vor dem Einsatz getestet werden.
- W3C | Accessible Name and Description Computation 1.1
- Unter der Bedingung F werden
beforeundafterals Teil des barrierefreien Namens erläutert.
HTML Attribute für Darstellung verwenden
- hreflang: Sprache der Zieldatei
- Verwendung des Attributs zum automatischen Voranstellen eines Icons für die Sprache der Zieldatei
Beispiele
- Sichtbarkeit bei Fokus
- Einsprunglinks durch Drücken der Tab-Taste sichtbar machen.