Allgemeine Themen & Trends

Grid-template-columns ist ein wichtiges Konzept der CSS Grid-Layout-Spezifikation. Es erlaubt Entwicklern, ein Raster in benutzerdefinierter Breite und Höhe zu erstellen, das in beliebiger Anordnung angeordnet werden kann. Grid-template-columns bietet eine einfache Möglichkeit, die Anzeige von HTML-Elementen auf einer Webseite zu steuern. In diesem Artikel werden wir einen Blick auf die verschiedenen Optionen und Funktionen werfen, die grid-template-columns zu bieten hat.

Was versteht man unter grid-template-columns?

Grid-template-columns ist ein CSS-Regelwerk, das die Spaltenbreite eines Rasters bestimmt. Mit dieser Regel können Entwickler den Inhalt eines HTML-Dokuments in ein Raster aufteilen, um die Benutzerfreundlichkeit und den visuellen Effekt zu verbessern. Der Entwickler kann die Größe der Spalten anpassen, um ein bestimmtes Layout zu erhalten.

Wenn grid-template-columns verwendet wird, müssen Entwickler die Anzahl der Spalten und die Breite jeder Spalte als Prozentsatz oder Pixel angeben.

Entwickler können auch komplexere Layouts erstellen, indem sie zusätzliche Regeln hinzufügen. Zum Beispiel können sie mehrere Spalten mit unterschiedlichen Breiten erstellen, indem sie mehrere grid-template-columns-Regeln verwenden. Ein Entwickler kann auch verschiedene Breiten innerhalb einer Spalte festlegen, indem er die Grid-Template-Rows-Regel verwendet.

Wie nutzt man grid-template-columns?

Der einfachste Weg, grid-template-columns zu nutzen, besteht darin, Werte für die Breite der Spalten anzugeben. Wenn Du zum Beispiel zwei gleich breite Spalten erstellen möchtest, kannst Du einfach den Wert „50%“ angeben. Wenn Du eine Spalte breiter als die andere machen möchtest, kannst Du stattdessen die Werte „30%“ und „70%“ angeben.

Du kannst auch Pixelwerte angeben, um die Breite der Spalten zu definieren. Wenn Du zum Beispiel zwei Spalten erstellen möchtest, die jeweils 400 Pixel breit sind, kannst Du den Wert „400px“ angeben. Wenn Du eine Spalte breiter als die andere machen möchtest, kannst Du stattdessen die Werte „300px“ und „500px“ angeben.

Der Wert „auto“ kann auch verwendet werden, um die Breite einer Spalte so zu definieren, dass sie sich an den Inhalt anpasst. Wenn Du zum Beispiel zwei Spalten erstellen möchtest, die sich an den Text anpassen, kannst Du den Wert „auto“ angeben. Dies bedeutet, dass die Breite der Spalten sich an die Länge des Textes anpassen wird.

Grid-template-columns kann auch verwendet werden, um die Größe einer Spalte in Bezug auf andere Spalten zu definieren. Wenn Du zum Beispiel zwei Spalten erstellen möchtest, die jeweils die Hälfte der Breite der ersten Spalte ausmachen, kannst Du den Wert „1fr“ angeben. Wenn Du eine Spalte breiter als die andere machen möchtest, kannst Du stattdessen die Werte „1fr“ und „2fr“ angeben.

Die Vor- und Nachteile von grid-template-columns

Einer der größten Vorteile von grid-template-columns ist, dass es einfach zu erlernen und zu verwenden ist. Ein Entwickler kann sein Layout mithilfe einer einzigen Eigenschaft erstellen und es ist sehr flexibel, sodass die Grid-Spalten und -Zeilen schnell angepasst werden können, um jedes Layout zu erfüllen. Auch wenn das Layout komplex ist, kann es mit nur wenigen Zeilen Code erstellt werden, sodass Entwickler Zeit und Mühe bei der Erstellung von Layouts sparen können.

Ein weiterer Vorteil von grid-template-columns ist, dass es eine gute Unterstützung für responsive Designs bietet. Wenn sich die Größe des Benutzerbildschirms ändert, kann das Grid mithilfe der Grid-Eigenschaft angepasst werden, um ein optimales Layout zu erzielen. Dies bedeutet, dass Entwickler nicht mehr viele verschiedene Medienabfragen erstellen müssen, um unterschiedlichen Bildschirmgrößen gerecht zu werden.

