CSS: Die Grundlagen für Einsteiger

CSS und HTML sind ein unzertrennliches Paar, wenn es um das Produzieren, Strukturieren und Gestalten von Inhalten im Web geht. Die Rollen sind dabei klar verteilt: HTML ist eine Auszeichnungssprache, während CSS den Design-Part übernimmt.

Verschaffen Sie sich hier einen Überblick über die wichtigsten Begriffe rund um HTML und CSS. Lernen Sie, wie man in einem Texteditor erste CSS-Befehle einbindet, wie diese strukturiert sind und welche praktischen CSS-Tricks es gibt.

CSS und HTML: Zwei Sprachen mit verschiedenen Aufgaben

HTML und CSS sind beides keine Programmiersprachen im klassischen Sinne. Im Falle von HTML handelt es sich vielmehr um eine Auszeichnungssprache. Konkret ausgedrückt: HTML strukturiert Ihre Webseite, indem bestimmt wird, welche Text-Inhalte in welcher Hierarchie und Anordnung auf Ihrer Seite angezeigt werden.

Zum Einsatz kommen dabei diverse Elemente, die auch Tags genannt werden. Diese platzieren Sie um Ihre Inhalte herum, wodurch den Inhalten spezielle Aufgaben zugewiesen werden. Beispielsweise haben Sie folgenden Inhalt auf Ihrer Webseite:

Das ist meine Webseite

Wenn Sie diesen Inhalt nun als Absatz darstellen wollen, müssen Sie es mit dem <p> Tag als solchen spezifizieren. Im HTML-Dokument würde ein Absatz so aussehen:

<p>Das ist meine Webseite</p>

Durch den Einsatz von weiteren Tags wie <h1> (Überschrift) oder <li> (Listen) lässt sich Ihre Webseite so Stück für Stück ordnen. HTML bestimmt somit die Reihenfolge und Priorität von Elementen, die durch entsprechende HTML-Befehle spezifiziert werden. Überschriften etwa folgen hierarchisch absteigend dem Prinzip <h1> (für die größte Überschrift), <h2> (für die nächstgrößere Überschrift), <h3>, <h4>, <h5> bis hin zur kleinsten Überschrift <h6>.

Weiterhin lassen sich mittels HTML der Dokumententyp, die technischen Details sowie der angezeigte Titel im Browser Ihrer Seite bestimmen.

Bei CSS handelt es sich hingegen nicht um eine Auszeichnungssprache wie HTML, sondern um eine sogenannte Stylesheet-Sprache. Wie der Name vermuten lässt, geht es bei CSS um die Darstellung der Inhalte: CSS erlaubt es Ihnen, das Aussehen Ihrer Seitenelemente festzulegen, sprich wie diese später im Browser ausgegeben werden.

Dies betrifft sowohl Bilder, Animationen als auch Ihren Text. Wenn wir nun den Beispielsatz von eben in Rot darstellen wollen, würde der Text im CSS-Dokument so aussehen:

 p {
color: red;
} 

Vorher müssen Sie aber die CSS-Datei mit dem HTML-Dokument verknüpfen. Wenn Ihr CSS beispielsweise als style.css abgespeichert ist, müssten Sie in der Kopfzeile (header) vom HTML-Dokument Folgendes eingeben:

<link href="styles/style.css" rel="stylesheet" type="text/css">

Nun wird Ihr Text „Das ist meine Webseite“ in Rot dargestellt. Sowohl HTML als auch CSS lassen sich in einem HTML-Texteditor (wie beispielsweise Brackets) schreiben. Mithilfe der Option „Live-Ansicht“ können Sie sich sofort im Browser anzeigen lassen, wie Ihre spätere Webseite aussehen würde.

Tipp:

Ein HTML-Dokument muss immer valide sein, um fehlerfrei ausgespielt zu werden. Auf der Seite https://validator.w3.org/#validate_by_input können Sie Ihr HTML-Dokument einfügen und prüfen lassen. Fehler werden angezeigt, ebenso Hinweise, wie diese zu beheben sind.

