Dein wichtigster Touchpoint zur Digitalbranche.
Dein wichtigster Touchpoint zur Digitalbranche.
Branding
CSS einfach erklärt: So passt du deinen Website-Style unkompliziert an

CSS einfach erklärt: So passt du deinen Website-Style unkompliziert an

Ein Gastbeitrag von Maria Kupke | 27.01.20

Diese kurze Einführung soll zeigen, wie individuelle Stilanpassungen von HTML Websites mit Hilfe von CSS-Befehlen im Allgemeinen umgesetzt werden können.

Cascading Style Sheets (CSS) ist zusammen mit HTML und JavaScript eine der Kernkomponenten einer Website. CSS ist eine Stylesheet-Sprache, die das Aussehen einer HTML Website beschreibt und bestimmt. Die CSS-Datei sagt dem Browser wie jedes Element der HTML-Datei visualisiert werden soll. Bei der Stylesheet-Sprache dreht sich alles um das Design einer Website. Es gibt eine ganze Reihe an Stil-Eigenschaften, die sich durch sie individualisieren lassen. Neben der Anpassung des Schriftstils bietet CSS zum Beispiel Animationen. Neue Eigenschaften kommen ständig dazu und ergänzen die Standards. Im Internet lassen sich die bestehenden CSS-Eigenschaften leicht finden. Die Befehle folgen immer dem gleichen Prinzip: Selector { Property: Value;}. Der Selector steht für die HTML-Elemente (Bsp.: Text p oder Überschrift h), denen die Eigenschaft zugewiesen werden soll. { Property: Value;} werden gemeinsam als Declaration bezeichnet und stehen für { Eigenschaft: Wert;}, zum Beispiel { color: red;}.

CSS in HTML einbinden

Grundsätzlich können Befehle direkt in die HTML-Elemente, also im <body> des HTML-Codes, eingefügt werden. Das sieht dann beispielsweise so aus:

So bindest du CSS in HTML ein, © Maria Kupke
So bindest du CSS in HTML ein, © Maria Kupke

Das HTML Element Überschrift h1 „Ich lerne CSS“ wurde um die Eigenschaft color in red ergänzt und wird daher entsprechend in rot erscheinen. Es könnten nun auch weitere Style-Eigenschaften hinzugefügt werden. Diese Methode wird allerdings kaum genutzt und es ist auch davon abzuraten, da moderne Websites oft mit einer großen Menge an unterschiedlichen Styles arbeiten und so der HTML-Code schnell unübersichtlich und fehleranfällig wird. Eine weitere Möglichkeit ist, die Style-Eigenschaften im <head> der HTML Datei einzufügen, wie später im Beispiel gezeigt. Die Beschreibung der Eigenschaften bezieht sich dann immer auf alle Elemente mit der gleichen Bezeichnung (zum Beispiel alle Überschriften h1), die sich in der HTML-Datei befinden. Alle Überschriften h1 erhalten somit das gleiche Design, ohne dass diese einzeln bearbeitet werden müssen. Das spart eine Menge Zeit, vermeidet Fehlerquellen und ermöglicht einen erheblich agileren Umgang mit dem Design der Webseite.

Es geht noch übersichtlicher und agiler

Die dritte und verbreitetste Methode ist das Anlegen des CSS-Codes in einer separaten Datei, die dann durch einen Link im <head> der HTML-Datei (dort wo sonst der CSS-Code steht) mit der HTML-Datei verbunden wird. Diese Methode hat den Vorteil, dass die Style-Elemente von den Inhalten der Webseite getrennt erstellt und geändert werden können. 

Ein vereinfachter HTML Code, © Maria Kupke
Ein vereinfachter HTML Code, © Maria Kupke

Das vereinfacht den HTML-Code und verringert sowohl die Fehleranfälligkeit als auch die Überarbeitung des Webseiten-Stils. Das Stylesheet lässt sich außerdem in mehrere Files einbinden. Designs lassen sich so ausprobieren, ohne die HTML-Datei dafür verändern zu müssen. Um es noch leichter zu haben, können HTML-Elemente mit Hilfe des ID- oder Klassenattributs zusammengefasst werden, um bestimmten Elementen einfacher die selbe Eigenschaft zuzuweisen.