Während die Verwendung von grid-template-columns viele Vorteile bieten kann, gibt es aber auch einige Nachteile. Einer davon ist, dass es schwierig sein kann, das Grid an komplexe Layouts anzupassen. Auch wenn die Grid-Template-Columns-Syntax sehr flexibel ist, kann es komplizierter sein, die richtigen Werte für das Layout zu finden. Dafür musst Du Dich tiefer in die Materie einarbeiten.

Außerdem ist es wichtig zu beachten, dass nicht alle Browser Grid-template-columns unterstützen. Obwohl die meisten modernen Browser und Geräte diese Eigenschaft unterstützen, gibt es immer noch einige, die es nicht tun. Dies bedeutet, dass Entwickler möglicherweise zusätzlichen Code schreiben müssen, um sicherzustellen, dass das Layout in allen Browsern ordnungsgemäß funktioniert.

Wie man grid-template-columns mit anderen CSS-Eigenschaften kombinieren kann

Die erste Eigenschaft, die Du hinzuziehen kannst, ist Grid-Gap. Diese Eigenschaft ermöglicht es Dir, einen Abstand zwischen den Spalten Deines Grids einzurichten. Mit Grid-Gap kannst Du die Größe des Abstands zwischen Spalten anpassen, sodass Du das Layout Deines Grids anpassen kannst.

Eine weitere Eigenschaft, die man mit grid-template-columns kombinieren kann, ist Grid-Template-Areas. Diese Eigenschaft ermöglicht es Dir, verschiedene Bereiche in Deinem Grid zu definieren. Mit dieser Eigenschaft kannst Du die Größe der Bereiche anpassen und verschiedene Layouts erstellen.

Die letzte Eigenschaft, die wir betrachten werden, ist Grid-Auto-Rows. Mit dieser Eigenschaft kannst Du verschiedene Bereiche in Deinem Grid definieren und deren Größe anpassen. Es ermöglicht Dir auch, die Position der Elemente in Deinem Grid zu kontrollieren.

Das Wichtigste in Kürze

Grid-template-columns ist ein leistungsstarkes CSS-Grid-Layout-Tool, das Designern und Entwicklern hilft, komplexe Layout-Anforderungen zu erfüllen. Es ermöglicht es Benutzern, Spalten und Zeilen auf einfache Weise zu definieren, die Größe und Breite jeder Spalte anzupassen und den Inhalt konsistent anzuordnen.

Häufig gestellte Fragen zum Thema grid-template-comlumns

CSS Background Size ist ein CSS Tool, das es Entwicklern ermöglicht, die Größe eines Hintergrundes den Bedürfnissen entsprechend anzupassen. Background size (Hintergrundgröße) kann damit ein besonders wichtiges Werkzeug für Entwickler sein, das in Kombination mit anderen CSS Eigenschaften zur Erstellung interessanter und in manchen Fällen sogar intuitiver Anzeigeerlebnisse beitragen kann – das Beste daran: Es ist auch für Quereinsteiger leicht zu verwenden!

CSS background size – Was ist das eigentlich?

Der Befehl background size ermöglicht es kreativen Entwicklern, Hintergrundbilder für Webseiten oder andere Multimedia-Inhalte auf ästhetisch ansprechende Weise anzupassen und formatieren. Die Technik basiert auf den CSS Eigenschaften background-image, background-repeat und background-position und ermöglicht es, den Prozess des Einfügens und Anpassens eines Hintergrundbilds zu vereinfachen. Durch die Verwendung der Eigenschaft CSS background size können Entwickler die gewünschte Größe des Hintergrundbilds definieren, ohne dass es zu einem Verlust an Qualität kommt.

Es gibt verschiedene Möglichkeiten, einen Hintergrund mittels CSS background size anzupassen, die im Folgenden genauer erläutert werden.

CSS Hintergrundgrößen – Eine Anleitung für Anfänger

CSS Hintergrundgrößen sind ein wichtiges Element des Webdesigns, mit dem Webdesigner bestimmen, wie ein Hintergrundbild angezeigt wird. Mit verschiedenen CSS Größenoptionen können Designer die Größe des Hintergrundbildes eingeben, um den idealen Hintergrund zu erhalten.