Wie ist ein CSS-Regelsatz strukturiert?

CSS wird in sogenannten Regelsätzen geschrieben und strukturiert. So beginnt jede CSS-Regel zunächst mit dem Selektor. Dieser bestimmt die HTML-Elemente, die gestaltet werden sollen. In folgendem Beispiel ist es „p“, was für „Paragraph“ bzw. einen Absatz in Ihrem Text-Inhalt steht.

Um genau zu verstehen, wie die einzelnen Bestandteile des CSS-Regelsatzes miteinander korrespondieren, haben wir Ihnen eine kleine definitorische Auflistung erstellt:

• Selektor (selector): Hier wählen Sie aus, welches HTML-Element Sie gestalten wollen (hier: p = Paragraph). Möchten Sie sich stattdessen ein anderes Element vornehmen, etwa die Titelüberschrift <h1>, müssen Sie nur den Selektor anpassen.

• Deklaration (declaration): Die zwei Bestandteile der Deklaration sind Eigenschaft und Eigenschaftswert. Hier wird bestimmt, welche Eigenschaft auf welche Weise geändert werden soll.

• Eigenschaft (property): Hier wird vermerkt, welche Eigenschaft des HTML-Elements Sie ändern möchten.

• Eigenschaftswert (property value): Hier wird die Darstellung des Elements verändert, indem der Eigenschaft ein Eigenschaftswert zugewiesen wird.

Syntax des CSS-Codes: So schreiben Sie einen Regelsatz

Werfen wir noch mal einen Blick auf das obige Beispiel und fassen wir zusammen: Die Eigenschaft (property) gibt an, welche Eigenschaft des HTML-Elements bestimmt werden soll. Die Eigenschaft „Farbe“ wird durch den Befehl „color“ determiniert. Der Eigenschaft muss jedoch auch ein bestimmter Wert zugewiesen werden. Dieser Eigenschaftswert (property value) wird rechts daneben, nach dem Doppelpunkt, angegeben. Im Beispiel wird der Eigenschaft „color“ der Wert „red“ gegeben.

Eine einzelne Regel, die dabei entsteht, bezeichnet man als Deklaration (declaration). Weiterhin müssen Sie beachten, dass hinter dem Selektor die Regeln stets innerhalb von geschwungenen Klammern stehen. Innerhalb einer Deklaration muss hinter der Eigenschaft ein Doppelpunkt gesetzt werden und nach dem Eigenschaftswert ein Semikolon.

Die Syntax des Codes muss unbedingt korrekt sein, denn nur dann können die Informationen korrekt gelesen und dargestellt werden.

CSS Class und CSS ID

Im CSS lassen sich verschiedene Elemente auch gleichzeitig designen. Mit „class“ versehene Elemente im HTML können im CSS gebündelt angesprochen und einheitlich verändert werden. Einen Gegensatz dazu bilden die CSS-IDs. Diese sind eindeutige Attribute und können nur jeweils einem Element im HTML-Code zugeschrieben werden. Die Unterschiede zwischen CSS Class und CSS ID sind jedoch nicht immer direkt augenfällig und erfordern eine intensivere Beschäftigung mit der CSS-eigenen Semantik.

Cascading Style Sheets im Text-Editor: Ein Beispiel

Um erste Schritte in Richtung CSS-Code zu gehen, können Sie sich in einem Text-Editor ausprobieren. Diese Programme sind auch online verfügbar und stehen vielfach kostenlos zur Verfügung. Für Ihr erstes Coding-Experiment empfehlen wir Ihnen den Editor von w3schools.com, den wir für unser folgendes Beispiel ebenfalls verwendet haben.

Quelle: Screenshot von Experiment im Editor von w3schools

