CSS: Die Grundlagen einfach erklärt

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. Wir geben Ihnen hier einen Überblick über die wichtigsten Begriffe rund um HTML und CSS. Lernen Sie, wie Sie in einem Texteditor erste CSS-Befehle einbinden, wie diese strukturiert sind und welche praktischen CSS-Tricks es gibt.

Was ist CSS??

CSS ist die Abkürzung für Cascading Style Sheets. Damit ist eine Formatierungssprache für HTML-, SVG- und XML-Dateien gemeint, mit der sich Websites gestalten lassen. Im CSS wird die Darstellung der Elemente auf einer Seite festgelegt, beispielsweise die Farbgebung, Abstände und Größe einzelner Seitenelemente.

Geschichte: Wie ist CSS entstanden?

In den 90er-Jahren, als das Web noch in den Kinderschuhen steckte, wurden HTML-Dateien sowohl für die Strukturierung des Inhalts als auch für das Design genutzt. Die Folge waren unübersichtliche Codes, die auch nur schwer zu bearbeiten waren.

CSS wurde 1994 von Håkon Wium Lie vorgeschlagen, um den Aufbau und das Design von Websites technisch zu trennen. Diese Trennung war notwendig, um die Gestaltung von Websites zu vereinfachen und zu standardisieren. 1996 wurde CSS Level 1 als offizieller Standard vom World Wide Web Consortium (W3C) veröffentlicht und bis heute profitieren wir von dieser Idee.

Ist CSS eine Programmiersprache?

Ein großer Irrtum, dem wir dabei immer wieder begegnen, ist die Definition von CSS als Programmiersprache. Das ist streng genommen nicht richtig. Es handelt sich vielmehr um eine Stylesheet-Sprache, die wiederum in einer Markup-Sprache (primär HTML) geschrieben wird.

Im Gegensatz zu Programmiersprachen, die Logik und Algorithmen verwenden, um Berechnungen durchzuführen oder Daten zu verarbeiten, legt CSS lediglich das Design und die Optik einer Seite fest. Weitere und tiefgehende Funktionalitäten, wie sie Programmiersprachen wie JavaScript oder C++ bieten, sind hier Fehlanzeige.

Leitfaden: CSS und HTML für Anfänger

Füllen Sie das Formular aus, um die kostenlosen Leitfaden zu erhalten.

• Was ist HTML?
• Was ist CSS?
• CSS- & HTML-Codes, die Sie kennen sollten
• Was sind beliebte Fehlerquellen?

Jetzt kostenlos herunterladen

Was ist HTML und CSS?

HTML (Hypertext Markup Language) ist, wie bereits angedeutet, die Sprache, die die Struktur einer Datei bestimmt, während CSS (Cascading Style Sheets) die Gestaltung beziehungsweise Darstellung der einzelnen Elemente beeinflusst. Beide Sprachen entwickeln sich kontinuierlich weiter. Die aktuelle CSS-Version ist CSS3, bei HTML ist es HTML5.

Grundlagen von HTML

Wie CSS ist auch HTML keine Programmiersprache im klassischen Sinne. Es handelt sich vielmehr um eine Auszeichnungssprache. Konkret ausgedrückt: HTML strukturiert Ihre Website, indem festgelegt wird, welche Textinhalte 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 Website:

Das ist meine Website

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

<p>Das ist meine Website</p>

Durch den Einsatz weiterer Tags wie <h1> (Überschrift) oder <li> (Listen) lässt sich Ihre Website 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.

Grundlagen von CSS

Bei CSS handelt es sich hingegen nicht um eine Auszeichnungssprache wie HTML, sondern wie beschrieben um eine 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 Website“ 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 Website aussehen würde. Wir zeigen Ihnen im weiteren Verlauf des Artikels noch verschiedene Beispiele, wie Sie CSS lernen und anwenden können.

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

Was kann man mit CSS alles machen?

Mit CSS können Sie vereinfacht gesprochen das Aussehen und Layout von Websites programmieren. Dazu zählen jegliche sichtbare Elemente – Farben, Schriftarten, Abstände, Rahmen, Hintergrundbilder und so weiter. Außerdem können Sie das Seitenlayout durch Flexbox oder Grid-Layout steuern, Animationen und Übergänge hinzufügen und responsives Design umsetzen.