A – Farbe als Hintergrund festlegen

Ausgangspunkt für die Definition einer background size ist zunächst eine Fläche, in die ein Hintergrund eingefügt werden soll. In unserem Beispiel handelt es sich hierbei um einen 300 x 300 container. Mit der property background-color: red wird die Farbe Rot als Hintergrund festgelegt.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-color: red;
}
</style>

Wichtig ist es zu wissen, dass anstelle von red auch Hexadezimal-Codes für spezifische Farbpaletten verwendet werden können.

B – Bild als Hintergrund festlegen

Nachdem die Hintergrund-Farbe festgelegt wurde, kann nun eine Bild-Datei als Hintergrund definiert werden. Um dies zu bewerkstelligen, muss zunächst einmal die Bild-Datei auf dem Computer lokalisiert werden. Dazu wird die property background-image und das jeweilige Ordner-Verzeichnis genutzt.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
}
</style>

C – Hintergrundgröße anpassen

Nachdem die Hintergrund-Farbe und das Bild als Hintergrund definiert wurden, kann die Bildgröße manuell angepasst werden. Hierzu wird die property background size verwendet.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px;
}
</style>

Hierbei ist es wichtig zu verstehen, dass die background size in den Standardeinstellungen stets auf auto gestellt ist. Das bedeutet, dass das Bild – wenn es nicht manuell mit background size verstellt wird – automatisch in Original-Größe eingefügt wird. Weiterhin ist es möglich, die background size sowohl in Höhe als auch in Weite zu definieren, wie im folgenden Beispiel ersichtlich wird.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px 200px
}
</style>

Es gibt vier verschiedene Methoden, mit denen Web-Designer die Größe ihres Hintergrundbildes anpassen können: „contain„, „cover„, „auto“ und „manuell„, wobei die letzten zwei Möglichkeiten selbsterklärend ist.

C.1 – background size: contain

Mit der property background-size: contain wird das Bild als Ganzes eingefügt, ohne dass es zugeschnitten wird. Dadurch werden häufig Leerstellen im Container erzeugt, die mit der vordefinierten Hintergrundfarbe gefüllt sind.

C.2 – background size: cover

Die property background-size: cover sorgt dafür, dass alle Leerstellen des Containers mit dem Bild abgedeckt werden, allerdings sorgt cover häufig dafür, dass das Bild nicht gänzlich sichtbar ist. Hier kann eine Repositionierung des Bildes Abhilfe schaffen. Auf diesen Punkt wird im Folgenden genauer eingegangen.

D – Bildwiederholung

Nachdem ein wenig mit der background size herumgespielt wird, wird schnell deutlich, dass die Wiederholung desselben Bildes störend wirken kann. In diesen Fällen sollte die Bildwiederholung mit der property background-repeat: no-repeat ausgestellt werden.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
}
</style>

Weitere mögliche Befehle inkludieren initial, repeat, round oder space.

E – Bildposition ändern

Um das Bild als Hintergrund in bestimmter Weise im Container zu positionieren, muss die property background-position verstellt werden.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center;
}
</style>

In unserem Beispiel wurde das Bild mit dem Befehl center in die Mitte des Containers gerückt. Weitere mögliche Befehle wären die Befehle top right oder left.

F – Transparenz einfügen

Wenn das Bild soweit wie möglich den eigenen Bedürfnissen entsprechend eingestellt wurde, kann es in seiner Transparenz verstellt werden.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
}
</style>

Hierbei ist es wichtig zu wissen, dass die Größe 1 die volle Deckkraft angibt, während die Größe 0 das Bild gänzlich unsichtbar macht.

Befehl background – Was es damit auf sich hat

Der Befehl background stellt eine Abkürzung aller obengenannter properties dar. Dieser Befehl ermöglicht es somit, die Hintergrundfarbe, das Bildverzeichnis, die Hintergrundwiederholung und die Hintergrundposition auf einmal zu definieren. So kann effektiv Zeit gespart werden!

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background: green  ("./OrdnerName/Bild.jpg")  no-repeat  left;
  background-size: cover;
}
</style>