Wie Sie sehen, haben wir im Editor mehrere Dinge angepasst: Innerhalb der dreieckigen Klammern stehen (in HTML) die Textinhalte der Überschrift <h1> und des Absatzes <p>. Innerhalb der geschweiften Klammern finden Sie darüber die CSS-Regelsätze, die die Darstellung der HTML-Inhalte festlegen. Diesen wollen wir uns nun näher zuwenden, weshalb wir sie hier für Sie einzeln beschrieben haben.

• Erster Regelsatz: Durch den Selektor „body“ haben wir den Textkörper angesprochen. Hier haben wir der Eigenschaft „background-color“ den Eigenschaftswert „orange“ zugewiesen, womit sich der Hintergrund unseres Textinhalts orange gefärbt hat.

• Zweiter Regelsatz: Durch den Selektor „h1“ haben wir die größte Überschrift angesprochen. Hier haben wir der Eigenschaft „color“ den Eigenschaftswert „white“ zugewiesen, womit sich die Überschrift weiß gefärbt hat. Zudem haben wir die Eigenschaft „text-align“ eingegeben und ihr den Wert „center“ zugewiesen, womit die Überschrift mittig in unserem Textinhalt platziert wurde.

• Dritter Regelsatz: Durch den Selektor „p" haben wir den Paragraphen bzw. Abschnitt angesprochen. Hier haben wir der Eigenschaft „font-family“ den Wert „verdana“ zugewiesen, womit die dargestellte Schriftart festgelegt wurde. Zudem haben wir der Eigenschaft „font-size“ den Wert „20px“ zugewiesen, was die Größe der Schriftart definiert hat.

Probieren Sie es doch selbst einmal aus!

CSS-Layout: Viele virtuelle Boxen

Jedes HTML-Element auf Ihrer Webseite besitzt eine Art „Box“, die aus mehreren Ebenen oder Bestandteilen zusammengesetzt ist und den Abstand zu anderen Elementen bestimmt, die ebenfalls automatisch von Boxen umgeben sind. Voreingestellte Abstände sorgen zum Beispiel dafür, dass Textpassagen oder Bilder untereinander und nicht überlappend dargestellt werden.

Um einzelne Elemente neu zu positionieren oder hervorzuheben, können Sie einfach die Begrenzungen und Positionen der Boxen verändern.

Eine Layout-Box hat folgende Bestandteile:

• Padding: Den Raum direkt um das Element herum, also den Innenabstand.

• Border: Eine Begrenzung um das Padding herum.

• Margin: Den Raum außerhalb der Begrenzung, der den Abstand zu anderen HTML-Elementen determiniert.

Quelle: Mozilla-CSS

Für jede dieser (und weiterer) Eigenschaften kann nun ein Eigenschaftswert zugeteilt werden, der dann die Darstellung beeinflusst. Im Code sähe das dann so aus:

 
h1 {
color: green;
text-align: center;
padding: 50px;
}

So haben Sie nun den Abstand Ihrer Überschrift gegenüber benachbarten Elementen erhöht und die Schriftfarbe in Grün geändert.

Quelle: Screenshot von Experiment im Editor von w3schools

CSS in eine HTML-Datei einbinden

Um CSS in HTML einzubinden, gibt es drei Varianten: Die Einbindung über den Quellcode, die Einbindung in den Anfang der HTML-Datei und die Einbindung über eine extra CSS-Datei.

1. Einbindung über den Quellcode

Möchten Sie CSS direkt im HTML-Quellcode verknüpfen, benötigen Sie dafür kein ausgelagertes CSS-Dokument. Die Deklarationen werden ganz einfach direkt hinter den Selektor geschrieben. Im Beispiel sieht das so aus:

Quelle: Screenshot aus Brackets Texteditor

Im Head ist weder ein CSS verknüpft, noch werden dort die Style-Angaben gemacht. Die Änderung findet direkt im HTML-Code statt, siehe Zeile 12:

 <h1> style=“color: red;“> Überschrift</h1> 

Unser Tipp:

