Gestaltung mit CSS
Mit HTML lässt sich die Struktur von Webseiten definieren und Textinhalte können semantisch ausgezeichnet werden, z. B. als Hyperlinks, betonter Text, Code oder Zitat. Wie diese Elemente grafisch dargestellt werden, hängt dabei vom Webbrowser ab, also beispielsweise welche Schriftart für Überschriften, Textinhalte oder Code jeweils verwendet wird oder mit welcher Hintergrundfarbe die Seite dargestellt wird.
Als Beispiel ist hier eine Webseite zu sehen, die ohne jede Gestaltungsvorgaben in den Browsern Firefox und Opera angezeigt wird.
 |  |
|---|
Die grafische Darstellung kann also je nach Webbrowser und Betriebssystem unterschiedlich sein (z. B. werden hier üblicherweise verschiedene Standardschriftarten verwendet). Dabei gibt es Konventionen, die von den meisten Webbrowser eingehalten werden, z. B. wird <em> kursiv dargestellt, <strong> fett, <code> mit einer Festbreitenschriftart, Unterschriften höherer Ebenen größer als Unterschriften niedrigerer Ebenen. Davon abgesehen lässt sich mit reinem HTML bisher aber kein Einfluss auf die grafische Gestaltung der Seite nehmen.
Wie Elemente einer HTML-Webseite dargestellt werden sollen, wird durch eine andere Sprache beschrieben, nämlich CSS.
CSS
CSS steht kurz für Cascading Style Sheets (also etwa “gestufte Gestaltungsbögen”) und stellt eine formale Sprache dar, mit der sich die grafische Darstellung von HTML-Elementen in textueller Form beschreiben lässt. Dazu werden zusätzliche Attribute verwendet, die als Stilattribute (oder CSS-Attribute) bezeichnet werden.
In einem CSS-Dokument wird beschrieben, wie HTML-Elemente dargestellt werden sollen, indem ihren Stilattributen bestimmte Werte zugewiesen werden. Solche Wertezuweisungen für ein bestimmtes Element werden als Stilregeln (oder CSS-Regeln) bezeichnet. Diese Regeln stellen Gestaltungsanweisungen für den Browser dar.
Ähnliche Stilregeln kennen wir aus akademischen Kontexten, wenn es etwa um die Ausfertigung von schriftlichen Arbeiten geht. Beispielsweise heißt es in §11 APVO Lehrkräfte über die schriftliche Hausarbeit im Rahmen des Vorbereitungsdienstes:
Die Schriftart ist Arial mit dem Zeilenabstand 1,0; der Schriftgrad beträgt 12 Pt.
In CSS formuliert könnte diese Stilregel so aussehen:
body {
font-family: Arial;
line-height: 1.0;
font-size: 12pt;
}
Das CSS-Dokument wird mit dem HTML-Dokument verknüpft, indem im Dokumentenkopf des HTML-Dokuments ein entsprechendes <link>-Element angegeben wird:
Verwechslungsgefahr! Das <link>-Element dient nicht dazu, Links auf andere Seiten zu setzen! Dafür muss der Tag <a> verwendet werden. Das <link>-Element verknüpft mehrere Dateien, die zusammengesetzt eine Webseite ergeben.
<head>
...
<link href="style.css" rel="stylesheet" type="text/css">
</head>
In diesem Fall heißt die CSS-Datei style.cssund liegt im selben Verzeichnis auf dem Webserver wie die HTML-Seite, von der sie verwendet wird.
Dieses Prinzip erlaubt es, ein und die selbe CSS-Datei in allen HTML-Dateien einer Website einzubinden, so dass die Gestaltungsregeln der gesamten Website an einer zentralen Stelle festgelegt werden können.
CSS-Regeln
Eine CSS-Regel ist immer nach demselben Schema aufgebaut: Sie beginnt mit einer Angabe, für welche(s) HTML-Element(e) die Regel gelten soll. Dieser Teil der Regel wird als Selektor bezeichnet. Es folgen in geschweiften Klammern die Wertezuweisungen zu den Stilattributen, jeweils im Format: Attributname Doppelpunkt Wert(e) Semikolon
Als Selektor kann ein einzelnes HTML-Element oder mehrere HTML-Elemente durch Komma getrennt angegeben werden, für welche die Stilregel gelten soll.
Die meisten Stilattribute erwarten einen einzelnen Wert, der zum erwarteten Datentyp passen muss. Die für den Einstieg relevanten Datentypen, die in CSS unterschieden werden, sind:
- Farbwerte: z. B. für Schriftfarben, Linien- und Hintergrundfarben von HTML-Elementen (siehe Referenz zu Farbwerten)
- Größenangaben: z. B. für Abstände, Schriftgrößen oder Linienbreiten von HTML-Elementen (siehe Referenz zu Größenangaben)
- Schriftarten: z. B. für das Attribut
font-family, werden durch die Namen der Schriftarten durch Komma getrennt beschrieben - Aufzählungen: Attribut-spezifische Bezeichner, z. B. kann für das Attribut
text-alignals Textausrichtungleft,right,centeroderjustify(Blocksatz) angegeben werden - Zahlenwerte (Ganzzahlen, Dezimalzahlen) und Prozentangaben: z. B. auch für Größenangaben
Es gibt auch Stilattribute, die mehrere Werte (durch Leerzeichen getrennt) erwarten – diese Attribute sind meistens Kurzformen, die mehrere andere Attribute zusammenfassen. Beispielsweise gibt es die Stilattribute border-width, border-style und border-color, mit denen sich jeweils die Breite, der Linienstil (z. B. durchgezogen, gestrichelt) und die Farbe für den Rahmen eines HTML-Elements festlegen lässt:
table {
border-width: 1px;
border-style: solid;
border-color: black;
}
Daneben gibt es ein Attribut border, mit dem sich in Kurzform alle drei Werte auf einmal zuweisen lassen. Die Werte werden dabei in der Reihenfolge Breite Stil Farbe erwartet:
table {
border: 1px solid black;
}
Selektoren
CSS erlaubt es, durch die Angabe von speziellen Selektoren sehr präzise zu definieren, für welche Elemente spezielle Gestaltungsregeln gelten sollen.
Der universelle Selektor * erlaubt es, Regeln für alle HTML-Elemente der Seite festzulegen, z.B. um Standardschriftarten zu definieren:
* {
font-family: "Libertinus Serif";
}
Tags
Der Name eines Tags kann einfach so, ohne die spitzen Klammern, als Selektor verwendet werden. Sofern keine anderen Regeln das einschränken, gelten diese Regeln dann für alle Elemente dieses Tags.
h1 {
/* Regeln für alle Überschriften auf Ebene 1 */
}
img {
/* Regeln für alle Bilder */
}
Klassen und IDs
Mit dem HTML-Attribut class können HTML-Elemente zu so genannten Klassen hinzugefügt werden. Diese Klassen können dann genutzt werden, um z. B. für manche Absätze separate Regeln festzulegen. Wenn eine Klasse als Selektor verwendet wird, muss vor ihren Namen ein Punkt gesetzt werden.
Stellen wir uns als Beispiel ein Schulbuch vor, das neben normalem Text noch Infokästen und Hilfestellungen enthält. Das alles sind normale Textabsätze, die mit <p>-Tags gekennzeichnet werden. Die Infokästen werden dann als <p class="infokasten">...</p> und die Hilfestellungen als <p class="hilfestellung">...</p> aufgeschrieben. Die CSS-Regeln dazu könnten dann so aussehen:
.infokasten {
border: 1px solid black;
padding: 10px;
}
.hilfestellung {
border-left: 5px solid #feef00;
padding-left: 10px;
background-color: #feef0080;
}
HTML-Elemente können auch zu mehreren Klassen gehören. Die Klassennamen werden dann mit Leerzeichen getrennt in ein class-Attribut geschrieben:
<a class="external email" href="mailto:[email protected]">Schreib mir eine E-Mail</a>
Genauso wie Klassen können auch IDs vergeben werden, diese kennzeichnen aber einzelne HTML-Elemente, während Klassen in der Regel mehrere Elemente umfassen. Das entsprechende HTML-Element wird mit dem Attribut id versehen und die ID als CSS-Selektor mit einer vorangestellten Raute markiert:
#seitenmenue {
background-color: lightblue;
color: navy;
}
Selektoren kombinieren
Um eine Regel für mehrere Selektoren gelten zu lassen, können diese mit Kommata separiert werden:
/* Überschriften erster bis dritter Ordnung werden unterstrichen. */
h1, h2, h3 {
text-decoration: underline;
}
/* i-Tags, em-Tags und Elemente der Klasse "notice" werden kursiv dargestellt. */
i, em, .notice {
font-style: oblique;
}
Ineinandergeschachtelte HTML-Elemente können gezielt addressiert werden, indem die Selektoren von außen nach innen mit Leerzeichen getrennt aneinandergehängt werden:
/* Bilder in Infokästen dürfen maximal 30 % von dessen Breite ausfüllen. */
.infokasten img {
max-width: 30%;
}
/* Links in Überschriften werden doppelt unterstrichen. */
h1 a {
text-decoration: underline double;
}
Die Schnittmenge von einem Tag und einer Klasse kann addressiert werden, indem man den Selektor der Klasse direkt hinter den des Tags schreibt, ohne trennendes Leerzeichen:
/* Alle <p class="example">-Elemente */
p.example {
/*...*/
}
/* Alle <_ class="example">-Elemente innerhalb von <p>-Elementen */
p .example {
/*...*/
}
/* Alle <p>-Elemente und alle <_ class="example">-Elemente */
p, .example {
/*...*/
}
Layout
Abstände und Rahmen
Abstände und Rahmen werden in CSS mit dem so genannten Box-Modell erzeugt. Um jedes HTML-Element sind drei konzentrische Boxen angeordnet. Diese sind, von innen nach außen:
padding, der Abstand zwischen dem Rahmen und dem Element selbstborder, der Rahmenmargin, der Abstand um den Rahmen herum
Für padding und margin kann jeweils nur die Größe der Box angegeben werden, für border zusätzlich zur Rahmenbreite auch ein Linienstil (etwa solid für durchgezogen, dashed für gestrichelt oder dotted für gepunktet).
Zu beachten ist, dass alle diese drei Boxen unabhängig voneinander definiert werden können.
Diese Attribute können auf unterschiedliche Weisen verwendet werden. Die folgende Regel sorgt beispielsweise dafür, dass innerhalb von Tabellenzellen zehn Pixel Abstand zwischen der Rahmenlinie und dem Text bleiben.
td {
padding: 10px;
}
Statt nur einen Parameter anzugeben, der auf alle vier Seiten der Box angewendet wird, können auch vier Parameter angegeben werden, die in dieser Reihenfolge die Größen für die obere, rechte, untere und linke Seite der Box vorgeben:
h2 {
margin: 2.5rem 0 1.5rem 0;
}
Diese Gestaltungsregel wird übrigens auch hier in diesem Skript angewendet.
Statt die vier Parameter hintereinander anzugeben, können mit den Zusätzen -top, -bottom, -left und -right auch separate Regeln für die einzelnen Seiten einer Box definiert werden:
p {
border-top: 30px solid red;
margin-bottom: 0;
}
Seiten-Layout
Der Abschnitt “Seiten-Layout” befindet sich noch im Aufbau.
HTML-Elemente für Layout
| Element | Beschreibung |
|---|---|
<span> </span> | Allgemeiner Container für Textbereiche ohne besondere Bedeutung |
<div> </div> | Allgemeiner Container für Inhalte (engl. division element), in der Regel als Block dargestellt |
<header> </header> | Container für den Kopfbereich einer Seite (z. B. Logo, Titel) |
<nav> </nav> | Container für die Navigationsleiste einer Seite |
<main> </main> | Container für den Hauptinhalt einer Seite |
<aside> </aside> | Container für eine Seitenleiste neben dem Hauptinhalt (z. B. Menü) |
<footer> </footer> | Container für die Fußzeile einer Seite (z. B. Link zum Impressum) |
Textgestaltung
Für die Textgestaltung ließe sich auch einfaches HTML nutzen – Tags wie <b> für Fettdruck, <font> zur Änderung von Schriftart, -größe und -farbe oder <sup> für hochgestellten Text existieren und werden in den meisten Browsern korrekt dargestellt. Wenn Sie eine Kapitelüberschrift in 16pt großer “Comic Sans”-Schriftart, fett und unterstrichen darstellen möchten, können Sie einfach die Tag-Kombination <font size="16pt" face="Comic Sans" color="blue"><b><u> ... </u></b></font> verwenden.
Das geht aber nur so lange gut, bis Sie diese Formatierung regelmäßig benutzen oder gar ändern möchten. Stattdessen empfiehlt es sich, diese Textteile zu einer Klasse zusammenzufassen und für diese Klasse Gestaltungsregeln in CSS festzulegen.
Aus <font size="16pt" face="Comic Sans" color="blue"><b><u> ... </u></b></font> wird dann z. B. <span class="kapitelueberschrift"> ... </span> mit der dazugehörigen CSS-Regel:
.kapitelueberschrift {
font-family: Comic Sans;
font-size: 16pt;
font-weight: bold;
text-decoration: underline;
}
Möchten Sie nun die Farbe der Kapitelüberschrift ändern, müssen Sie nicht mehr den HTML-Code an sechzehn Stellen anpassen, sondern nur den CSS-Code an einer.
Die CSS-Stilattribute für Textgestaltung lassen sich in zwei Kategorien unterteilen: diejenigen für die Formatierung, die das Aussehen eines ganzen Textteils ändern, deren Namen üblicherweise mit text- beginnen, und diejenigen für die Schriftart, die das Aussehen der einzelnen Zeichen verändern, deren Namen üblicherweise mit font- beginnen.
Textformatierung
In diese Kategorie fallen unter anderem Stilattribute bezüglich Farbe, Ausrichtung, Dekoration und Abständen.
Farbe
Das Attribut, um die Farbe des Textes in einem HTML-Element zu ändern, heißt color.
Was insbesondere gern durcheinandergebracht wird: das Attribut, um die Farbe des HTML-Elements selbst zu verändern, ist nicht color (das wäre die Textfarbe), sondern background-color.
Farben können entweder mit ihren Namen (z. B. dark-blue, hot-pink oder gainsboro) oder mit RGB(A)-Codes bezeichnet werden, wobei die Werte für den roten, grünen, blauen und transparenten (“Alpha”) Farbkanal angegeben werden, wie wir es bereits von der Codierung von Bilddaten kennen.
Die Farbwerte können entweder in dezimaler oder hexadezimaler Notation angegeben werden. In der Dezimalschreibweise notieren wur rgb(R, G, B) bzw. rgba(R, G, B, A), wobei R, G, B Zahlen zwischen 0 und 255 sein müssen (die Rot-, Grün- und Blauwerte) und A (der “Alpha”-Wert bzw. die Deckkraft) als Dezimalzahl zwischen 0 und 1 oder als Prozentangabe angegeben werden kann. In der Hexadezimalschreibweise notieren wir #RRGGBB oder #RRGGBBAA, wobei RR, GG, BB und AA jeweils zwei Hexadezimalziffern sind, die eine Zahl zwischen 0 und 255 beschreiben (z. B. #0080FF für Himmelblau).
Um alle Links in einem leicht durchscheinenden Pink einzufärben, ließe sich folgende CSS-Regel verwenden:
a {
color: rgb(192, 1, 186, 0.75)
}
oder die äquivalente Schreibweise
a {
color: #C001BABE;
}
Ausrichtung
Mit CSS können Texte in einem HTML-Element horizontal und vertikal ausgerichtet werden. Für die horizontale Ausrichtung des Textes in einem HTML-Element wird das Attribut text-align auf left für linksbündigen Text, right für rechtsbündigen Text, center für zentrierten Text oder justify für Blocksatz gesetzt.
Bei der Verwendung von Blocksatz mittels text-align: justify kann zusätzlich eine Methode spezifiziert werden, mit der der Text ausgerichtet wird. Mit text-justify: inter-word wird festgelegt, dass nur die Abstände zwischen den Wörtern angepasst werden sollen. Mit der Einstellung text-justify: inter-character werden auch die Abstände zwischen den einzelnen Zeichen verändert.
Die erste Zeile eines Absatzes kann mit dem Attribut text-indent eingerückt werden. Als Parameter kann entweder eine feste Länge oder eine relative Breite in Prozent angegeben werden.
Die letzte Zeile eines in Blocksatz gesetzten Textes erscheint üblicherweise linksbündig. Dies lässt sich aber mit dem CSS-Attribut text-align-last anpassen, das dieselben Werte wie text-align annehmen kann.
Die vertikale Ausrichtung ist kompliziert, weswegen an dieser Stelle ausdrücklich nicht alle Möglichkeiten erörtert werden, die CSS bietet. Es gibt ein CSS-Attribut vertical-align, das sich aber in unterschiedlichen Kontexten unterschiedlich verhält.
In Tabellenzellen kann vertical-align u. a. die Werte top, middle und bottom annehmen, um die Inhalte der Tabellenzelle an ihrem oberen oder unteren Rand bzw. in ihrer Mitte auszurichten.
Möchten Sie beispielsweise ein Icon im Kontext einer Textzeile ausrichten, gibt es diverse Möglichkeiten, die in der Abbildung unten aufgezählt sind. Hierbei muss berücksichtigt werden, woran genau sich CSS ausrichtet. Zu jeder Textzeile sind mehrere Hilfslinien definiert, die in der folgenden Abbildung dargestellt sind:
Rot dargestellt sind hier die Basislinien für normalen, hoch- und tiefgestellten Text. Die Objekte [1], [2] und [3] in der Abbildung sind an den Basislinien ausgerichtet. Die entsprechenden CSS-Regeln sind vertical-align: baseline [1], vertical-align: super [2] und vertical-align: sub [3]. Das Objekt wird selbst mit seiner eigenen Basislinie am umgebenden Text ausgerichtet.
Die Objekte [4] und [5] sind an der Schrifthöhe ausgerichtet, also dem Abstand zwischen dem höchsten Punkt des höchsten Zeichens und dem tiefsten Punkt des tiefsten Zeichens. Die Linien für die Schrifthöhe sind blau eingezeichnet. Objekt [4] ist mit der Regel vertical-align: top am oberen Rand der Schrifthöhe ausgerichtet, Objekt [5] mit vertical-align: bottom am unteren Rand. Das Objekt [4] wird dabei mit seiner eigenen Oberkante an der Oberkante des umgebenden Texts ausgerichtet, das Objekt 5 mit seiner eigenen Unterkante an der Unterkante des umgebenden Texts.
Das Objekt [6] ist mit der Regel vertical-align: middle mittig am umgebenden Text ausgerichtet. Genauer wird der Mittelpunkt der Höhe des Objekts ausgerichtet an dem violett markierten Mittelpunkt zwischen der rot markierten Basislinie und der ebenfalls violett markierten Höhe der Kleinbuchstaben des umgebenden Texts.
Mit den Regeln vertical-align: <feste Länge> und vertical-align: <Prozentangabe> kann die Basislinie des Objekts relativ zur Basislinie des umgebenden Textes um eine angegebene Höhe verschoben werden (Objekt [7]). 100 % entsprechen dabei der Zeilenhöhe, die in der Abbildung grün markiert ist. Zu den Größenangaben siehe auch die Referenz zu Größenangaben.
Ein Inhalt soll vertikal in einem Objekt zentriert sein, aber die Größe des Objekts ist irrelevant? Dafür kann einfach das padding-Attribut benutzt werden. Mehr dazu im Abschnitt Rahmen.
Dekoration
Über-, Durch- und Unterstreichungen können mit dem Attribut text-decoration gestaltet werden. Hierzu können Parameter für die Position (overline für Überstreichung, line-through für Durchstreichung oder underline für Unterstreichung), Linienfarbe (siehe Referenz zu Farbwerten), -stil (solid für durchgezogen, dashed für gestrichelt, dotted für gepunktet, wavy für Wellenline oder double für doppelte Linie) und -breite (siehe Referenz zu Größenangaben) angegeben werden.
/* Überschriften werden mit einer 5px breiten doppelten Linie unterstrichen. */
h1 {
text-decoration: underline double 5px;
}
/* Errata werden mit einer roten Schlangenline durchgestrichen. */
.erratum {
text-decoration: line-through red wavy;
}
Mit dem Attribut text-shadow können den Texten Schatten hinzugefügt werden. Als Parameter können (in dieser Reihenfolge) der horizontale und vertikale Abstand des Schattens zum Text, die Schärfe des Schattens sowie dessen Farbe angegeben werden.
/* Ein leicht versetzter scharf konturierter grauer Schatten */
h1 {
text-shadow: 3px 3px 0px gray;
}
/* Ein rotes Glühen direkt hinter dem Text */
h2 {
text-shadow: 0px 0px 10px red;
}
/* CSS, das die Leute zu ihren Lesebrillen greifen lässt */
h3 {
color: #00000000;
text-shadow: 0px 0px 2px black;
}
Abstände
Die Zeilenhöhe, die u. a. für die vertikale Ausrichtung von Objekten in Textzeilen relevant ist (siehe Ausrichtung), kann mit dem Attribut line-height festgelegt werden. line-height kann als Parameter eine absolute oder relative Längeneinheit übergeben bekommen.
Empfehlenswert ist es, eine relative Angabe in Form einer Zahl ohne Maßeinheit anzugeben, z. B. line-height: 1.5. Angaben in Prozent können unerwartete und unerwünschte Ergebnisse produzieren.
Die Abstände zwischen einzelnen Zeichen und ganzen Wörtern können mit den Attributen letter-spacing und word-spacing definiert werden, die jeweils Größenangaben als Parameter erhalten. Es sind auch negative Größenangaben zulässig, um Zeilen, Wörter und Zeichen enger aneinander rücken zu lassen.
Schrift
In diese Kategorie fallen alle Attribute, die das Aussehen einzelner Zeichen, sprich Buchstaben, Zahlen o.ä. ändern.
Alle nachfolgend beschriebenen Attribute können auf einmal mit dem Attribut font gesetzt werden, etwa
font: italic small-caps bold 12px/30px Georgia, serif;
Die Reihenfolge der Parameter ist hier:
font: font-style font-variant font-weight font-size/line-height font-family;
Die genaue Verwendung dieser Parameter werden in den folgenden Abschnitten einzeln erläutert.
Schriftart
Auf verschiedenen Computern sind verschiedene Schriftarten verfügbar, je nachdem, welches Betriebssystem und welche Software dort installiert sind. Wer Microsoft Office benutzt, kann zum Beispiel u. a. auf die Schriftarten Calibri, Candara und Constantia zugreifen, auf Mac-Geräten stehen Avenir Roman und Trattatello zur Verfügung. Bei der Gestaltung von Webseiten sollte dies berücksichtigt werden, damit die Seite für alle wie gewollt aussieht, auch wenn unterschiedliche Betriebssysteme verwendet werden.
Aus diesem Grund akzeptiert das CSS-Attribut font-family nicht nur eine Schriftart als Parameter, sondern gestattet es auch, mehrere anzugeben. Beispielsweise sind für diesen Text folgende Schriftarten vorgesehen:
body {
font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
Diese Regel wird von links nach rechts ausgewertet, wobei die erste verfügbare Schriftart ausgewählt wird. Einige dieser Einträge stehen für konkrete Schriftarten: "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell und "Helvetica Neue". Zu beachten ist hier, dass Namen, die Leerzeichen enthalten, in Anführungszeichen gesetzt werden müssen.
Andere Einträge stehen für Schriftfamilien. Zum Beispiel bedeutet system-ui, dass die Standard-Schriftart des Betriebssystems verwendet werden soll, auf dem die Seite geöffnet wird. Einige ältere Versionen des Safari-Browsers verwenden stattdessen -apple-system.
Der letzte Eintrag (hier: sans-serif) wird als fallback (engl. für “Rückfallebene”) bezeichnet. Er legt fest, dass irgendeine serifenlose Schriftart verwendet werden soll – egal ob Arial, Calibri oder Liberation Sans – falls keine der vorher erwähnten Schriftarten verfügbar ist. Ein solcher Fallback-Eintrag sollte auf jeden Fall einsetzt werden, da er wenigstens ein Mindestmaß an Kontrolle über die Gestaltung der Schriftart gewährleistet. Mögliche Fallback-Parameter sind sans-serif (eine Schriftart ähnlich z. B. Arial), serif (ähnlich z. B. Times New Roman), monospace (für Schriftarten, in denen alle Zeichen gleich breit sind, wie z. B. Courier*_), cursive (für Schreibschrift) und fantasy (für dekorative und verspielte Schriftarten).
Nicht verwechseln: font-family: cursive bedeutet nicht, dass die Schrift kursiv gesetzt wird. Dazu muss font-style: italic angegeben werden.
Schriftgröße
Mit dem Attribut font-size kann die Schriftgröße von Anzeigeelementen festgelegt werden. Als Größenangabe können folgende Werte eingesetzt werden:
- eins der absoluten Schlüsselwörter
xx-small,x-small,small,medium,large,x-largeundxx-large– die genaue Gestaltung bleibt dann dem Browser überlassen - eins der relativen Schlüsselwörter
largerodersmaller– also größer oder kleiner als der Text der umliegenden HTML-Elemente. - eine absolute Größenangabe in
mm,pt,in(ch) oderpx. Bevorzugt solltenpxverwendet werden, da alle anderen Einheiten der Interpretation des einzelnen Browsers unterliegen - eine relative Größenangabe in
%,em,exoderrem. Hierbei beziehen sich%,emundexauf die Schriftgröße des umschließenden HTML-Elements,remauf die Schriftgröße des HTML-Bodys.1ementspricht dabei der normalen Schriftgröße,1exder Höhe der Kleinbuchstaben.
Schriftstil
Um Texte durch Fettdruck oder Kursivdruck hervorzuheben, können die Attribute font-style und font-weight benutzt werden.
font-style kann die Werte normal, italic für kursive Schrift und oblique für schräge Schrift annehmen. In vielen Schriftarten sehen kursive und schräge Schrift identisch aus. Der Unterschied ist, dass für Schrägschrift einfach die normalen, aufrechten Zeichen etwas geneigt werden, während in einigen Schriften für Kursivschrift eigene Zeichen verwendet werden. Die folgende Abbildung demonstriert den Unterschied:
Für Fett- oder Leichtdruck kann das Attribut font-weight verwendet werden. Als Parameter können entweder die festen Werte normal, bold (fett), lighter (leichter als der umgebende Text) und bolder (fetter als der umgebende Text) verwendet werden. Präziser kann der Wert mit einer Zahlenangabe zwischen 1 und 1000 spezifiziert werden, wobei ältere Browser nur die Werte 100, 200, 300, 400 (entspricht der Angabe normal) 500, 600, 700 (entspricht der Angabe bold), 800 und 900 unterstützen und alle anderen Angaben gerundet werden. Für relative Angaben, also lighter und bolder werden nur die Gewichte 100, 400, 700 und 900 berücksichtigt.
Noch ausgefallenere Textgestaltung erlaubt das Attribut font-variant, mit dem unter anderem die Verwendung von besonderen Schriftschnitten für Kapitälchen und Großbuchstaben definiert werden kann.1
Dieses Attribut ist allerdings nicht mit allen Schriftarten kompatibel und sollte daher vorsichtig eingesetzt werden. Einige Werte, die font-variant annehmen kann, sind:
small-capsoderpetite-capsfür Kapitälchen, wobei die Großbuchstaben ihre originale Höhe behaltenall-small-capsoderall-petite-capsfür Kapitälchen, wobei auch die Großbuchstaben verkleinert werdenunicase, wobei nur die Großbuchstaben durch Kapitälchen ersetzt werden und die Kleinbuchstaben ihre Größe behalten2
Referenz
Attribute
| Attribut | Beschreibung | Werte |
|---|---|---|
color | Textfarbe | Farbwert |
background-color | Hintergrundfarbe | Farbwert |
font-family | Schriftart | Name(n) der Schriftart, z. B. Arial, Liberation Sans, sans-serif3 |
font-size | Schriftgröße | Größenangabe |
font-style | Schriftstil | normal, italic (kursiv) |
font-weight | Schriftdicke | normal, bold (fett), Zahlenwert zwischen 1 und 1000 (normal entspricht 400, fett 700) |
text-align | Horizontale Textausrichtung | left, right, center, justify (Blocksatz) |
vertical-align | Vertikale Textausrichtung | top, bottom, middle |
border-color | Farbe des Rahmens | Farbwert |
border-style | Linienstil des Rahmens | z. B. solid (einfache Linie), double (doppelte Linie), dotted (gepunktet), dashed (gestrichelt), none |
border-width | Breite des Rahmens | Größenangabe |
margin | Außenabstand zu allen Seiten | Größenangabe |
margin-top/-bottom/-left/-right | Außenabstand oben, unten, links, rechts | Größenangabe |
padding | Innenabstand zu allen Seiten | Größenangabe |
padding-top/-bottom/-left/-right | Innenabstand oben, unten, links, rechts | Größenangabe |
width, height | Breite, Höhe | Größenangabe |
list-style-type | Aufzählungsstil oder -symbol für Listenelemente | circle (Kreis), disc (gefüllter Kreis), square (gefülltes Quadrat), decimal (nummeriert), lower-/upper-roman (römische Ziffern), none, Zeichenkette (z. B. "* ") |
Rahmenstile lassen sich auch in Kurzform mit dem Stilattribut border festlegen, das drei Argumente erwartet: Breite, Linienstil und Farbe (z. B.: border: 1px solid black;). Bei allen Rahmen-Stilattributen kann border auch durch border-top, border-left usw. ersetzt werden, um einen Rahmenstil für eine bestimmte Seite festzulegen.
Farbwerte
Farbwerte lassen sich in CSS als dezimale RGB-Werte oder RGB-Werte im Hexadezimalformat angeben (jeweils mit 8 Bit pro Farbkanal). Häufig verwendete Farbwerte sind auch durch einen Namen spezifiziert, der alternativ angegeben werden kann (siehe Farbreferenz bei W3Schools):
- Farbname, z. B.:
red,gray,yellow - RGB-Werte (dezimal), z. B.:
rgb(255, 0, 0),rgb(128, 128, 128),rgb(255, 255, 0) - RGB-Werte (hexadezimal), z. B.:
#ff0000,#808080,#ffff00
Größenangaben
Größenangaben (z. B. Schriftgrößen, Höhe und Breite von Elementen, Linienbreiten, Abstände) lassen sich in Pixeln, in absoluten Maßeinheiten oder als relative Größen bzgl. der Größe oder Schriftgröße des Elternelements angeben:
- Wert in Pixeln, z. B.:
1px,50px - Absoluter Wert in cm/mm,4 z. B.:
1cm,1000mm - Wert relativ zur Größe des Elternelements, z. B.:
50%(halb so groß wie das Elternelement) - Wert relativ zur Schriftgröße des Elternelements, z. B.:
0.5em(halb so groß wie die Schriftgröße des Elternelements) - Wert relativ zur Schriftgröße des
<html>-Elements, z. B.:2rem(doppelt so groß wie die Schriftgröße des<html>-Elements)
Wird bei einer Größenangabe ein numerischer Wert ohne Einheit verwendet, wird dieser in der Regel als Wert in Pixeln interpretiert.
Zum Gestalten von Webseiten, die am Bildschirm betrachtet werden, sollten möglichst keine absolute Maßeinheiten wie cm verwendet werden, da Bildschirmgrößen stark variieren können und unterschiedlich große Bildschirme meist nicht von der gleichen Entfernung aus betrachtet werden. Stattdessen sollten hier möglichst nur die Einheiten px oder em/rem verwendet werden, die auf der Einheit Pixel basieren.
Validierung
Für CSS-Daten gilt wie für HTML (und formale Sprachen im Allgemeinen), dass sie nur dann valide sind, wenn sie die oben beschriebenen formalen Regeln einhalten, die in den CSS-Standards des W3C genauer spezifiziert sind.5
Um CSS-Dokumente auf Fehler zu überprüfen, können CSS-Validatoren verwendet werden, die auf ähnliche Weise wie HTML-Validatoren funktionieren, indem sie das Dokument auf die Einhaltung der aktuellen CSS-Standards überprüfen.
Tool: Um zu überprüfen, ob ein CSS-Dokument valide ist, kann der Online-Validator des W3C verwendet werden: https://jigsaw.w3.org/css-validator
Weiterführende Links
- CSS-Referenz von W3Schools: https://www.w3schools.com/CSS/
- Vollständige CSS-Referenz des Mozilla Developer Network: https://developer.mozilla.org/de/docs/Web/CSS/Reference
font-variantist ein sehr umfangreiches Attribut, an dessen Oberfläche hier nur gekratzt wird. Eine vollständige Dokumentation findet sich auf den Seiten des Mozilla Developer Network: font-variant ↩︎Falls der Text wie auf dem Cover von Frank Schätzings “Der Schwarm” aussehen soll. ↩︎
Werden mehrere Schriftarten durch Komma getrennt angegeben, wird die erste Schriftart zur Darstellung gewählt, die auf dem System vorhanden ist.
Wird einer der folgenden generischen Schriftartbezeichner angegeben, wählt der Browser selbst eine geeignete vorhandene Schriftart zur Darstellung aus:sans-serif(serifenlose Schrift),serif(Serifenschrift),monospace(Festbreitenschrift),cursive(Schreibschrift). ↩︎Daneben gibt es weitere absolute Maßeinheiten, die aus dem internationalen Gebrauch (in für Inch), oder der Typographie (pc für Pica, pt für Point) bekannt sind. Das Umrechnungsverhältnis zwischen diesen Maßeinheitn ist definiert als: 1 in = 2.54 cm = 25.4 mm = 6 pc = 72 pt ↩︎
siehe offizielle Homepage des W3C zu CSS: https://www.w3.org/Style/CSS ↩︎