Bei der Verwendung dieses Befehls sollte jedoch auf die Befolgung der obengenannten Reihenfolge geachtet werden, da er ansonsten nicht funktioniert. Weiterhin muss die background size weiterhin separat eingestellt werden, da sie nicht unter background zusammengefasst wird.

CSS Hintergrundgrößen zusammengefasst

Zusammenfassend lässt sich sagen, dass CSS background size ein wichtiges Element des Webdesigns darstellt. Mit verschiedenen CSS Größenoptionen, einschließlich „cover„, „contain„, „auto“ und „manuell„, können sowohl Anfänger als auch bewanderte Webdesigner die Größe des Hintergrundbildes professionell anpassen und das für sie ideale Ergebnis erzielen. Mit diesem Wissen können Entwickler jeden Alters ihre Webseiten problemlos designen und spielerisch ansprechender gestalten!

Alles was Du über CSS Hintergrundgrößen wissen musst

Was ist CSS background size?

CSS background size stellt ein sehr mächtiges CSS Werkzeug dar, das alte und junge Entwickler beim Entwerfen von kreativen Webseiten verwenden können, um die Größe eines Hintergrunds zu verstellen und zu optimieren. Der Einsatz der Größenangaben erlaubt Dir, wichtige Hinweise zur Ausgabe des Designs zu liefern. So kann die absolute Größe des Hintergrunds angeben oder nur die proportionale Größe verwendet werden, die vom Inhalt bestimmt wird.

Wie kann die CSS background size geändert werden?

Du kannst die background size so einstellen, dass sie immer ohne Veränderung der Proportionen angezeigt wird. Um dies zu erreichen, musst Du die Wahl zwischen den Properties „contain“ und „cover“ treffen. Der Wert „contain“ passt das Hintergrundbild bei der Anzeige an das Element an, ohne dass Proportionen oder Qualität verloren gehen. Der Wert „cover“ entspricht dabei einer vollständigen Abdeckung des Elements durch das Hintergrundbild.

Was ist die beste CSS background size?

Der beste Weg, um festzustellen, welche Art von background size für ein bestimmtes Hintergrundbild am besten geeignet ist, besteht darin, eine Reihe von Optionen zu evaluieren und zu testen und dann diejenige zu wählen, die am besten zu den spezifischen Anforderungen der Seite passt.

Hilfsmittel im CSS wie Gradient, Border oder Padding sind nützlich für das Gestalten Deiner eigenen Webseite. Ein weiteres unerlässliches Element in der Programmiersprache ist der CSS Filter. Was es damit im Genauen auf sich hat und welche Verwendungsmöglichkeiten existieren, zeigt Dir der folgende Beitrag auf.

Was ist CSS Filter?

CSS Filter sind visuelle Effekte, die auf Bilder und Elemente angewendet werden können, um dessen und deren Darstellung zu ändern. So können sie zum Beispiel verwendet werden, um Bilder heller, dunkler, farbintensiver oder sogar verzerrt aussehen zu lassen. Hierbei gibt es eine breite Palette von Filteroptionen, die in CSS definiert werden können, einschließlich Blur, Grayscale, Saturate, Hue-Rotate, Brightness, Contrast und anderen, die genauer unter die Lupe genommen werden.

Daher bieten CSS Filter eine nützliche Möglichkeit, die Darstellung einer Website oder eines bestimmten Elementes zu ändern und auf diese Weise die Benutzererfahrung zu verbessern. Sie können gleichfalls gebraucht werden, um eine Website auffälliger zu machen, indem zum Beispiel das Foto eines Produkts noch viel heller gemacht wird.

Schreibweise und Anwendung von CSS Filter

Um Filter in CSS anwenden zu können, musst Du das entsprechende Filter-Attribut in den Eingabebefehl schreiben. Hierbei gilt: Je nach Programmierung kann man die Eingabe auf ein einzelnes Element oder auf eine ganze Klasse anwenden. Und: Du kannst auch mehrere Filter in einem einzigen Befehl kombinieren, um einen noch ausgefalleneren Effekt zu erzielen.

Anwendung in den jeweiligen Browsern

Aber aufgepasst: Da sie eine zusätzliche Anforderung an den Browser stellen, können sie den Seitenaufbau verlangsamen. Welche Browser sind von zusätzlicher Ladezeit und Kompatibilität betroffen?