Muss jedes Element manuell beschrieben werden, kostet dies ab einer gewissen Seitenlänge jedoch viel Zeit und Konzentration. Aufgrund dessen wird diese Form der Auszeichnung heute kaum noch benutzt – weniger arbeitsintensive Wege sind hier der neue Standard.

2. Einbindung am Anfang des Dokuments

Die Einbindung des CSS im Kopf des Dokuments hat den Vorteil, dass nicht – wie bei der Einbindung über den Quellcode – alle Elemente manuell benannt werden, sondern eine einzige Auszeichnung sich auf das gesamte Dokument bezieht. Auf diese Weise ist es möglich, schneller und einfacher gezielt alle <h1> oder alle <p> anzusprechen und zu verändern. Ein Beispiel:

Quelle: Screenshot aus Brackets Texteditor

Wie Sie in Zeile 9-13 sehen, wird das CSS im Head unter <style> eingebunden, statt hinter den einzelnen Elementen im Dokument. Hier greift die klassische Schreibweise von CSS-Bestimmungen: Jede Deklaration wird in geschweiften Klammern erfasst.

Unser Tipp:

Diese Variante wird häufiger genutzt, macht das Dokument aber automatisch länger und gegebenenfalls unübersichtlicher. Daher würden wir Ihnen auch hierzu nur eingeschränkt raten.

3. Ausgelagertes CSS-Dokument mit rel="stylesheet"

Die gängigste Variante, ein Style-Sheet in einem HTML-Dokument einzubinden, ist die des ausgelagerten CSS-Dokuments. Das bedeutet, dass weder im Header, noch im HTML-Element Style-Deklarationen vorgenommen werden, sondern in einem externen Dokument. Dieses benennt man zum Beispiel „style.css“ oder „design.css“. Auf dieses wird dann im <head> mit folgendem Befehl verwiesen: <link heref=“style.css rel=“stylesheet“ type=“text/css“>, siehe Zeile 9 – 12.

Quelle: Screenshot aus Brackets Texteditor

In Ihrem Texteditor sollten zwei unterschiedliche Dateien vorhanden sein: Eine „index.html“-Datei und eine CSS-Datei. Dabei spielt auch die Benennung eine Rolle: Die Endung „.html“ ist wichtig, damit die Datei im Texteditor und später im Upload richtig dargestellt wird. „index“ ist die Standardbenennung für Startseiten. Unterseiten können anderen Namen bekommen, müssen aber auch auf .html enden.

Wie genau Sie Ihre CSS-Datei benennen, bleibt Ihnen überlassen. Wichtig ist dabei nur, dass die Datei auf .css endet, damit Ihr Texteditor alle Style-Befehle richtig umsetzen kann. In unserem Beispiel werden die beiden Dateien auf der linken Seite angezeigt:

Quelle: Screenshot aus Brackets Texteditor

Nun können Sie problemlos zwischen ihrem HTML- und CSS-Dokument hin und her wechseln.

Die Deklarationen im CSS-Dokument erfolgen dann ähnlich wie in Variante zwei - mit dem Unterschied, dass die Einbindung nicht im Header sondern in einem gesonderten Dokument stattfindet. Das kann beispielsweise so aussehen:

Quelle: Screenshot aus Brackets Texteditor

In diesem Beispiel werden demnach alle <h1> mit roter Schrift auf grünem Hintergrund dargestellt. Zum Vergleich: Bei der Einbindung direkt im Quellcode müssten Sie alle <h1> manuell und einzeln mit dieser Deklaration ausstatten.

Unser Tipp:

Es ergeben sich zwei deutliche Vorteile, wenn Sie das Style-Sheet auslagern. Zum einen ist das HTML-Dokument nicht mir Style-Auszeichnungen überladen und zum anderen spart Ihnen das ausgelagerte Style-Sheet Arbeit, da die Fehleranfälligkeit minimiert wird und Änderungen schneller vorgenommen werden können.

CSS-Tricks: Mit kleinen Eingaben Großes bewirken

