# 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](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-lernen-das-grosse-einsteiger-tutorial/) dient [CSS](https://www.ionos.at/digitalguide/websites/webdesign/was-ist-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](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-element/) sich ein Dokument zusammensetzt (z. B. ``, `

`, `

`) und wie die Informationen zu interpretieren sind (z. B. Überschrift `

"Übersicht aller CSS-Selektoren auf der Website des W3C"), 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

Hinweis 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: ```css 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. ```css .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: ```html
Beispieltext
``` Hinweis 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: ```css #navigation { font-family: Helvetica, sans-serif; background-color: #8ad8d4; border: 2px solid #448278; } ``` Die Zuweisung der Formatierung erfolgt im HTML-Quellcode ohne Hashtag: ```html

Startseite

Impressum

``` 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: ```css { 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“. ```html

Zwischenüberschrift

``` 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](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-style/) einmalig im HTML-Kopf des Dokuments zu definieren: ```html

Zwischenüberschrift1

[…]

Zwischenüberschrift2

[…] ``` 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 ``: ```html ``` 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](https://www.ionos.at/digitalguide/websites/webdesign/rgb-farben/) 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. [![Bild: Farbwähler in der Google-Suchmaschine](https://www.ionos.at/digitalguide/fileadmin/_processed_/a/7/csm_screenshot-google-farbwaehler_1125588ee0.webp "Farbwähler in der Google-Suchmaschine")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/screenshot-google-farbwaehler.jpg) Mit einem Farbwähler können Sie sich die Farbwerte praktisch anzeigen lassen. 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: ```css rgba(Rotwert, Grünwert, Blauwert, Deckkraft) ``` So ergeben folgende RGBA-Werte beispielsweise die Grundfarbe Blau mit einer **Transparenz** von 50 Prozent. ```css rgba(0, 0, 255, 0.5) ``` Hinweis 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: ```css .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. Tipp 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“: ```css .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: ```css .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: ```css .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`. ```css .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](https://www.ionos.at/digitalguide/websites/webdesign/webfonts-die-macht-moderner-schriftarten/). In der Regel genügen daher **zwei unterschiedliche Strichstärken**: `normal` und `bold`. ```css .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: ```css .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. ```css .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. ```css .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: ```css .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: ```css .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: ```css .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: ```css .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**: ```css .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: ```css .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. ```css .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](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-div/) oder [HTML-Tabellen](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-tabelle/), 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 ``, ``, `` oder ``. 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: ```css .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: [![Bild: Die CSS-Rahmentypen](https://www.ionos.at/digitalguide/fileadmin/_processed_/f/0/csm_css-rhamentypen_dfc73b92c5.webp "Die CSS-Rahmentypen")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots/css-rhamentypen.png) Es gibt verschiedene CSS-Rahmentypen mit unterschiedlicher Optik. 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: ```css .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): ```css 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: ```css .rahmen { height: 100px; width: 600px; border: solid 10px #d82451; border-radius: 2em; } ``` [![Bild: Rahmen mit abgerundeten Ecken](https://www.ionos.at/digitalguide/fileadmin/_processed_/5/1/csm_css-abgerundeten-ecken_1f90db927b.webp "Rahmen mit abgerundeten Ecken")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots/css-abgerundeten-ecken.png) Ein Wert von 2em führt zu gleichmäßig abgerundeten Ecken. Alternativ lassen sich **unterschiedliche Werte für jede der vier Ecken** definieren: ```css .rahmen { height: 100px; width: 600px; border: solid 10px #d82451; border-radius: 2em 1em 3em 4em; } ``` [![Bild: Rahmen mit abgerundeten Ecken: Für jede Ecke wurde ein anderer Wert definiert](https://www.ionos.at/digitalguide/fileadmin/_processed_/6/9/csm_css-abgerundeten-ecken-2_0a7e743c07.webp "Rahmen mit abgerundeten Ecken: Für jede Ecke wurde ein anderer Wert definiert")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots/css-abgerundeten-ecken-2.png) Für jede Ecke kann ein anderer Wert bestimmt werden. 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: ```css 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. ```css .rahmen { height: 100px; width: 600px; border: solid 10px #d82451; border-radius: 1em 4em / 4em 1em; } ``` [![Bild: Rahmen mit elliptisch abgerundeten Ecken](https://www.ionos.at/digitalguide/fileadmin/_processed_/a/1/csm_css-abgerundeten-ecken-3_4dccd566fb.webp "Rahmen mit elliptisch abgerundeten Ecken")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots/css-abgerundeten-ecken-3.png) Die Ecken können auch elliptisch abgerundet werden. Ein etwaiger Hintergrund wird automatisch entlang der Kurve zugeschnitten. ```css .rahmen { height: 100px; width: 600px; border: solid 10px #d82451; border-radius: 2em; background-color: #24d8ab; } ``` [![Bild: Rahmen mit abgerundeten Ecken und passgenauem Hintergrund](https://www.ionos.at/digitalguide/fileadmin/_processed_/d/b/csm_css-abgerundeten-ecken-4_6e2d855d77.webp "Rahmen mit abgerundeten Ecken und passgenauem Hintergrund")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots/css-abgerundeten-ecken-4.png) Der Hintergrund wird automatisch an den Rahmen angepasst. Dies gilt sowohl für Hintergrundfarben als auch für Hintergrundbilder, nicht jedoch für Textelemente. [![Bild: Textelemente passen sich abgerundeten Rahmenkanten nicht automatisch an](https://www.ionos.at/digitalguide/fileadmin/_processed_/d/8/csm_css-abgerundeten-ecken-5_e7ddda3851.webp "Textelemente passen sich abgerundeten Rahmenkanten nicht automatisch an")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots/css-abgerundeten-ecken-5.png) Textelemente müssen separat ausgerichtet werden. ### 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 `` 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`. ```css .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. ```html

``` Die Browseransicht zeigt die unterschiedliche Positionierung der Boxen innerhalb des `
`-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. [![Bild: Absolute Positionierung von CSS-Boxen](https://www.ionos.at/digitalguide/fileadmin/_processed_/b/2/csm_css-position-absolute_9d1ed0e3c7.webp "Absolute Positionierung von CSS-Boxen")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-position-absolute.jpg) Drei transparente CSS-Boxen mit unterschiedlicher absoluter 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: ```css .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. [![Bild: Relative Positionierung ausgehend vom natürlichen Elementfluss](https://www.ionos.at/digitalguide/fileadmin/_processed_/6/8/csm_css-position-relative_9c6bf62d8b.webp "Relative Positionierung ausgehend vom natürlichen Elementfluss")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-position-relative.jpg) Durch die relative Positionierung wird die blaue Box verschoben. 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: [![Bild: Drei Block-Boxen im CSS-Elementfluss](https://www.ionos.at/digitalguide/fileadmin/_processed_/4/5/csm_css-drei-block_e7a25f79e4.webp "Drei Block-Boxen im CSS-Elementfluss")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots/css-drei-block.png) CSS-Elementfluss: Block-Boxen werden jeweils in einer neuen Reihe dargestellt. Block-Boxen strukturieren das Layout, während Inline-Boxen für Text- und Inline-Elemente zuständig sind. Leere Container wie `
` 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**: [![Bild: CSS-Box-Modell](https://www.ionos.at/digitalguide/fileadmin/_processed_/6/9/csm_css-box-modell_2f544bdb2e.webp "CSS-Box-Modell")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots/css-box-modell.png) Schematische Darstellung des CSS-Box-Modells. ### 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: ```html
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.
``` 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: ```css .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: [![Bild: Content-Box ohne padding, border und margin](https://www.ionos.at/digitalguide/fileadmin/_processed_/9/c/csm_css-boxmodell-standard_033275888d.webp "Content-Box ohne padding, border und margin")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-boxmodell-standard.jpg) Wird eine Content-Box ohne padding, border und margin definiert, erscheint Sie oben links im Browserfenster 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. ```css .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: [![Bild: Content-Box mit padding](https://www.ionos.at/digitalguide/fileadmin/_processed_/2/a/csm_css-boxmodell-padding_b8c162d7c4.webp "Content-Box mit padding")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-boxmodell-padding.jpg) Das Padding definiert den Innenabstand. 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. ```css .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. [![Bild: Content-Box mit padding und border](https://www.ionos.at/digitalguide/fileadmin/_processed_/c/1/csm_css-boxmodell-border_915de1b0ca.webp "Content-Box mit padding und border")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-boxmodell-border.jpg) Der Rahmen umschließt Content- und Paddingbox. 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: ```css .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: [![Bild: Content-Box mit padding, border und margin](https://www.ionos.at/digitalguide/fileadmin/_processed_/1/3/csm_css-boxmodell-margin_cdd7eede56.webp "Content-Box mit padding, border und margin")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-boxmodell-margin.jpg) Die Property margin erzwingt einen Außenabstand zwischen Border-Box und Elternelement. 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. Hinweis 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: ```html .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: ```html
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.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
``` [![Bild: Zwei Block-Boxen als linksausgerichtete Floads](https://www.ionos.at/digitalguide/fileadmin/_processed_/6/6/csm_css-boxmodell-float_7645e5270d.webp "Zwei Block-Boxen als linksausgerichtete Floads")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-boxmodell-float.jpg) Mit der Property `float` lassen sich Block-Boxen ohne Zeilenumbruch nebeneinander darstellen. 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](https://www.ionos.at/digitalguide/websites/webdesign/was-bedeutet-responsive-design/) mit CSS zu gestalten, bietet die Stylesheet-Sprache zwei moderne Layout-Techniken: [Flexbox](https://www.ionos.at/digitalguide/websites/webseiten-erstellen/css-flexbox/) und [Grid](https://www.ionos.at/digitalguide/websites/webseiten-erstellen/css-grid/). Beide Systeme passen Inhalte dynamisch an unterschiedliche Bildschirmgrößen an. In Kombination mit [CSS Media Queries](https://www.ionos.at/digitalguide/websites/webdesign/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: ```css .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; ``` Die Regeln werden auf folgendes HTML angewendet: ```html

Item 1

Item 2

Item 3

``` 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: ```css .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: ```css .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. ```css .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: ```css / *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: ```css @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: ```css :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. This is a markdown version of: [https://www.ionos.at/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/](https://www.ionos.at/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/) for AI/LLM consumption.