Die besten Chancen, CSS Filter zu verwenden – sowohl mit als auch ohne SVG – bietet Safari. Das gilt für Destop-Anwendungen auf dem Laptop und PC genauso wie für die Anwendung auf kleineren Bildschirmen wie Tablets oder Smartphones. Dahingehend sind Microsoft Edge und Firefox weniger gut geeignet, um mit der Filter-Funktion zu arbeiten.

Filter-Funktion mit und ohne SVG

Die Anwendung dieser Funktion kann über mehrere unterschiedliche Wege passieren: So kann man schlicht mithilfe der Eigenschaft filter im CSS-Code und entsprechend mit den jeweiligen unterschiedlichen Attributen arbeiten. Man kann die Filter-Funktion aber auch mithilfe von SVG kombinieren, zum Beispiel über die URL. Über die alleinstehende SVG-Filter-Funktion (zum Beispiel über die SVG Viewbox) ist dies ebenfalls möglich.

CSS Filter als Eigenschaft mit entsprechend zugeschriebenen Werten im CSS-Code wird folgendermaßen aufgefasst:

elem.fx {
filter: value (with %/deg/px);
}

Nach einen ähnlichen Aufbau kann man auch die anderen beiden Varianten erstellen. Die Verbindung zu einem SVG-Filter erfolgt durch einen entsprechenden Verweis (zum Beispiel nach der URL-Befehlseingabe).

Weiterhin: Man kann CSS Filter auch im Rahmen von Animationen verwenden.

Welche Filteroptionen stehen in CSS zur Verfügung?

Folgende Filteroptionen existieren im CSS:

filter: none

Wenn Du keinen Effekt anwenden möchtest, ist dieser Eingabebefehl perfekt. Das kann zum Beispiel der Fall sein, wenn Du ein Element aus einer Reihe nicht mit übergreifenden Effekten, sondern im Original zeigen möchtest.

filter: blur

Man gibt diese Variante in Pixel an (px). Wie sieht das entsprechende Bild aus? Es wird „blurry“, das heißt: verschwommen. Dieser Filter wird verwendet, um die entsprechende Elemente bis zu einem gewissen Grad verschwommen dazustellen.

filter: brightness

Durch diese Option bist Du in der Lage, Dein Bild heller und dunkler zu gestalten. Dies geht, indem Du bestimmte Prozentwerte (%) entweder höher oder kleiner als 100 % setzt. In diesem Zusammenhang gilt: Werte, die über 100 % hinausgehen, machen das Element heller; dunkler werden sie durch Werte unter 100 %.

filter: contrast

Mithilfe dieser Variante gibt man die Kontrastverhältnisse an und kann diese entsprechend variieren. Ähnlich wie bei der vorangegangenen Option geschieht die Angabe in Prozent; einen größeren Kontrast erzielt man mit Eingaben über und das Gegenteil mit weniger als 100 %.

filter: grayscale

Willst Du Dein Bild zum Beispiel in Schwarz-Weiß gestalten, kann Dir diese Option helfen. Über sie kannst Du die unterschiedlichen Graustufen einstellen. Dieser Filter wird ebenfalls in Prozent angegeben.

filter: hue-rotate

Angegeben in Gradanzahlen (deg), verwendet man diese Variante, um eine gewisse Änderung im Farbverlauf anzugeben. Hast Du zum Beispiel ein Element, das rot ist, kannst Du mithilfe dieses Filters anzeigen, inwieweit es sich zu Blau ändern soll.

filter: invert

Wie die englische Bezeichnung verrät, wird hierbei etwas umgekehrt. In diesem Fall ist das gesamte Motiv gemeint – durch diesen Filter erhält man also die Negativ-Abbildung des Elementes.

filter: opacity

Wie stark ausgeprägt ist die Undurchsichtigkeit des Elementes? Mit diesem Filter kannst Du die Stärke der Durchsichtigkeit in Prozentangaben einstellen.

filter: saturate

Um die Sättigkeit eines Elementes anzupassen, kannst Du diesen Filter nutzen. Er wird ebenfalls in Prozentangaben angegeben.

filter: sepia