Webseiten-Stil mit CSS erstellen

Es gibt eine Menge Möglichkeiten, CSS für die Gestaltung einer Webseite zu nutzen. Im Folgenden sollen ein paar simple und geläufige Beispiele zeigen, wie das grundsätzlich funktioniert. Wird das allgemeine Prinzip der Stylesheet-Sprache und die leichten Beispiele verstanden, ist es einfach, auch komplexere CSS-Eigenschaften zu programmieren. Um das herangezogene Beispiel umzusetzen, wird lediglich ein Text-Editor sowie ein einfacher HTML-Code wie der Folgende benötigt. Dort können die CSS Befehle im <head> des HTML-Codes eingebunden und ausprobiert werden. Wird die txt.-Datei dann als HTML-Datei gespeichert, kann diese im Browser geöffnet und der HTML-Code visualisiert werden. So lassen sich leicht alle Veränderungen zwischen dem Code und der Visualisierung verfolgen.

Schritt für Schritt zum Ausprobieren

Schritt 1: Der grau markierte Bereich zeigt die Befehle. Im ersten Schritt wurden Schrift-Stile für verschiedene Textelemente definiert. Dabei kann zum Beispiel die Schriftart, -farbe, -größe, oder -anordnung bestimmt werden.

HTML Code zum Üben
HTML Code zum Üben, © Maria Kupke

Schritt 2: H1 (Überschrift 1) und p (Text) wurden um die CSS-Eigenschaften Schriftfarbe (color) und -größe (font-size) erweitert und erscheinen nun in einem anderen Stil (siehe rechte Seite). Zusätzlich wurde die Eigenschaft text-align genutzt, um alle HTML-Elemente in der Mitte der Webseite anzuzeigen.

CSS-Befehle und Schrift, © Maria Kupke
CSS-Befehle und Schrift, © Maria Kupke

Schritt 3: Im zweiten Schritt wurde der Button ebenfalls mit Hilfe verschiedener CSS-Befehle individualisiert. Die Gestaltungsmöglichkeiten gehen weit über die hier angeführten einfachen Beispiele hinaus. Das Beispiel zeigt jedoch wie auch komplexere Formen einfach mit CSS verändert werden können. margin-top (Außenabstand oben) und padding (Innenabstand) definieren die Anordnung des Buttons selbst und des Button-Textes. Sowohl eine individuelle Farbkombination (color, background-color) und Schatten (box-shadow, rgba) als auch ein individueller Rahmen (border und border-radius) wurde dem Button hinzugefügt. Die Schrift wurde über die CSS-Eigenschaft font-size (Schriftgröße) und font-family (Schriftart) verändert.

Button-Einbau über CSS
Button-Einbau über CSS, © Maria Kupke

Ein individuelles CSS für die eigene Webseite zu erstellen, ist gar nicht so schwer und auch ohne viel Erfahrung lern- und umsetzbar. Auch bei vorinstallierten WordPress-Themes lassen sich individuelle Änderungen über das CSS vornehmen.

Kommentare aus der Community

IT Flashcards am 21.07.2024 um 18:05 Uhr

Ein solider Einstieg in CSS für Anfänger. Für fortgeschrittene Themen wie CSS Grid, Flexbox oder CSS-in-JS wäre ein Folgebeitrag interessant. Auch Performance-Optimierung durch kritisches CSS und Lazy-Loading könnte behandelt werden. Insgesamt eine gute Basis für weitere Vertiefungen.

Antworten
Schorsch Bauer am 09.11.2021 um 23:44 Uhr

Sehr gut erklärt!

Antworten
Pasha am 29.01.2020 um 12:06 Uhr

Kommt bald ein CSGO einfach erklärt?

Antworten
Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*
*