Neben den Basics zur Gestaltung Ihres HTML-Dokuments gibt es auch ambitioniertere Befehle, die Ihre Seite sowohl optisch als auch funktionell aufwerten. Möchten Sie Ihren Besuchern ein ganz besonderes Erlebnis bieten, sollten Sie sich die folgenden drei kleinen, aber wirksamen Style-Befehle für Ihr CSS-Dokument näher anschauen.

Parallax Scrolling

Parallax Scrolling ist ein spannender visueller Effekt, der beim Scrollen auf einer Webseite eintritt. Während Webseitenbesucher üblicherweise daran gewohnt sind, dass sich beim Herunterscrollen alle Elemente der Seite im selben Tempo verändern, sieht das beim Parallax Scrolling anders aus: Elemente, die sich im Vordergrund befinden, bewegen sich hier schneller als Elemente im Hintergrund. Dadurch wird die Illusion von Bildtiefe erzeugt.

Zur Veranschaulichung:

So verhält sich eine Webseite ohne Parallax Scrolling.

Und so verhält sich eine Webseite mit Parallax Scrolling.

Hover-Befehl

Beim Hover-Befehl handelt es sich um eine Pseudoklasse. Pseudoklassen sind Selektoren, die ein Element nur ansprechen, wenn dieses eine bestimmte Eigenschaft hat. So setzt der Hover-Effekt etwa nur dann ein, wenn ein User mit einem Element auf der Seite interagiert, indem er mit der Maus darüber fährt. Typische Einstellungen, die mittels Hover-Befehl festgelegt werden können:

• Ein Link wird hervorgehoben, sobald die Maus darüber hovert.

• Die Hintergrundfarbe ändert sich bei einer bestimmten Interaktion.

• Ein Bild vergrößert sich bzw. tritt in den Vordergrund, wenn der Cursor des Besuchers darüber schwebt.

Quelle: Screenshot aus Brackets Texteditor

Der obige Screenshot zeigt, wie sich ein Link neu darstellt, wenn ein Hover-Befehl eingestellt worden ist und die entsprechende Interaktion des Besuchers den Befehl auslöst. Dies ist besonders bei Links (und Calls-to-Action) hilfreich, um diese für den Nutzer zusätzlich hervorzuheben.

Border-Style

Wie bereits erwähnt, besitzt jeden HTML-Element eine Art „Box“. Die innere Begrenzung dieser nennt sich „border“. Sie lässt sich mit dem Befehl border-style und einem entsprechenden Eigenschafts-Wert in unterschiedlichsten Varianten darstellen.

So können Sie diesen Befehl etwa nutzen, um kleine Buttons zu gestalten, attraktive Infoboxen zu kreieren oder auch, um wichtige Inhalte hervorzuheben.

Hier ein paar Beispiele:

Quelle: Screenshot aus Brackets Texteditor

Quelle: Screenshot aus Brackets Texteditor

Quelle: Screenshot aus Brackets Texteditor

Tipp: Mit „border-width“ können Sie die Dicke der Linien verändern. Die Angaben erfolgen in px, da Pixel – im Gegensatz zu Zentimetern – international verwendet werden.

HTML- und CSS- Grundkenntnisse bilden das Fundament Ihrer Webseiten-Architektur. Beide Sprachen entwickeln sich stets weiter und bieten immer wieder neue innovative Möglichkeiten der Strukturierung und Darstellung von Webinhalten. Die hier vorgestellten CSS-Befehle zeigen dabei nur einen Bruchteil der bereits vorliegenden Designmöglichkeiten.

Da HTML- und CSS-Befehle sich wie Vokabeln lernen lassen, macht Übung den Meister: Probieren Sie sich am besten in einem Texteditor Ihrer Wahl aus und schauen Sie sich in der Live-Ansicht direkt Ihre Ergebnisse an. Viel Spaß beim Schreiben!

Titelbild: Visual Generation / iStock / Getty Images Plus