Einer der bekanntesten Filter ist der Sepia-Filter. Auch diese Option ist mit CSS Filter umsetzbar. Wichtig: Gib diese Variante in Prozent an.

filter: initial

Wenn Du eine Reihe von Filter ausprobierst, kannst Du diese auch so einstellen, dass sie zum Ursprungswert zurückkehren. Dies machst Du über die initial-Variante.

filter: dropshadow

Willst Du einen Schatten unter ein bestimmtes Element setzen, wird das mit diesem Filter in die Tat umgesetzt. Hierbei wichtig zu wissen: Es gibt verschiedene Arten und Weisen, wie Du einen Schatten hinterlegen kannst.

Primär verwendet der Filter eine horizontale und vertikale Verschiebung des Schattens, um die Objekte auf dem Bild zu betonen: mithilfe des Horizontalschattens (h-shadow) und des Vertikalschattens (v-shadow).

Der Horizontalschatten gibt die horizontale Verschiebung des Schattens an. Je höher der Wert, desto weiter wird der Schatten zur rechten Seite verschoben. Der Wert kann positiv oder negativ sein. Ein positiver h-shadow erzeugt einen Schatten nach rechts, während ein negativer h-shadow einen Schatten nach links erzeugt.

Der Vertikalschatten hingegeben stellt die vertikale Verschiebung des Schattens dar. Auch hier gilt: Je höher der Wert, desto weiter wird der Schatten nach unten verschoben. Ein positiver v-shadow erzeugt einen Schatten nach rechts, ein negativer v-shadow einen nach links.

Man kann diesen Filter weiterhin mit anderen Werten verbinden. Darunter: der Grad der Verschwommenheit des Schattens (blur), die Größe des jeweiligen Schattens (spread) sowie die Farbe des Schattens (color).

Auf einen Blick

Über CSS Filter lassen sich bestimmte Effekte über Bilder und andere Elemente auf einer Webseite legen. Daher ist dieses Tool ein wichtiges Instrument in der Gestaltung Deiner Webseite. Es lässt sich mithilfe der Eingabe der CSS-Eigenschaft und entsprechenden Wertzuschreibungen nutzen, kann aber auch mithilfe von URL und/oder SVG-Filter angewendet werden. Je nach Browser ist die Anwendung unterschiedlich, daher solltest Du vorher die Kompatibilität checken, ehe Du CSS Filter verwendest. Durch eine Reihe unterschiedlicher Filtervarianten kannst Du dieses Tool breitgefächert gebrauchen.

FAQ zu CSS Filter

Wenn Du Deine Webseite gestaltest, kannst Du – gerade mithilfe von CSS – eine Vielzahl von Optionen nutzen, die das optische Erscheinungsbild der jeweiligen Seite verändern können: von CSS gradient über CSS font bis hin zu CSS underline. Um Letzteres soll es sich in diesem Beitrag drehen: Was ist CSS underline? Wie und wo kann man es nutzen? Was verändert sich durch den Gebrauch dieses Eingabebefehls?

CSS underline: Worum handelt es sich dabei?

Die Bezeichnung lässt es bereits vermuten: CSS underline ist ein Tool, das Verwendung findet, um Text in einer Webseite unterstreichen zu lassen. Daher nimmt es einen wichtigen Bestandteil des Cascading Style Sheets ein, einer Standardmethode, die Webdesignern dabei hilft, die Formatierung von Webseiten zu kontrollieren – egal, ob am Laptop oder am PC.

Dieser Eingabebefehl ist eine der grundlegenden Textformatierungsoptionen in CSS. Mit dieser Funktion kann man einen Text unterstreichen, um ihn hervorzuheben oder hervorzuhebende Elemente wie Links, wichtige Schlagwörter oder stilistische Elemente wie Zitate hervorzuheben. Da es zum Aufwerten der Optik und zum Gestalten und Dekorieren von Texten eingesetzt wird, kommt es nachfolgend und zusammen mit dem Eingabebefehl „text-decoration: underline“ vor.

Hierbei wichtig zu wissen: „text-decoration“ ist die Kurzschrift von:

• text-decoration-line (Textlinienart)
• text-decoration-style (Textstil)
• text-decoration-color (Textfarbe)
• sowie text-decoration-thickness (Textbreite).

