Beispiele häufiger Eigenschaften

CSS hält unzählige Eigenschaften zur Gestaltung von HTML bereit. Hier sollen nun u.a. einige häufig verwendete Beispiele im Bereich der Schriftdarstellung und Größenangaben vorgestellt werden.

Anders als bei Attributen von HTML-Elementen werden die Werte von CSS-Eigenschaften in Deklarationen ohne Anführungszeichen angegeben.

Schriften

Es gibt zahlreiche Möglichkeiten, mit CSS Einfluss auf die Darstellung von Text im Browser zu nehmen. Hier sind ein paar häufig vorkommende Beispiele:

color

Mit color wird die Schriftfarbe bestimmt. Es gibt vordefinierte Farbwerte wie red, blue, usw., welche direkt verwendet werden können:

color: red;

Alternativ können beliebige Farben mit RGB-Werten (Red Green Blue) oder hexadezimalen Farbcodes angegeben werden, z.B. ergeben folgende Deklarationen den gleichen Wert wie color: red

color: #ff0000; /* hexadezimaler Wert für red */

color: rgb(255, 0, 0); /* RGB-Wert für red */

font-...

Außerdem kann die Schrift auf vielfältige Weise mit Eigenschaften der Form font-... beeinflusst werden. Davon werden wir hier nur ein paar beispielhaft betrachten. Es kann u.a. die Schriftart, die Größe der Schrift, der Schriftstil und die sogenannte Strichstärke bestimmt werden:

font-family: sans-serif; /* serifenlose („glatte“) Schrift */
font-size: 2em; /* Schriftgröße */
font-style: italic; /* Schrägschrift */
font-weight: bold; /* Fettdruck */

Eine Besonderheit bei der Eigenschaft für die Schriftgröße (font-size) ist die Verwendung der Einheit em. Diese Größeneinheit ist relativ und bezieht sich auf die Größe des Fonts im Elternelement. Mit font-size: 2em wird also erreicht, dass die Schrift doppelt so groß ist wie die des Texts im umgebenden Element.

Zum Beispiel beim Mozilla Developer Network (MDN) (opens in a new tab) finden sich ausführliche Beschreibungen zur Verwendung dieser Eigenschaften und umfangreiche Auflistungen weiterer Möglichkeiten zur Gestaltung der Schrift.

width und height

Die Breite und Höhe von HTML-Elementen kann mit width (Breite) und height (Höhe) bestimmt werden. Dies ist einerseits mit absoluten Werten möglich:

width: 100px;
height: 50px;

und andererseits können relative Größenangaben in Prozent angegeben werden:

width: 20%;
height: 15%;

Die relativen Prozentangaben beziehen sich auf die Größe des Elternelements.

background-color

Mit background-color kann die Hintergrundfarbe eines HTML-Elements festgelegt werden. Bei den zulässigen Werten gilt das gleiche wie bei color — zur Beachtung: color wirkt sich nur auf die Schriftfarbe aus.