Anwendungsbereiche und Vorteile von CSS

Die Anwendungsbereiche von CSS liegen also im Webdesign – hier sorgt es in Verbindung mit HTML dafür, dass Websites im Webbrowser am Ende so aussehen, wie Sie es sich vorstellen. Die Vorteile liegen aus unserer Sicht klar auf der Hand:

• Im Vergleich zu Vor-CSS-Zeiten trennt die Stylesheet-Sprache den Code. Dabei sorgt HTML für den Inhalt, CSS für das Design. Das macht die Arbeit einfacher.
• Mit CSS können Stile zentral in externen Stylesheets (CSS-Klassen) definiert und auf mehrere Websites angewendet werden. Diese Wiederverwendbarkeit spart oft viel Zeit.
• Mit CSS können responsive Designs via Media Queries umgesetzt werden.
• Externe Stylesheets können zwischengespeichert werden, was die Ladezeiten der Seiten reduziert.

Zudem gibt es CSS-Frameworks wie Bootstrap oder Foundation, die ein CSS-Grid als Basis bieten, auf dem Sie verschiedene Gestaltungselemente verwenden können. Sie können sich das wie eine Art Template vorstellen, das Ihnen das Programmieren erleichtert.

Wie hängen CSS und SEO zusammen?

CSS spielt auch im Bereich der Suchmaschinenoptimierung (SEO) eine Rolle. Denn: Die Struktur und auch das Design einer Homepage sind Einflussfaktoren auf das Ranking bei Google & Co. Gut optimierter CSS-Code verbessert die Ladegeschwindigkeit einer Seite, was auch für die Bewertung positiv aufgefasst wird.

Grundsätzlich gilt: Eine klare und saubere CSS-Struktur hilft Crawlern, den Inhalt der Seite effizienter zu indizieren, während ein ansprechendes Design die Verweildauer der Nutzerinnen und Nutzern erhöht – auch das zahlt natürlich auf das Ranking in den SERPs ein.

Wie ist der Aufbau einer CSS-Anweisung strukturiert?

Kommen wir zur Praxis. Wenn Sie CSS lernen möchten, müssen Sie den Aufbau von CSS verstehen.

CSS wird in sogenannten Anweisungen, auch Regelsätze genannt, geschrieben und strukturiert. So beginnt jede CSS-Regel zunächst mit dem Selektor. Dieser bestimmt die HTML-Elemente, die gestaltet werden sollen. In folgendem CSS-Beispiel ist es „p“, was für „Paragraph“ bzw. einen Absatz in Ihrem Textinhalt 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 Charakteristika auf welche Weise geändert werden soll.
• Eigenschaft (property): Hier wird vermerkt, welches Merkmal des HTML-Elements Sie anpassen 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, welches Merkmal 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 CSS-Beispiel wird der Eigenschaft „color“ der Wert „red“ gegeben.

Eine einzelne Regel, die dabei entsteht, wird als Deklaration (declaration) bezeichnet.

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.

Leitfaden: CSS und HTML für Anfänger

Füllen Sie das Formular aus, um die kostenlosen Leitfaden zu erhalten.

• Was ist HTML?
• Was ist CSS?
• CSS- & HTML-Codes, die Sie kennen sollten
• Was sind beliebte Fehlerquellen?

Jetzt kostenlos herunterladen

Cascading Style Sheets im Texteditor: Ein Beispiel

Um erste Schritte in Richtung CSS-Code zu gehen, können Sie sich in einem Texteditor 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 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 beziehungsweise 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. Der Editor von w3schools.com ist (wie viele weitere) kostenlos nutzbar.

CSS-Layouts erstellen: Viele virtuelle Boxen

Jedes HTML-Element auf Ihrer Website 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 CSS-Eigenschaften:

• 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: Screenshot Mozilla-CSS

Für jede dieser (und weiterer) CSS-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 w3schools

CSS in die Website via HTML einbinden

Um CSS in Ihre Website via 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 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 Brackets Texteditor