Im Umkehrschluss heißt das: Alle Eigenschaften, die man innerhalb eines Textes ändern kann – hier: Farbe, Linienart und Breite – kann man auch auf den Eingabebefehl „text-decoration: underline“ anwenden. Demnach kann man die Farbe, die Art und Weise sowie die Breite der unter dem Text gesetzten Linie entsprechend verändern bzw. anpassen.

Welche Befehle gelten dafür?

Formen von CSS underline

Im Allgemeinen gilt: Den Befehl „text-decoration: underline“ verwendet man, um eine unterstrichene Linie unter Text zu erstellen. Durch die Eingabe dieser Anweisung in Deinem CSS-Code kannst Du festlegen, wo und wie eine Unterstreichung auf Deiner Seite angezeigt werden soll.

Erste kleine Randnotiz: Es gibt auch andere Möglichkeiten, einen Text unterstreichen zu lassen, wie zum Beispiel durch „border-bottom“. Allerdings ist diese Option oftmals aufwendiger. Nichtsdestotrotz ermöglicht sie es ebenfalls, eine einzige unterstrichene Linie zu erstellen, die in der Breite des Elements angepasst werden kann.

Zweite kleine Randnotiz: Als mögliche Variante des „text-decoration: line“-Befehls gibt es weiterhin die Möglichkeit, Deinen Text auch durchzustreichen (line-through) sowie eine Linie über dem Text zu gestalten (overline). Diese Art der Linienführung ist in der Regel einmalig. Das bedeutet, man kann eine durchgängige Linie unter bzw. durch bzw. über den Text zeichnen.

Stil der Linie

Willst Du nun zum Beispiel keine durchgängige Linie erstellen, kannst Du den Stil der Linie ändern. Das geht zum Beispiel, indem Du …

• die Linie gewellt darstellst (wavy)
• eine gestrichelte Linie erzeugst (dashed)
• die Linie gepunktet darstellst (dotted)
• eine doppelte Linie zeichnest (double)

… und Ähnliches. Hierbei können im Prinzip dieselben Werte zugeschrieben werden wie bei CSS border.

Um eine gewellte Unterlinie zu erschaffen, würdest Du also den folgenden Befehl im CSS-Code einfügen:

text-decoration: underline wavy; 

Farbe der Linie

Weiterhin kannst Du die Farbe der Linie anpassen. Achte hierbei darauf, dass die entsprechenden Farben nur unter bestimmten Voraussetzungen eingefügt werden können. Das meint, als HEX-Wert, unter der direkten Bezeichnung, als RGB oder als HSL.

Um an das vorangegangene Beispiel anzuknöpfen: Willst Du nun eine rote gewellte Unterlinie erzeugen, lautet der entsprechende Befehl:

text-decoration: underline wavy red;

Breite der Linie

Schlussendlich kannst Du noch die Linienbreite einstellen. Das funktioniert auf verschiedene Weise:

• Zum einen kannst Du die Linienbreite automatisch einstellen lassen (auto). In diesem Fall wird die optimale Linienbreite selbstständig für die angezeigte Webseite gewählt.
• Zum anderen ist es möglich, die Linienbreite eigens einzustellen. Ähnlich wie bei der Farbwahl kannst Du das über verschiedene Formate tun, darunter zum Beispiel: Pixel (px), Prozent (%) und „from-font“. Gibst Du Letzteres an, werden die Informationen zur Linienbreite aus der Stelle im Code zu CSS font gezogen.

Angegeben wird eine rote gewellte Linie, deren Linienbreite im CSS font festgelegt wurde, daher wie folgt:

text-decoration: underline wavy red from-font;

Auf einen Blick

Die Eigenschaft „underline“ kann beim Programmieren im CSS-Code genutzt werden, um Texte mitzugestalten – in diesem Fall durch das Unterstreichen des jeweiligen Textes. Das kann man zum Beispiel nutzen, wenn man Hervorhebungen machen möchte – bei Links, bestimmten Schlüsselbegriffen und Ähnliches. Die Unterlinie eines Textes kann zusätzlich angepasst werden – in der Art und Weise der Linie, der Farbe und der Breite. Insgesamt stellt CSS underline ein Hilfsmittel dar, um eine Webseite optisch aufzuwerten.

FAQ zu CSS underline