CSS einfach erklärt: So funtionierts!

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*

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*

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.

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*

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.

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!

Pasha am 29.01.2020 um 12:06 Uhr

Kommt bald ein CSGO einfach erklärt?

Schreibe einen Kommentar

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

Kommentar

_* Hiermit willige ich in die Verarbeitung meiner angegebenen personenbezogenen Daten für das Kommentieren des Beitrags der Onlinemarketing.de GmbH ein. Mir ist bekannt, dass ich meine Einwilligung jederzeit durch eine formlose E-Mail an info@onlinemarketing.de widerrufen kann. Durch den Widerruf der Einwilligung wird die Rechtmäßigkeit der Verarbeitung, die aufgrund der Einwilligung bis zum Widerruf erfolgt ist, nicht berührt. Weitere Informationen über den Umgang mit Ihren Daten finden Sie in unserer Datenschutzerklärung.

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

CSS in HTML einbinden

Es geht noch übersichtlicher und agiler

Webseiten-Stil mit CSS erstellen

Schritt für Schritt zum Ausprobieren

Über 30.000 Subscriber können nicht irren. Melde dich jetzt zu unserem NEWSLETTER an:

Kommentare aus der Community

Über 30.000 Subscriber können nicht irren. Melde dich jetzt zu unserem NEWSLETTER an:

Beliebte Kategorien

Nützlich

OnlineMarketing.de