Wie Sie in Zeile 9 bis 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 ist 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 bis 12.

Quelle: Screenshot 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 andere 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 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 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 mit 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.

Leitfaden: CSS und HTML für Anfänger

Füllen Sie das Formular aus, um die kostenlosen Leitfaden zu erhalten.

• Was ist HTML?
• Was ist CSS?
• CSS- & HTML-Codes, die Sie kennen sollten
• Was sind beliebte Fehlerquellen?

Jetzt kostenlos herunterladen

CSS-Tricks: Mit kleinen Eingaben Großes bewirken

Neben den Basics zur Gestaltung Ihres HTML-Dokuments gibt es auch ambitioniertere CSS-Befehle, die Ihre Seite sowohl optisch als auch funktionell aufwerten. Möchten Sie Ihren Besucherinnen und 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 Website eintritt. Während Websitebesucherinnen und -besucher üblicherweise daran gewöhnt 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 Website ohne Parallax Scrolling.

Und so verhält sich eine Website 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 oder eine Userin mit einem Element auf der Seite interagiert, indem er oder sie 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 oder tritt in den Vordergrund, wenn der Cursor des Besuchenden darüber schwebt.

Quelle: Screenshots Brackets Texteditor

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

Border-Style

Wie bereits erwähnt, besitzt jedes 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:

{border-style: dotted} erzeugt eine gepunktete Linie:

Quelle: Screenshot Brackets Texteditor

{border-style: double} erzeugt doppelte Linien:

Quelle: Screenshot Brackets Texteditor

{border-style: groove} erzeugt zweifarbige Linien:

Quelle: Screenshot 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.

Welche Risiken und typischen Fehler gibt es beim Programmieren mit CSS?

Wenn Sie mit CSS arbeiten, werden Sie schnell merken, dass es die immer gleichen typischen Fehler sind, die ein Risiko darstellen, dass am Ende etwas nicht funktioniert. Wir haben die kleineren Fehler zusammengetragen, die immer mal wieder passieren:

• „Falsche“ Farbwerte werden angezeigt
  • Fehler: Die Schriftfarbe wurde mit einem bestimmten Farbwert wie color: 00ff00; definiert, bleibt aber schwarz statt grün.
  • Lösung: Es fehlt die erforderliche Raute. Richtig wäre color: #00ff00;
• Einzelne CSS-Angaben werden nicht angezeigt
  • Fehler: Trotz Definition werden CSS-Angaben wie Schrift- und Hintergrundfarbe nicht umgesetzt.
  • Lösung: Neben dem Farbwert für color: #00ff00; fehlt das Semikolon, das Sie nach jeder CSS-Angabe setzen müssen. Lediglich beim letzten Element darf es fehlen. Auch der Doppelpunkt hinter dem Farbwert background-color: #a8a8a8: ist falsch. Richtig wäre background-color: #a8a8a8
• CSS setzt Schriftgrößen, Breiten- und Höhenangaben nicht um
  • Fehler: Es fehlt meistens die Angabe der Maßeinheit.
  • Lösung: Stellen Sie sicher, dass Sie die Maßeinheit (etwa px, em) angeben.
• Trotz Maßeinheit zeigt CSS Größenangaben nicht an
  • Fehler: Flüchtigkeitsfehler wie ein Leerzeichen zwischen dem Wert und der Einheit.
  • Lösung: Zwischen dem Wert und der Einheit darf kein Leerzeichen stehen (etwa width: 250px statt width: 250 px).

Noch ein weiterer Tipp, der zwar kein Code-Fehler ist, aber dennoch oft zur Verzweiflung führt: fehlende oder unzureichende Kommentare. Wenn Sie im Team am CSS-Code arbeiten, sollten Sie vor allem bei großen Stylesheets mit Anmerkungen zum besseren Verständnis arbeiten.

Fazit: CSS ist wie Vokabeln lernen

HTML- und CSS-Grundkenntnisse bilden das Fundament Ihrer Website-Architektur. Beide Sprachen entwickeln sich stets weiter und bieten immer wieder neue innovative Möglichkeiten zur 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 CSS lernen und Code schreiben!

Titelbild: HubSpot