CSS-Tutorial: Einführung in Cascading Style Sheets
CSS dient dazu, das Aussehen und die Gestaltung von Webseiten zu definieren. Mit Cascading Style Sheets trennen Sie Design und Inhalt voneinander und sorgen so für eine klare, flexible Struktur. In diesem Tutorial erfahren Sie, wie Sie mit CSS das Layout, die Farben und die Typografie Ihrer Website gezielt steuern.
Trennung von Inhalt und Präsentation
In Kombination mit HTML dient CSS der Trennung von Inhalt und Präsentation.
Die Hypertext Markup Language (HTML) kommt zum Einsatz, um Textdokumente mit Informationen anzureichern, die einer semantischen Strukturierung der Textelemente dienen. Die Auszeichnungssprache erzeugt somit die Grundlage einer jeden Website: den HTML-Code. Dieser beschreibt, aus welchen HTML-Elementen sich ein Dokument zusammensetzt (z. B. <body>, <header>, <footer>) und wie die Informationen zu interpretieren sind (z. B. Überschrift <h1> oder Textabsatz <p>).
Ursprünglich bot auch HTML rudimentäre Gestaltungsanweisungen. Doch diese gelten mit HTML5 als überholt und sollten heute nicht mehr verwendet werden. Stattdessen bedient man sich der Stylesheet-Sprache CSS (Cascading Style Sheets), um Darstellungsvorgaben gesondert zu verwalten.
- Profi-Website in Sekunden dank KI
- Aus tausenden Vorlagen auswählen
- 30 Tage kostenlos testen
Was ist CSS?
Wie HTML wird auch CSS in Textform notiert. Dies kann direkt im HTML-Dokument erfolgen (inline für jedes Dokument oder einmalig im HTML-Kopf). In der Regel binden Webdesignerinnen und -designer jedoch separate CSS-Dokumente ein, um Webseiten zu formatieren. Das Ergebnis ist ein übersichtlicher Quellcode, bei dem redundante Gestaltungsanweisungen durch Verweise auf separate Stylesheets vermieden werden. Je weniger Wiederholungen, desto schlanker der Quellcode.
Sind Anpassungen am Design notwendig, werden diese an den zentralen CSS-Dateien vorgenommen. Es ist somit nicht nötig, jedes einzelne HTML-Dokument durchzusehen und separat anzupassen. Als Living Standard wird CSS vom World Wide Web Consortium (W3C) kontinuierlich weiterentwickelt.
Grundaufbau: Die CSS-Syntax
Die zentrale Aufgabe von CSS ist es, das Design einer Website zu definieren. Dazu werden den zugrundeliegenden HTML-Elementen mithilfe der Stylesheet-Sprache Eigenschaften (Properties) mit gewissen Werten zugeordnet. Der Grundaufbau einer Gestaltungsanweisung entspricht folgendem Schema:
Selektor { Deklaration }Beim Selektor handelt es sich um eine Repräsentation des HTML-Elements, auf das sich die Gestaltungsanweisung bezieht. Die Deklaration besteht aus einer Eigenschaft-Wert-Kombination, die nachfolgend in geschweiften Klammern notiert wird. Jede Deklaration endet mit einem Semikolon:
HTML-Elemente { Eigenschaft: Wert; }Nach diesem Schema lässt sich beispielsweise einer Überschrift eine Schriftfarbe wie Rot zuweisen:
h2 { color: red; }Webdesignerinnen und -designer haben die Möglichkeit, dem Selektor eine einzelne Eigenschaft zuzuweisen oder umfangreiche Regelsätze zu definieren, die detaillierte Gestaltungsanweisungen beinhalten. Der Übersicht halber hat sich eine Schreibweise etabliert, bei der alle Properties eines Regelsatzes untereinander notiert werden:
Selektor {
Eigenschaft1: Wert;
Eigenschaft2: Wert;
Eigenschaft3: Wert;
}In der Praxis könnte ein solches Eigenschaftsbündel folgendermaßen aussehen:
h2 {
color: #ff0000;
font-family: Helvetica, sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}Ein Regelsatz kann außerdem mehrere Selektoren spezifizieren. Im folgenden Fall werden diese durch Kommata getrennt vor der Deklaration notiert:
Selektor1, Selektor2 { Deklaration }CSS-Selektoren
CSS unterstützt diverse Selektoren, die eine benutzerdefinierte Zuweisung von Gestaltungsanweisungen ermöglichen. Für den Einstieg genügt es, sich mit Typen-, Klassen- ID- und Universalselektoren vertraut zu machen. Beachten Sie, dass CSS case-sensitive ist, sodass die Groß- und Kleinschreibung eine Rolle spielt.
| Art des Selektors | CSS-Schreibweise | Beschreibung | Spezifität |
|---|---|---|---|
| Typenselektor | HTML-Element (z. B.h2)
|
Ein Typenselektor entspricht dem Namen des Elements, auf das er sich bezieht. Formatierungen werden auf alle HTML-Elemente desselben Typs angewendet. | 1 |
| Klassenselektor | .beispiel
|
Ein Klassenselektor spricht alle Elemente einer bestimmten klasse an. Klassenselektoren werden mit einem Punkt (.) und einem beliebigen Klassennamen gebildet: .beispiel- Klassen werden an HTML-Elemente über das class-Attribut (class="beispiel") vergeben.
|
10 |
| ID | #beispiel
|
Ein ID-Selektor spricht ein einziges Element mit einer einzigartigen ID an. Die Integration in den HTML-Quellcode erfolgt mithilfe des id-Attributs (id="beispiel").
|
100 |
| Universalselektor | *
|
Der Universalselektor Asterisk (*) spricht alle HTML-Elemente eines Dokuments an.
|
0 |
Wenn mehrere Regeln auf dasselbe Element zutreffen, bestimmt die Spezifität eines Selektors, welche Regel angewendet wird. Jede Selektor-Art hat dabei einen bestimmten Wert, der zur Berechnung der Spezifität beiträgt.
Typenselektor
Verdeutlichen lässt sich der Einsatz verschiedener CSS-Selektoren an Beispielen. Folgender Code zeigt den Typenselektor h2 mit Deklaration:
h2 {
color: #305796;
font-family: Helvetica, sans-serif;
}Die Formatierung bezieht sich auf alle HTML-Elemente des Typs h2.
Klassenselektor
Alternativ kann die CSS-Formatierung anhand eines Klassenselektors erfolgen. Dies ermöglicht Designerinnen und Designern, HTML-Elemente unabhängig vom jeweiligen Typ mit denselben Gestaltungsanweisungen zu versehen.
.content {
color: #ff0000;
font-family: Helvetica, sans-serif;
}Die Formatierung bezieht sich auf alle HTML-Elemente, denen die Klasse .content zugewiesen wurde. Diese Zuweisung erfolgt im HTML-Code nach folgendem Schema:
<p class="special-text">Beispieltext</p>In HTML werden die Klassennamen ohne Punkt notiert.
ID-Selektor
Soll sich eine Gestaltungsanweisung lediglich auf ein einziges Element im HTML-Quellcode beziehen, bietet sich ein ID-Selektor an. Das folgende Beispiel zeigt die Formatierung eines Navigationsbereichs:
#navigation {
font-family: Helvetica, sans-serif;
background-color: #8ad8d4;
border: 2px solid #448278;
}Die Zuweisung der Formatierung erfolgt im HTML-Quellcode ohne Hashtag:
<div id="navigation">
<ul>
<li><a href="index.htm">Startseite</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>Der Vorteil von ID-Selektoren ist, dass auf einen Blick ersichtlich wird, bei welchen Abschnitten im Quelltext es sich um einmalige Bereiche handelt.
Universalselektor
Soll sich eine Gestaltungsanweisung auf alle Elemente eines HTML-Dokuments beziehen, kommt der Asterisk (*) zum Einsatz:
* {
font-family: Helvetica, sans-serif;
}Sämtliche Textelemente werden vom Webbrowser in der Schriftart Helvetica dargestellt.
CSS in HTML einbinden
Damit ein Browser CSS-Formatierungen berücksichtigen kann, müssen die Gestaltungsanweisungen mit dem HTML-Quellcode verknüpft werden. Anwenderinnen und Anwendern stehen dazu drei Möglichkeiten offen:
- Die direkte Integration der CSS-Deklaration in HTML-Tags
- Die CSS-Auszeichnung im HTML-Kopf
- Der Verweis auf ein separates Stylesheet
Der letztgenannte Lösungsvorschlag gilt als Königsweg: In der Praxis werden Stylesheets meist als externe Textdateien angelegt und anschließend eingebunden.
CSS-Deklaration in HTML-Tags
Soll eine CSS-Deklaration eine einzige Stelle im Quelltext formatieren, kann diese mithilfe des style-Attributs direkt im einleitenden Tag des HTML-Elements angeführt werden, auf das sich die Gestaltungsanweisung beziehen soll. Man spricht in diesem Fall von „Inline-Style“.
<h2 style="color: red;">Zwischenüberschrift</h2>Dies hat den Vorteil, dass man kein eigenes Stylesheet anlegen muss, der Selektor wegfällt und eine solche Zuweisung eine hohe Priorität (Wert 1000) hat. Spätestens wenn ein ganzer Regelsatz zum Einsatz kommt, wird diese Art der Formatierung jedoch unübersichtlich und redundant.
CSS-Auszeichnung im HTML-Kopf
Soll ein und dieselbe Gestaltungsanweisung innerhalb eines HTML-Dokuments mehrmals für das gleiche Element genutzt werden (z. B. für alle h2 der Webpage), ist die CSS-Deklaration im HTML-Tag ineffizient. Stattdessen bietet es sich an, die entsprechenden Gestaltungsangaben mithilfe des style-Elements einmalig im HTML-Kopf des Dokuments zu definieren:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
h2 {
color: #ff0000;
font-family: 'Helvetica Neue', sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h2>Zwischenüberschrift1</h2>
[…]
<h2>Zwischenüberschrift2</h2>
[…]
</body>
</html>Der Regelsatz innerhalb des style-Elements wird automatisch auf alle nachfolgenden h2-Elemente angewendet. Wenn das Element h2 auch auf anderen Webpages des gleichen Onlineprojekts mit den hier definierten Gestaltungsanweisungen zum Einsatz kommen soll, können Sie die Anweisung einfach über eine zentrale CSS-Datei definieren.
Verweis auf ein separates Stylesheet
Werden Gestaltungsanweisungen in einem separaten Stylesheet definiert, muss man dieses in das zugrundeliegende HTML-Dokument einbinden. Gelöst wird dies mit dem HTML-Element <link>:
<link rel="stylesheet" href="beispiel.css">Das link-Element enthält die obligatorischen Attribute rel und href und kann optional mit den Attributen type und media ergänzt werden.
Attribute des link-Elements |
Beschreibung |
|---|---|
rel
|
Das rel-Attribut definiert den Beziehungstyp des Elements. Der Wert stylesheet gibt an, dass ein Stylesheet eingebunden werden soll.
|
href
|
Das href-Attribut referenziert die Datei, die als Stylesheet eingebunden werden soll.
|
type
|
Das optionale Attribut type beschreibt den Medientype der einzubindenden Datei – im Fall von CSS text/css.
|
media
|
Mit dem media-Attribut haben kann man definieren, dass das referenzierte Stylesheet nur bei einem bestimmten Ausgabemedium verwendet werden soll. Dies ermöglicht es, unterschiedliche Stylesheets für verschiedene Endgeräte zur Verfügung zu stellen. Mögliche Werte sind beispielsweise screen oder print.
|
CSS-Farbangaben
Wie im einleitenden Kapitel angesprochen, lassen sich Farbzuweisungen via CSS anhand der englischen Farbwörter definieren. In der Praxis findet man solche Gestaltungsanweisungen jedoch eher selten. Häufiger kommt das RGB-Modell zum Einsatz. Dieses bietet deutlich mehr Abstufungen und erlaubt Website-Betreibenden somit, detaillierte Farbeinstellungen zu treffen. Die entsprechenden Codes lassen sich über einen Farbwähler ermitteln, den Google z. B. in Form einer Quick Answer bietet.
Farbanteile werden im RGB-Modell durch Dezimalwerte zwischen 0 und 255 definiert. Während ein Wert von 0 bedeutet, dass eine Farbe keinen Anteil an der betreffenden Grundfarbe hat, steht ein Wert von 255 für einen maximalen Anteil.
Seit CSS3 lassen sich die RGB-Werte um einen vierten Wert, den sogenannten Alpha-Kanal (a), erweitern. Dieser gibt die Deckkraft der Farbe an und wird in Werten von 0 bis 1 (z. B. 0.8) angegeben. RGB-Farben werden in CSS also folgendermaßen definiert:
rgba(Rotwert, Grünwert, Blauwert, Deckkraft)So ergeben folgende RGBA-Werte beispielsweise die Grundfarbe Blau mit einer Transparenz von 50 Prozent.
rgba(0, 0, 255, 0.5)Sie können RGB-Werte auch hexadezimal angeben. Das Grundschema eines hexadezimalen Farbcodes besteht aus einem Hashtag (#) gefolgt von sechs Hexadezimalzahlen, die in Zweierblöcken je eine Farbe des RGB-Farbraums (Rot, Grün, Blau) repräsentieren:
Die wichtigsten CSS-Properties
Mit CSS stehen Ihnen viele Properties zur Auswahl, mit denen sich Gestaltungsanweisungen für HTML-Elemente definieren lassen. Jede Property akzeptiert einen in der Spezifikation festgelegten Satz an Werten. Der Übersicht halber werden CSS-Properties in Anwendungsbereiche gegliedert. Wir konzentrieren uns auf die wichtigsten Eigenschaften.
Schriftbild
Zu den zentralen Merkmalen einer Website gehört das Schriftbild. CSS bietet Ihnen diverse Möglichkeiten, die Schriftelemente einer HTML-Seite zu formatieren.
font-family
Soll für die Textelemente einer Webseite eine bestimmte Schriftart (Font) definiert werden, kommt die CSS-Property font-family zum Einsatz. Diese erlaubt Ihnen, einen sogenannten Schriftartenstapel (Font Stack) anzulegen. Dabei handelt es sich um eine priorisierte Liste geeigneter Fonts. Schriftartenstapel sind so aufgebaut, dass zuerst die gewünschte Schriftart genannt wird und nachfolgend eine Liste passender Darstellungsalternativen:
.content {
font-family: Georgia, Garamond, serif;
}Das Beispiel zeigt eine Gestaltungsanweisung in der CSS-Datei. Als priorisierte Schriftart ist Georgia definiert, als alternative Schriftart Garamond. Ein Webbrowser wird somit angewiesen, den Textabschnitt in Garamond darzustellen, sofern die Schriftart Georgia auf dem System nicht installiert ist.
Es empfiehlt sich, als Fallback-Mechanismus eine generische Schriftfamilie zu definieren. Hierbei handelt es sich um einen allgemeinen Platzhaltername für eine Gruppe von ähnlichen Schriftarten.
font-style
Die CSS-Property font-style bezieht sich auf den Schriftstil eines Textabsatzes und bietet Ihnen die Möglichkeit, Gestaltungsanweisungen zur Neigung derart ausgezeichneter Schriftzeichen zu definieren.
| Werte für Textneigung | Beschreibung |
|---|---|
normal
|
normaler Schriftstil (Standardeinstellung) |
italic
|
kursive Schrift |
oblique
|
schräg gestellte Schrift (auch wenn Schrift keine Kursivvariante hat) |
Folgendes Beispiel zeigt eine Gestaltungsanweisung für den Schriftstil „kursiv“:
.special-content {
font-family: Arial;
font-style: italic;
}font-variant
Die CSS-Property font-variant kommt zum Einsatz, um Schriftvarianten zu definieren.
| Werte für Schriftvarianten | Beschreibung |
|---|---|
normal
|
normale Schriftvariante (Standardeinstellung) |
small-caps
|
Kapitälchen (Großbuchstabe in der Höhe der kleinen Buchstaben) für Kleinbuchstaben |
all-small-caps
|
Kapitälchen für Groß- und Kleinbuchstaben |
Folgendes Beispiel legt die Schriftvariante small-caps fest:
.content {
font-family: Arial;
font-variant: small-caps;
}font-size
Mit der CSS-Property font-size wird die Darstellungsgröße von Textelementen definiert. Dies kann in absoluten Werten oder in Relation zu umgebenden Elementen geschehen. Angegeben wird die Höhe der Schriftzeichen, der sogenannte Schriftgrad. Webdesignerinnen und Webdesignen stehen dazu diverse Schreibweisen und Maßeinheiten zur Verfügung.
Absolute Maßeinheiten
Absolute Maßeinheiten orientieren sich an physischen Längenmaßen. Auf dem Bildschirm rechnen Browser jedoch alle diese Einheiten in Pixel um und legen dabei eine Auflösung von 96 dpi zugrunde. Außer px spielen absolute Maßeinheiten im Webdesign daher kaum eine Rolle. Sinn haben sie allenfalls bei der Druckausgabe.
| Einheit | CSS-Schreibweise | Beschreibung |
|---|---|---|
| Pixel | px
|
Die Maßeinheit px entspricht der Größe eines Elements in Pixeln. Pixel werden auf Displays in Relation zur Punktdichte (z. B. dots per inch, dpi) dargestellt. Als Richtwert für die Skalierung gilt: 1 CSS-Pixel entspricht 1/96 eines Zolls. Der User kann die Zuordnung von px-Einheit zu Gerätepixel durch Zoomen im Browser verändern. |
| Zentimeter | cm
|
Größe in Zentimetern |
| Millimeter | mm
|
Größe in Millimetern |
| Zoll | in
|
Größe in Zoll (1 in = 2,54 cm) |
| Punkt | pt
|
Größe in Punkt (1 pt entspricht 1/72 eines Zolls) |
| Pica | pc
|
Größe in Pica (1 Pica entspricht 12 Punkt) |
Darüber hinaus lässt sich die Schriftgröße anhand absoluter Schlüsselwörter definieren:
| Schlüsselwort | Beschreibung | Beispiel |
|---|---|---|
xx-small
|
winzig | 9 px |
x-small
|
sehr klein | 10 px |
small
|
klein | 13 px |
medium
|
mittel (voreingestellte Schriftgröße des Browsers) | 16 px |
large
|
groß | 19 px |
x-large
|
sehr groß | 24 px |
xx-large
|
riesig | 32 px |
Relative Maßeinheiten
Bei relativen Maßeinheiten handelt es sich um Angaben der Schriftgröße, die in Abhängigkeit zu einer bereits festgelegten Größe ermittelt werden. HTML-Elemente erben ihre Schriftgröße vom jeweiligen Elternelement. Referenz für eine relative Schriftgröße kann zudem ein technischer Richtwert wie die Displaygröße eines Endgeräts oder ein Standardwert im Webbrowser sein.
| Einheit | CSS-Schreibweise | Beschreibung |
|---|---|---|
| Prozentangabe | %
|
Die Maßeinheit % gibt die Schriftgröße in prozentualer Entsprechung zur geerbten Schriftgröße an.
|
| em (Font-Höhe) | em
|
Auch die Maßeinheit em steht in Relation zum Elternelement. Dabei entspricht 1em 100 % der geerbten Schriftgröße. Wurde für das Elternelement keine Schriftgröße definiert, wird die Standard-Schriftgröße des Geräts verwendet.
|
| x-Höhe | ex
|
Referenzwert für die Maßeinheit ex ist die Höhe des Kleinbuchstabens x der gewählten Schriftart. Ist für eine Schriftart keine x-Höhe definiert, gilt 1ex = 0.5em.
|
| Root-em | rem
|
Die Maßeinheit rem bezieht sich auf das Wurzelelement eines Dokuments (z. B. das HTML-Element). 1 rem entspricht 100 % der Schriftgröße, die für das Wurzelelement festgelegt wurde.
|
| Viewport-Breite | vw
|
Die Maßeinheit vw orientiert sich an der Breite des Anzeigebereichs (Viewport) eines darstellenden Geräts. Dabei gilt: 1vw = 1 % der Viewport-Breite.
|
| Viewport-Höhe | vh
|
Die Maßeinheit vh orientiert sich an der Höhe des Anzeigebereichs eines darstellenden Geräts. Dabei gilt: 1vh = 1 % der Viewport-Höhe.
|
Die Schriftgröße lässt sich auch anhand relativer Schlüsselwörter definieren. Als Richtwert gilt hier die voreingestellte Schriftgröße des Browsers.
| Relativ | Beschreibung |
|---|---|
smaller
|
Das aktuelle Element wird kleiner dargestellt als das Elternelement. |
larger
|
Das aktuelle Element wird größer dargestellt als das Elternelement. |
Um eine optimale Darstellung der Schriftgröße auf verschiedenen Nutzergeräten sicherzustellen, empfiehlt es sich, relative Maßeinheiten wie em oder % zu nutzen.
Das Grundschema der Schriftgrößenformatierung via CSS entspricht folgendem Codebeispiel:
.content {
font-size: 19em;
}line-height
Die CSS-Property line-height wird verwendet, um die Zeilenhöhe eines Textabsatzes zu definieren. Es gelten die gleichen Maßeinheiten wie bei font-size, wobei sich Prozentangaben auf die font-size des jeweiligen Textes beziehen. Alternativ können Sie die line-height in Zahlen ohne Maßeinheit angeben. Weitere mögliche Werte sind normal (Standardeinstellung) und inherit (dem Elternelement entsprechend).
Eine line-height von 1.5 entspricht beispielsweise einer Zeilenhöhe von 150 Prozent der jeweiligen Schrifthöhe oder 1.5em.
.content {
line-height: 1.5;
}font-weight
Die CSS-Property font-weight definiert die Strichstärke eines Textelements. Designerinnen und Designer nutzen diese, um Textstellen gefettet darzustellen. Werte lassen sich absolut oder relativ zum Elternelement angeben.
| Absolute Werte für die font-weight-Property | Beschreibung |
|---|---|
| 1-1000 | numerische Werte von 1 (extradünn) bis 1000 (extrafett) |
normal
|
normale Strichstärke (entspricht dem Wert 400) |
bold
|
fett (entspricht dem Wert 700) |
Relevant sind die Zahlwerte nur bei Webfonts. In der Regel genügen daher zwei unterschiedliche Strichstärken: normal und bold.
.content {
font-weight: normal;
}
.content {
font-weight: bold;
}Relative Werte für die CSS-Property font-weight definieren die Strichstärke eines Textelements im Verhältnis zur geerbten Strichstärke des Elternelements.
| Relative Werte für die font-weight-Property | Beschreibung |
|---|---|
bolder
|
fetter als im Elternelement |
lighter
|
dünner als im Elternelement |
Textformatierung
Neben der Formatierung des Schriftbilds stehen Ihnen bei CSS diverse Properties zur Textformatierung zur Verfügung. Diese ermöglichen es, Einstellungen zur Textausrichtung sowie zum Abstand zwischen Zeichen und Wörtern vorzunehmen oder Textelemente mit Dekorationen zu versehen.
text-align
Die CSS-Property text-align dient der Ausrichtung von Text- und Inline-Elementen – also Elementen, die im Textfluss enthalten sind, z. B. Bilder oder Buttons. Übliche Werte sind:
left(linksbündig)right(rechtsbündig)center(zentriert)justify(Blocksatz)inherit(wie Elternelement).
Folgender Code bewirkt eine zentrierte Ausrichtung des Beispieltextes:
.content {
text-align: center;
}Weitere Werte für die text-align-Property definieren die Textausrichtung in Relation zur Laufrichtung eines Textes (direction).
| Werte für die relative Textausrichtung | Beschreibung |
|---|---|
start
|
Text wird zu der Seite hin ausgerichtet, an der er beginnt. Bei einer Laufrichtung von links nach rechts { direction: ltr; } entspricht der Wert dem Wert left. Bei einer Laufrichtung von rechts nach links { direction: rtl; } entspricht der Wert dem Wert right.
|
end
|
Text wird zur der Seite ausgerichtet, an der der Text endet. |
Der Wert start gilt als Standardwert.
Alle gängigen Browser stellen die letzte Zeile im Blocksatz automatisch linksbündig dar. Ist dies nicht erwünscht, kann diese mit der CSS-Property text-align-last separat formatiert werden. Die möglichen Werte entsprechen denen der *text-align-*Property.
hyphens
Darüber hinaus bietet CSS mit der Property hyphens die Möglichkeit, eine automatische Silbentrennung einzurichten. Die Stylesheet-Sprache stellt folgende Werte für die hyphens-Property zur Verfügung:
Werte für hyphens-Property |
Beschreibung |
|---|---|
manual
|
Manuelle Silbentrennung: Weiche Trennstriche werden bei der Silbentrennung berücksichtigt (Standardwert). |
none
|
Keine Silbentrennung: Weiche Trennstriche werden bei der Silbentrennung nicht berücksichtigt. Der Zeilenumbruch erfolgt ausschließlich an Leerzeichen. |
auto
|
Automatische Silbentrennung: Die Worttrennung erfolgt nach den Regeln der über das HTML-Attribut lang definierten Sprache.
|
inherit
|
Die Einstellungen entsprechen denen des Elternelements. |
word-spacing
Die CSS-Property word-spacing regelt den Wortabstand innerhalb eines Textelements. Webseitenbetreibende haben die Möglichkeit, die Abstände zwischen Wörtern durch Größenangaben zu definieren. Dazu stehen die unter font-size dargestellten Maßeinheiten zur Verfügung – mit Ausnahme der Prozentangabe. Weitere mögliche Werte für die word-spacing-Property sind normal (Standardeinstellung) und inherit (dem Elternelement entsprechend).
Das nachfolgende Codebeispiel definiert einen Wortabstand von 2em. Dieser kommt zum Default-Wortabstand hinzu.
.content {
word-spacing: 2em;
}letter-spacing
Soll nicht der Abstand der Worte zueinander, sondern der Buchstabenabstand definiert werden, kommt die CSS-Property letter-spacing zum Einsatz. Auch hier stehen Größenangaben mit Ausnahme der Prozentangabe sowie die Werte normal und inherit zur Auswahl.
Folgendes Codebeispiel zeigt einen Textabschnitt, in dem ein Wort durch einen zusätzlichen Buchstabenabstand von 1em hervorgehoben wird.
.special-content {
letter-spacing: 1em;
}text-indent
Mit der CSS-Property text-indent haben Sie die Möglichkeit, Einrückungen zu definieren, die sich lediglich auf die erste Zeile eines Absatzes beziehen. Mögliche Werte sind positive und negative sowie prozentuale Angaben in Relation zur Breite des jeweiligen Textblocks.
Folgendes Codebeispiel definiert eine Einrückung der ersten Zeile um 5 Prozent. Die Klasse wird im HTML-Quelltext durch span-Elemente vergeben:
.content {
text-indent: 5%;
}Um hängende Absätze zu definieren, wird die Property text-indent mit einem negativen Wert versehen.
text-decoration
Die CSS-Property text-decoration bietet Ihnen die Möglichkeit, Textelemente mit Dekorationen wie Unterstreichungen zu versehen. Mögliche Werte sind:
Werte für text-decoration-Property |
Beschreibung |
|---|---|
none
|
Keine Textdekoration |
underline
|
Jede Zeile des ausgezeichneten Textabschnitts wird unterstrichen. |
overline
|
Über jeder Zeile des ausgezeichneten Textabschnitts wird eine Linie dargestellt. |
line-through
|
Jede Zeile des ausgezeichneten Textabschnitts wird durchgestrichen. |
inherit
|
Die Textdekoration entspricht dem Elternelement. |
Folgendes Codebeispiel definiert Unterstreichungen für ausgewählte Wortgruppen innerhalb des Textabschnitts:
.content-underline {
text-decoration: underline;
}text-transform
Die Property text-transform ermöglicht es, Texttransformationen via CSS vorzunehmen. So lassen sich Textbereiche in Majuskeln (Großbuchstaben) oder Minuskeln (Kleinbuchstaben) darstellen, ohne dass die Textgrundlage angepasst werden muss. Die Property erlaubt folgende Transformationen:
| Werte für text-transform-Property | Beschreibung |
|---|---|
capitalize
|
Der erste Buchstabe eines jeden Wortes wird als Großbuchstabe dargestellt. |
uppercase
|
Der gesamte Textabschnitt wird in Großbuchstaben dargestellt. |
lowercase
|
Der gesamte Textabschnitt wird in Kleinbuchstaben dargestellt. |
none
|
Es findet keine Transformation statt. |
inherit
|
Die Transformation entspricht der des Elternelements. |
Sollen die Anfangsbuchstaben eines Abschnitts unabhängig vom Ursprungstext als Großbuchstaben dargestellt werden, bietet sich folgende Formatierung an:
.content {
text-transform: capitalize;
}Schrift- und Hintergrundfarben
Bei der Wahl von Schrift- und Hintergrundfarben greifen Webdesignerinnen und -designer in der Regel auf die bereits erläuterten Farbcodes in dezimaler oder hexadezimaler Schreibweise zurück. Eine Reihe von Properties nutzen diese Farbcodes.
color
Die CSS-Property color dient der Formatierung der Schriftfarbe. Gängige Werte sind Farbangaben in Form von RGB-Werten, Hexadezimalcodes oder HSL-Angaben. Darüber hinaus ermöglicht es die Werte transparent und opacity, Elemente unsichtbar darzustellen. Folgendes Codebeispiel zeigt die Farbformatierung anhand eines hexadezimalen Farbcodes:
.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
}background-color
Die CSS-Property background-color kommt zum Einsatz, wenn einem Element eine Hintergrundfarbe zugewiesen werden soll. Die möglichen Werte entsprechen denen der color-Property.
Folgendes Codebeispiel zeigt eine Formatierung von Schrift- und Hintergrundfarbe:
.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
}Die Formatierung weist den Webbrowser an, alle Textelemente der Klasse content bordeauxrot (#d82451) darzustellen und türkisgrün (#24d8ab) zu hinterlegen.
background-image
Alternativ zu einer Hintergrundfarbe kann eine Grafik als Hintergrund für ein Element geladen werden. Designerinnen und Designer nutzen dazu die Property background-image, die als Wert den Pfad zur Grafik gemäß folgender Schreibweise enthält:
.content {
background-image:
url (Pfad zur Bilddatei);
}Statt background-image oder background-color können Sie auch die Kurzschreibweise background verwenden.
Zudem bietet CSS die Möglichkeit, Farbverläufe als Hintergründe zu definieren:
| CSS-Farbverläufe | Beschreibung |
|---|---|
linear-gradient()
|
Die Funktion erzeugt einen linearen Farbverlauf. |
radial-gradient()
|
Die Funktion erzeugt einen radialen Farbverlauf. |
repeating-linear-gradient()
|
Die Funktion erzeugt einen sich wiederholenden linearen Farbverlauf. |
repeating-radial-gradient()
|
Die Funktion erzeugt einen sich wiederholenden radialen Farbverlauf. |
In unserer CSS-Einführung beschränken wir uns beispielhaft auf die Funktion linear-gradient(). Soll ein Element mit einem linearen Farbverlauf hinterlegt werden, nutzt man die Funktion linear-gradient() als Wert für die background-Property. Diese erwartet mindestens zwei Farbangaben als Argumente. In welcher Schreibweise die Farben definiert werden, ist nicht relevant.
.content {
width: 400px;
height: 400px;
background: linear-gradient( green, yellow );
}Rahmen
CSS ermöglicht es Ihnen auch, HTML-Elemente mit einem Rahmen zu versehen. Dies empfiehlt sich vor allem für sogenannte Block-Level-Elemente wie Überschriften, Absätze, div-Elemente oder HTML-Tabellen, die innerhalb des body-Elements auftreten. Ohne weitere Formatierung erstrecken sich solche Inhaltsblöcke über die gesamte verfügbare Breite und ordnen sich untereinander an.
Zu unterscheiden sind Block-Level-Elemente von sogenannten Inline-Elementen wie <b>, <i>, <a> oder <span>. Inline-Elemente treten ausschließlich innerhalb von Block-Level-Elementen auf. Die Breite eines Inline-Elements wird ausschließlich durch dessen eigenen Inhalt bestimmt.
Soll ein Rahmen ein ganzes Block-Level- oder Inline-Element umschließen, verwendet man die Property borders. Alternativ können Sie die Rahmengestaltung für jede Seite eines Elements auch einzeln definieren.
| Properties für Rahmen | Beschreibung |
|---|---|
border
|
Definiert die Rahmeneigenschaften für alle Seiten des Elements. |
border-top
|
Definiert die Eigenschaften der oberen Rahmenkante |
border-right
|
Definiert die Eigenschaften der rechten Rahmenkante. |
border-bottom
|
Definiert die Eigenschaften der unteren Rahmenkante. |
border-left
|
Definiert die Eigenschaften der linken Rahmenkante. |
Sowohl die border-Property als auch die Properties für einzelne Rahmenkanten lassen sich weiter spezifizieren. Entsprechende Werte werden mit Leerzeichen getrennt nach folgendem Schema hinter der Property notiert:
.content {
border: style width color;
}
.content {
border: solid 4px #ff0000;
}Zudem bietet die Property border-radius die Möglichkeit, die Rahmenkanten abzurunden.
Rahmentyp
Mit der Wahl eines Rahmentyps definieren Sie einen Schmuckrahmen für das betreffende Block-Level- oder Inline-Element. Manche Rahmentypen kommen erst zur Geltungen, wenn eine angemessene Rahmenbreite gewählt wurde.
| Mögliche Werte für den Rahmentyp | Beschreibung |
|---|---|
none
|
kein Rahmen |
hidden
|
Zeigt keinen Rahmen an und unterdrückt diesen auch bei benachbarten Tabellenzellen. |
dotted
|
Definiert einen gepunkteten Rahmen. |
dashed
|
Definiert einen gestrichelten Rahmen. |
solid
|
Definiert einen durchgezogenen Rahmen. |
double
|
Definiert einen doppelten Rahmen. |
groove, ridge, inset, outset
|
Mit diesen Werten lassen sich unterschiedliche 3D-Effekte realisieren. |
Folgende Grafik stellt die CSS-Rahmentypen gegenüber:
Die Angabe des Rahmentyps ist obligatorisch. Ist kein Rahmentyp angegeben, wird der Rahmen vom Webbrowser selbst dann nicht dargestellt, wenn Werte für die Rahmenbreite oder die Rahmenfarbe vorliegen.
Rahmenbreite
Die Rahmenbreite definiert die Linienstärke des Rahmens.
| Mögliche Werte für die Rahmenbreite | Beschreibung |
|---|---|
| Längenangabe | Die Größenangabe der Rahmenbreite erfolgt mithilfe der unter font-size beschriebenen Maßeinheiten. Die Rahmenbreite kann nicht in Prozentwerten angegeben werden.
|
thin
|
dünn |
medium
|
mittelstark |
thick
|
dick |
Rahmenfarbe
Die Farbeinstellungen für die Property border-color entsprechen denen der Properties color und background-color.
| Mögliche Werte für die Rahmenfarbe | Beschreibung |
|---|---|
| Farbangaben | Farbangaben für Rahmen können in Schlüsselwörtern, als HEX-Wert sowie als RGB- oder HSL-Angabe erfolgen. |
transparent
|
Definiert den Rahmen als unsichtbar. |
Folgendes Codebeispiel kombiniert die Property border mit Formatierungen der Schrift- und Hintergrundfarbe. Der Regelsatz wird im CSS-Dokument für die Klasse rahmen definiert:
.rahmen {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
border: 10px ridge #d82451;
}border-radius
Die Property border-radius ermöglicht es, die Ecken eines Rahmens kreisförmig oder elliptisch abzurunden. Ein etwaiger Hintergrund wird dabei entlang der definierten Kurve abgeschnitten – das funktioniert auch, wenn das Element keinen Rahmen hat. Geschickt eingesetzt lassen sich mit border-radius auch einfache geometrische Formen zeichnen.
Mögliche Werte für die border-Property sind bis zu vier Größenangaben, die jeweils für eine Ecke des Rahmens stehen. Die Zuweisung kann wahlweise durch einen, zwei, drei oder vier Werte erfolgen.
| Werte für die border-radius-Property | Beschreibung |
|---|---|
| Ein Wert | Der Wert gilt für alle vier Ecken. |
| Zwei Werte | Der erste Wert definiert die Ecken oben links und unten rechts. Der zweite Wert definiert die Ecken oben rechts und unten links. |
| Drei Werte | Der erste Wert definiert die Ecke oben links. Der zweite Wert definiert die Ecken oben rechts und unten links. Der dritte Wert definiert die Ecke unten rechts. |
| Vier Werte | Jede Ecke wird durch einen eigenen Wert definiert. Es gilt die Reihenfolge des Uhrzeigersinns: oben links, oben rechts, unten rechts, unten links. |
Die einzelnen Werte für den Rahmenradius werden durch Leerzeichen getrennt hinter der border-radius-Property notiert. Somit ergibt sich für die Deklaration folgendes Schema (die Zahlwerte sind Beispiele):
border-radius: 4em 2em 3em 1em;Die Property border-radius kann im selben Regelsatz wie der border-Property oder in separaten Klassen definiert werden.
Folgender Regelsatz definiert einen Rahmen mit einem border-radius von 2 em:
.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
}
Alternativ lassen sich unterschiedliche Werte für jede der vier Ecken definieren:
.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em 1em 3em 4em;
}
In beiden Fällen werden die Ecken des Rahmens kreisförmig abgerundet. Soll die Abrundung elliptisch erfolgen, werden für jede Ecke zwei Werte benötig. Die Deklaration eines elliptisch abgerundeten Rahmens kann somit bis zu acht Werte umfassen:
border-radius: 1em 4em 1em 4em / 4em 1em 4em 1em;Die Werte vor dem Slash (/) definieren den Radius auf der horizontalen Halbachse der Ellipse, die Werte nach dem Slash den Radius auf der vertikalen Halbachse.
.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 1em 4em / 4em 1em;
}
Ein etwaiger Hintergrund wird automatisch entlang der Kurve zugeschnitten.
.rahmen {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
background-color: #24d8ab;
}
Dies gilt sowohl für Hintergrundfarben als auch für Hintergrundbilder, nicht jedoch für Textelemente.
Positionierung
Die CSS-Property position dient dazu, eine Box aus dem Elementfluss zu entfernen und an einer beliebigen Stelle der Website zu platzieren. Andere Boxen – egal ob im Elementfluss eingebunden oder ebenfalls positioniert – haben keinen Einfluss auf die Position einer derart formatierten Box.
Die position-Property hat die verschiedene Werte, die sich durch die Properties left, right, top und bottom sowie deren Werte als Maßangaben näher spezifizieren:
| Werte der position-Property | Beschreibung |
|---|---|
absolute
|
Positioniert die Box relativ zum nächsten Element mit einer position.
|
relative
|
Positioniert die Box relativ zu ihrer normalen Position. |
fixed
|
Positioniert die Box relativ zum Browserfenster und bleibt beim Scrollen fixiert. |
static
|
Natürliche Position der Box im Textfluss. Wurde die position: static gewählt, sind die Positionsangaben unwirksam. Der Wert static ist der Standardwert von position.
|
sticky
|
Positioniert die Box wie ein Element mit position: relative, solange es sich innerhalb des Viewports befindet. Droht es jedoch, aus dem Anzeigebereich zu verschwinden, löst es sich aus dem Elementfluss und bleibt beim Scrollen „kleben“. Der Wert sticky kann als eine Kombination aus relative und fixed betrachtet werden.
|
Absolute Positionierung
Mit position: absolute wird die Box vom Elementfluss losgelöst und an der Stelle positioniert, die durch die nachfolgenden Properties definiert wird. Die Angaben stehen dabei in Relation zum nächsthöheren Vorfahrenelement, das ebenfalls durch die position-Property spezifiziert wurde. Existiert ein solches Element nicht, wird das Wurzelelement <html> als Bezugspunkt genommen. Boxen mit der Deklaration position: absolute haben keinen Einfluss auf die Position anderer Elemente und überlagern diese bzw. werden von diesen überlagert.
Folgende Regelsätze enthalten absolute Positionierungsangaben der CSS-Boxen .rot, .blau und .grün innerhalb des Elternelements .background.
.background {
height: 500px;
width: 500px;
border: solid grey
}
.rot {
height: 150px;
width: 150px;
background-color: rgba(255,0,0,0.5);
position: absolute;
top: 100px;
left: 100px;
}
.blau {
height: 150px;
width: 150px;
background-color: rgba(0,0,255,0.5);
position: absolute;
top: 150px;
left: 150px;
}
.grün {
height: 150px;
width: 150px;
background-color: rgba(0,255,0,0.5);
position: absolute;
top: 200px;
left: 200px;
}Die Content-Boxen .rot, .blau und .grün wurden als halbtransparente Flächen mit den Maßen 150 px x 150 px formatiert. Die Content-Box .background mit den Maßen 500 px x 500 px ist von einem grauen Rahmen umgeben.
Die Gestaltungsanweisungen werden über Klassen in den HTML-Code eingebunden.
<div class="background">
<p class="rot"> </p>
<p class="blau"> </p>
<p class="grün"> </p>
</div>Die Browseransicht zeigt die unterschiedliche Positionierung der Boxen innerhalb des <div>-Elements. Die Elemente sind jeweils um 50 px nach rechts unten versetzt. Die transparente Farbgebung verdeutlicht die Möglichkeit einer Überlappung bei der absoluten Positionierung.
Relative Positionierung
Bei der relativen Positionierung bliebt die Box im natürlichen Elementfluss eingebunden, kann jedoch durch Positionierungsangaben relativ zu diesem verschoben werden. Die jeweilige Box wird somit an sich selbst ausgerichtet. Vorhergehende und nachfolgende Elemente im Fluss verhalten sich so, als wäre die Box nicht verschoben worden.
Um eine Box ausgehend von ihrer Position in Elementfluss auszurichten, wird der einsprechende Regelsatz um die Deklaration position: relative sowie um gewünschte Positionsangaben erweitert.
Folgender Codeblock demonstriert dies am Beispiel der blauen Box:
.blau {
height: 150px;
width: 150px;
background-color: rgba(0,0,255,0.5);
position: relative;
left: 50px;
}Die Gestaltungsanweisung position: relative mit der Positionsangabe left: 50px führt in der Browseransicht zu einer Verrückung der blauen Box um 50 px nach links.
Die relative Positionierung lässt sich ebenso auf gefloatete Elemente anwenden.
Fixierte CSS-Boxen
Die Ausrichtung fixierter Boxen erfolgt wie bei der absoluten Positionierung abstrahiert vom Elementfluss. Alle Positionierungsangaben werden in Relation zum Viewport definiert. Eine auf diese Weise fixierte Box erscheint immer an derselben Stelle auf dem Bildschirm – auch wenn ein User durch die Webseite scrollt. So lassen sich Navigationselemente wie Menüs oder Stopper-Buttons (z. B. „Zurück zum Seitenanfang“) im Sichtbereich anheften.
Das CSS-Box-Modell
Das CSS-Box-Modell beschreibt, wie Browser HTML-Elemente als rechteckige Flächen („Boxen“) darstellen und positionieren. Jede Website besteht im Kern aus einem Zusammenspiel solcher Boxen, deren Anordnung durch den sogenannten Elementfluss bestimmt wird: Standardmäßig werden Elemente von links nach rechts und von oben nach unten platziert.
CSS unterschiedet dabei zwischen zwei Arten von Boxen:
- Block-Boxen (
div,p) nehmen standardmäßig die gesamte Breite ihres Elternelements ein und beginnen stets in einer neuen Zeile. - Inline-Boxen (
span,b,i) werden im Textfluss dargestellt und passen sich dem Inhalt an.
Verdeutlichen lässt sich der Elementfluss von Block- und Inline-Boxen an den folgenden Grafiken:
Block-Boxen strukturieren das Layout, während Inline-Boxen für Text- und Inline-Elemente zuständig sind. Leere Container wie <div> dienen oft nur der Gruppierung und Formatierung per CSS.
| Ebenen des Box-Modells | Beschreibung |
|---|---|
| Inhaltsbereich (Content-Box) | Fläche, deren Ausdehnung durch den Textumfang oder die Maße einer Grafik bestimmt wird. Bei Block-Level-Elementen lassen sich Höhe und Breite durch die Properties height und width definieren. Bei Inline-Elemente steht diese Art der Formatierung nicht zur Verfügung.
|
| Innenabstand (Padding-Box) | Die Padding-Box (engl. padding = „Polsterung“) definiert den Abstand zwischen Content-Box und Border-Box. |
| Rahmen (Border-Box) | Die Border-Box definiert den Rahmen. |
| Außenabstand (Margin-Box) | Die Margin-Box definiert den Abstand zwischen dem aktuellen Element und seinem Elternelement oder benachbarten Elementen. Die margin-Property darf auch negative Werte aufweisen.
|
Sollen alle vier Kanten einer Box zugleich formatiert werden, kommen die Properties padding, border und margin zum Einsatz:
| Innenabstand | Rahmen | Außenabstand | |
|---|---|---|---|
| oben | padding-top
|
border-top
|
margin-top
|
| unten | padding-bottom
|
border-bottom
|
margin-bottom
|
| links | padding-left
|
border-left
|
margin-left
|
| rechts | padding-right
|
border-right
|
margin-right
|
Mögliche Werte für die aufgeführten Properties sind Größenangaben sowie inherit (dem Elternelement entsprechend). Außenabstände lassen sich zudem durch den Wert auto definieren.
Folgende Grafik zeigt den schematischen Aufbau einer CSS-Box:
Das CSS-Box-Modell im Einsatz
Verdeutlichen lässt sich das CSS-Box-Modell, indem man einer Content-Box die einzelnen Ebenen Schritt für Schritt hinzufügt. Ausgangspunkt ist ein kurzer Textabschnitt, der in diesem Beispiel durch den Klassenselektor formatiert werden soll:
<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>Folgender Regelsatz gibt für die Content-Box die Maße 150 px x 150 px vor. Weitere Formatierungen definieren schwarze Schrift auf grauem Hintergrund. Zudem soll der Text im Blocksatz ausgerichtet werden:
.content {
height: 150px;
width: 150px;
color: #000000;
text-align: justify;
background-color: #808080;
}Angewendet auf den Textabschnitt führen diese Gestaltungsanweisungen zu folgender Darstellung im Webbrowser:
Der Textabschnitt erscheint gemäß dem Elementfluss in der oberen linken Ecke seines Elternelements. Der Text und die Hintergrundfarbe beginnen ohne Abstand an der linken Seite des Browserfensters und füllen die gesamte zur Verfügung stehende Fläche aus. Der Hintergrund schließt direkt mit dem Textkörper ab.
Ein solches Design sieht unschön aus und erschwert das Lesen. Die Property padding ermöglicht es Webdesignerinnen und -designern daher, einen Innenabstand zu definieren, um Textelemente von umliegenden Gestaltungselementen abzusetzen.
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
}Zum Regelsatz hinzugefügt bewirkt die Deklaration padding: 10px; folgende Veränderung in der Frontend-Ansicht:
Der Webbrowser fügt an allen vier Seiten der Content-Box einen Innenabstand von 10 px hinzu. Als weiteres Designelement bietet sich ein Rahmen an.
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
}Im Beispiel-Code wird die border-Property genutzt, um dem Element einen bordeauxroten, durchgehenden Rahmen hinzuzufügen.
Ein Rahmen wird somit durch den Padding-Wert vom Inhalt abgesetzt.
Gemäß dem natürlichen Elementfluss fügt sich die auf diese Weise formatierte Box ohne Abstand an die linke obere Ecke des Elternelements an. Die Property margin ermöglicht es, das Design einer Webseite durch einen Außenabstand aufzulockern. Dazu wird die entsprechende Deklaration einfach zum bestehenden Regelsatz hinzugefügt:
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
margin: 40px;
}Im Webbrowser wird ein solcher Außenabstand von 40 px folgendermaßen umgesetzt:
Alternativ zur Maßangabe kann die margin-Property mit dem Wert auto versehen werden. In diesem Fall richtet sich die Box automatisch horizontal zentriert innerhalb des Elternelements aus. In vertikaler Richtung wirkt sich auto nicht aus.
Der Platzbedarf einer CSS-Box lässt sich ermitteln, indem die Werte aller relevanten Bestandteile einer Box addiert werden.
Box-Formatierung mit float
Handelt es sich bei der zu formatierenden Box um eine Block-Box, rücken nachfolgende Boxen gemäß des Elementflusses automatisch in die nächste Zeile.
Der automatische Zeilenumbruch nach einer Block-Box ist in der Praxis nicht immer erwünscht und kann mithilfe der Property float unterbunden werden. Diese löst Block-Boxen aus dem normalen Elementfluss heraus und setzt sie an eine gewünschte Stelle.
Werte für die float-Property |
Beschreibung |
|---|---|
none
|
Es findet keine Verschiebung des Elements statt. Der Wert float: none; ist der Standardwert einer CSS-Box.
|
left
|
Die Block-Box wird an die linke Innenkante des Elternelements verschoben. |
right
|
Die Block-Box wird an die rechte Innenkante des Elternelements verschoben |
inherit
|
Der float-Wert entspricht dem des Elternelements. |
Eine Box mit float-Formatierung wird Float genannt.
Treffen mehrere Floats aufeinander, werden diese in der Reihenfolge, in der sie im HTML-Quellcode stehen, von links nach rechts (float: left) bzw. von rechts nach links (float: right) angeordnet.
Folgendes Codebeispiel zeigt einen Regelsatz inklusive float-Property:
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 20px;
border: 5px solid #d82451;
margin: 40px;
float: left;
}Wird dieser auf zwei HTML-Elemente angewendet, werden sie aus dem Elementfluss herausgehoben und linksbündig aneinandergereiht:
<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>
<p class="content">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
Der große Zwischenraum ergibt sich dadurch, dass der Außenabstand beider Boxen addiert wird. Ohne Float würden die Außenabstände angrenzender Elemente zusammenfallen.
Responsives Webdesign mit CSS
Um responsives Webdesign mit CSS zu gestalten, bietet die Stylesheet-Sprache zwei moderne Layout-Techniken: Flexbox und Grid. Beide Systeme passen Inhalte dynamisch an unterschiedliche Bildschirmgrößen an. In Kombination mit CSS Media Queries lassen sich Layouts zusätzlich gezielt an verschiedene Geräte und Bildschirmbreiten anpassen.
Flexbox
Mit CSS Flexbox (Flexible Box Layout) lassen sich eindimensionale Layouts besonders einfach gestalten. Dabei richtet Flexbox Inhalte entweder horizontal oder vertikal aus und ist somit ideal für Navigationen, Galerien oder modulare Inhaltsbereiche geeignet.
Ein sogenannter Flex-Container wird durch die Property display: flex; definiert. Alle direkten Kindelemente werden automatisch zu Flex-Items, deren Positionierung, Reihenfolge und Größe sich flexibel steuern lässt.
| Property | Beschreibung |
|---|---|
flex-direction
|
Bestimmt die Hauptrichtung der Flex-Items. Der Wert row wird für horizontale, der Wert column für vertikale Auserichtung genutzt.row-reverse und column-reverse richten jeweils von rechts nach links aus.
|
justify-content
|
Richtet die Flex-Items entlang der Hauptachse aus. Mit flex-start erfolgt die Ausrichtung am Anfang, mit flex-end am Ende der Achse und mit center zentriert. Mit space-between, space-around und space-evenly wird der Abstand der Elemente angegeben (gleichmäßig ohne Abstand am Rand, gleicher Abstand um alle Elemente, gleichmäßiger zwischen allen Items)
|
align-items
|
Richtet die Flex-Items entlang der Querachse aus, die Werte flex-start,flex-end und center funktionieren wie bei flex-direction. Zusätzlich kann mit baseline eine Ausrichtung an der Basislinie und mit stretch eine containerfüllende Ausrichtung erreicht werden.
|
flex-wrap
|
Legt fest, ob die Flex-Items in eine neue Zeile umbrechen dürfen. Mit nowrap (Standard) bleiben alle Elemente in einer Zeile. Mit wrap und wrap-reverse finden Zeilenumbrüche (ggf. In umgekehrter Richtung) statt.
|
gap
|
Bestimmt den Abstand zwischen den Flex-Items. |
Ein einfaches Beispiel zeigt die horizontale Anordnung von Elementen mit gleichmäßigem Abstand:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;Die Regeln werden auf folgendes HTML angewendet:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>Darüber hinaus lässt sich auch das Verhalten einzelner Flex-Items individuell steuern. Mit der Property flex können Sie etwa festlegen, wie stark sich ein Element im Verhältnis zu anderen vergrößern oder verkleinern darf. Dabei steht der Wert 2 für eine Verdopplung:
.item1 {flex: 2; }Grid-Layout
Mit einem CSS Grid können Webseiteninhalte in einem zweidimensionalen Raster angeordnet werden. Das Grid-System ermöglicht eine präzise Steuerung von Zeilen und Spalten, wodurch komplexe Layouts einfach und flexibel umgesetzt werden können. Um ein Grid zu erstellen, weist man einem Elternelement die Property display: grid; zu. Alle direkten Kindelemente dieses Containers werden automatisch zu Grid-Items. Anschließend lässt sich das Raster mit einer Vielzahl an Properties anpassen.
| Property | Beschreibung |
|---|---|
grid-template-columns
|
Definiert die Spaltenstruktur des Grids. Die wichtigste Einheit ist fr; sie gibt an, wie viele Anteile des verfügbaren Platzes genutzt werden. Mit auto erfolgt die Einteilung automatisch.
|
grid-template-rows
|
Definiert die Zeilenstruktur des Grids. Die Werte für grid-template-rows sind dieselben wie für grid-template-columns.
|
gap
|
Bestimmt den Abstand zwischen den Grid-Items |
justify-items
|
Legt die horizontale Ausrichtung der Grid-Items fest. . start sorgt für eine Ausrichtung links, end für eine Ausrichtung rechts und center für eine zentrierte Ausrichtung. Der Standardwert stretch füllt die Zelle aus.
|
align-items
|
Legt die vertikale Ausrichtung der Grid-Items fest. Die Ausrichtung erfolgt mit denselben Werten wie justify-items.
|
Ein Beispiel zeigt den Aufbau eines Grids mit drei gleich breiten Spalten und zwei Zeilen mithilfe von einheitlichen fr-Werten:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
}Jedes Grid-Item kann außerdem gezielt positioniert werden, um sich beispielsweise über mehrere Spalten oder Zeilen zu erstrecken. Dafür stehen die Properties grid-column und grid-row zur Verfügung. Hierzu werden die Start- (inklusiv) und die Endzeile (exklusiv) getrennt von einem Slash (/) angegeben. In folgendem beispiel erstreckt sich das Element über zwei Spalten und eine Zeile.
.item1 {
grid-column: 1 / 3;
grid-row: 1;
}Media Queries
Media Queries ermöglichen es, CSS-Regeln abhängig von Geräteeigenschaften anzuwenden. So kann das Layout auf Smartphones, Tablets und Desktop-Bildschirmen unterschiedlich aussehen, ohne mehrere HTML-Dateien zu benötigen. Mit einer Media Query lassen sich gezielt Styles aktivieren oder überschreiben, sobald bestimmte Bedingungen erfüllt sind. Die häufigste Anwendung ist die Anpassung an verschiedene Viewport-Breiten, für die folgende Werte benötigt werden:
| Property/Syntax | Beschreibung |
|---|---|
@media
|
Leitet eine Media Query ein. |
screen, print, all
|
Bestimmt, für welche Medienart die Regeln gelten. |
min-width
|
Aktiviert CSS-Regeln ab einer bestimmten Mindestbreite. |
max-width
|
Aktiviert CSS-Regeln bis zu einer bestimmten Maximalbreite. |
Ein Beispiel zeigt, wie eine Media Query genutzt werden kann, das Layout unterhalb einer bestimmten Breite zu verändern:
/ *Standard-Layout für größere Bildschirme* /
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/ *Anpassung für kleinere Bildschirme* /
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}Mehrere Bedingungen lassen sich auch kombinieren, beispielsweise, um Layouts nur auf Tablets im Hochformat zu verändern:
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
body {
font-size: 1.1em;
}
}CSS-Variablen
CSS-Variablen (auch Custom Properties genannt) ermöglichen es, Werte zentral zu speichern und mehrfach im Stylesheet zu verwenden. So lassen sich Farben, Abstände oder Schriftgrößen an einer Stelle ändern, ohne das gesamte CSS anpassen zu müssen. Das macht den Code übersichtlicher, wartungsfreundlicher und konsistenter.
CSS-Variablen werden mit einem doppelten Bindestrich (--) definiert und mit der Funktion var() aufgerufen.
| Syntax | Beschreibung |
|---|---|
--variablenname
|
Definiert eine eigene Variable. |
var(--variablenname)
|
Ruft den Wert einer definierten Variable auf. |
:root
|
Der globale Gültigkeitsbereich (entspricht dem obersten HTML-Element). |
Ein Beispiel zeigt, wie Variablen definiert und genutzt werden:
:root {
--main-color: #ff4081;
--text-color: #333;
--padding: 10px;
}
button {
background-color: var(--main-color);
color: var(--text-color);
padding: var(--padding);
}Hier werden die Variablen --main-color, --text-color und --padding im :root definiert, also global für die ganze Seite. Der Button nutzt diese Variablen mit var(), sodass Hintergrundfarbe, Textfarbe und Abstand automatisch von den Werten der Variablen übernommen werden.
- Für statische Websites und Single-Page-Applikationen
- Einfaches Staging mit Vorschau-URL
- Automatische Framework-Erkennung