CSS Grundkurs

CSS GRUNDKURS

Dieser Leitfaden richtet sich an alle, die noch nahezu keine Erfahrung mit der Erstellung von Webseiten haben. CSS wird mit HTML benötigt und kann am Anfang unübersichtlich wirken, aber das Prinzip ist einfach: Ich erkläre hier Schritt für Schritt die absoluten Grundlagen, damit du am Ende ohne Vorkenntnisse deine erste eigene kleine und dieses mal auch schöne Webseite erstellen kannst.
Falls du noch keine HTML Kenntnisse hast, schau dir bitte erst den HTML Grundkurs von mir an! Ansonsten bringt dir CSS nichts.

Was ist CSS?

CSS steht für “Cascading Style Sheets” (in Deutsch etwa: gestufte Gestaltungsbögen). Während HTML dem Browser sagt, was ein Element ist (z. B. “Das ist eine Überschrift”), sagt CSS dem Browser, wie dieses Element aussehen soll (z. B. “Diese Überschrift soll blau und zentriert sein”).
HTML und CSS arbeiten Hand in Hand. HTML ist die Struktur, CSS ist das Design.

Wie sieht ein CSS-Befehl aus?

Ein CSS-Befehl folgt immer einem strengen, aber simplen Muster. Er besteht aus drei wichtigen Teilen:

  1. Der Selektor: Er bestimmt, welches HTML-Element verändert werden soll (z. B. alle <h1>-Überschriften).

  2. Die Eigenschaft: Sie bestimmt, was genau an dem Element verändert wird (z. B. die Farbe oder die Schriftgröße).

  3. Der Wert: Er bestimmt das genaue Ergebnis (z. B. blau oder 20 Pixel).

Ein Beispiel in der Theorie: Wenn du möchtest, dass alle Textabsätze (<p>) rot dargestellt werden, sieht das in CSS so aus:

HTML Editor
</>
p { color: red; }
Live Vorschau
👁️

Wichtig: Die Gestaltungsbefehle stehen immer in geschweiften Klammern { }. Jede Eigenschaft wird mit einem Doppelpunkt : vom Wert getrennt, und am Ende jedes Befehls steht ein Semikolon

CSS in HTML einbauen: Das Praxis-Beispiel

Für den Anfang ist es am einfachsten, das CSS direkt in deine bestehende HTML-Datei zu schreiben. Dafür nutzen wir den <style>-Tag. Dieser Tag wird oben im <head>-Bereich deines HTML-Gerüsts platziert, da es sich um Hintergrundinformationen für den Browser handelt.

Hier ist ein kompletter Code mit minimalem Inhalt, den du direkt in deinen Texteditor kopieren, als .html-Datei speichern und im Browser öffnen kannst, um den Effekt zu sehen:

HTML Editor
</>
<!DOCTYPE html> <html> <head> <style> body { background-color: #e6f2ff; /* Hintergrundfarbe */ font-family: Arial, sans-serif; /* Schriftart */ /* Das Design für die Hauptüberschrift */ h1 { color: darkblue; /* Macht die Schrift dunkelblau */ text-align: center; /* Setzt den Text in die Mitte */ } /* Das Design für normale Textabsätze */ p { color: #D80047; /* Eine Rote Farbe für den Text! */ font-size: 14px; /* Macht die Schrift etwas größer */ } </style> </head> <body> <h1>Willkommen in der Welt des Designs!</h1> <p>Dies ist unser erster Textabsatz. Durch CSS ist er nun nicht mehr in der langweiligen Standardschriftart des Browsers, sondern in Arial geschrieben und etwas größer.</p> <p>Der Hintergrund der Live-Vorschau hat zudem eine leichte Farbe bekommen, weil wir den "body" in CSS angesprochen haben.</p> </body> </html>
Live Vorschau
👁️

Was haben wir hier genau gemacht?

  • background-color: Ändert die Hintergrundfarbe. Du kannst einfache englische Farbnamen (wie red, blue, green) nutzen oder Hex-Codes (wie #e6f2ff), mit denen sich Millionen von Farben anzeigen lassen.

  • text-align: center;: Schiebt das ausgewählte Element exakt in die waagerechte Mitte des Bildschirms.

  • font-family: Ändert die Schriftart. Man gibt oft eine zweite Schriftart (hier sans-serif) als Rückfall-Option an, falls der Computer des Nutzers die erste Schriftart nicht installiert hat.

  • font-size: Bestimmt die Größe des Textes. In der Webentwicklung wird dies oft in px (Pixel) angegeben.

CSS Klassen

Bisher haben wir gesehen, wie man mit CSS grundlegende Designs festlegt. Wenn wir im CSS-Bereich beispielsweise p { color: red; } schreiben, werden ausnahmslos alle Textabsätze auf der gesamten Webseite rot gefärbt.

Aber was ist, wenn du nur eine ganz bestimmte Zeile hervorheben möchtest, während der restliche Text normal bleibt? Genau hierfür benötigst du Klassen (Classes) und IDs. Mit ihnen kannst du Elementen gewissermaßen Namensschilder anheften, um sie gezielt anzusprechen.

1. Klassen (Classes): Für wiederkehrende Elemente

Eine Klasse verwendest du, wenn du mehrere Elemente auf deiner Seite gleich aussehen lassen möchtest. Stell dir vor, du möchtest auf deiner Webseite verschiedene System-Warnungen oder besondere Items optisch hervorheben. (Zum Beispiel die Notizen, Werbeanzeigen, Titel (H1) hier auf Hamstergames)

  • Im HTML: Du gibst dem Element das Attribut class="dein-name".

  • Im CSS: Du sprichst diese Klasse an, indem du einen Punkt (.) vor den Namen setzt.

2. IDs: Für absolut einzigartige Elemente

Eine ID ist wie ein Fingerabdruck. Sie darf nur ein einziges Mal pro HTML-Seite vergeben werden. Du nutzt sie für Hauptelemente, die es nur einmal gibt, wie zum Beispiel die Haupt-Navigation ganz oben oder den Fußbereich (Footer) ganz unten.

  • Im HTML: Du gibst dem Element das Attribut id="dein-name".

  • Im CSS: Du sprichst diese ID an, indem du eine Raute (#) vor den Namen setzt.

HTML Editor
</>
<!DOCTYPE html> <html> <head> <title>Klassen und IDs testen</title> <style> /* 1. Standard-Design für ALLE normalen Absätze */ p { color: #ffffff; font-family: Arial, sans-serif; } /* 2. Design für die KLASSE "warnung" (Beachte den Punkt!) */ .warnung { color: red; font-weight: bold; /* Macht die Schrift extra fett */ } /* 3. Design für die ID "haupt-box" (Beachte die Raute!) */ #haupt-box { background-color: #2f2f2f; text-align: center; } </style> </head> <body> <div id="haupt-box"> <h1>Willkommen im System</h1> <p>Das ist ein ganz normaler Textabsatz. Er bekommt das Standard-Grau.</p> </div> <p class="warnung">Achtung: Wartungsarbeiten stehen an!</p> <p>Das ist wieder ein ganz normaler Textabsatz ohne Besonderheiten.</p> <p class="warnung">Bitte speichere deinen Fortschritt.</p> </body> </html>
Live Vorschau
👁️

Box Modell

Stell dir vor, jedes einzelne Element auf einer Webseite – egal ob es ein Textabsatz, eine Überschrift oder ein Bild ist – steckt in einer eigenen, rechteckigen Kiste. In der Fachsprache nennt man das Box-Modell. (Die Frage ist eher, wer Spricht in Fachsprache? Ich inkludiere es jedoch, da es den Begriff )

Damit diese Kisten auf deiner Webseite nicht alle kreuz und quer aneinanderkleben, kannst du Abstände definieren. Dabei gibt es zwei grundlegend verschiedene Arten von Abständen.
(Im übrigen, die Webseite hier ist VOLL mit Padding und Margin, sonst ist einfach alles unschön aneinander!)

1. Padding: Der Innenabstand

Das Padding ist der Abstand innerhalb deiner Kiste. Es ist der Freiraum zwischen deinem eigentlichen Inhalt (zum Beispiel deinem Text) und der Außenwand der Kiste.

  • Ein gutes Beispiel: Stell dir vor, du verschickst eine zerbrechliche Vase in einem Karton. Damit die Vase nicht direkt an die harte Pappe stößt, stopfst du den Karton mit Luftpolsterfolie aus. Diese Luftpolsterfolie ist dein Padding.

  • Auf der Webseite: Wenn du einen Text in einer Box mit farbigem Hintergrund hast, sorgt das Padding dafür, dass der Text nicht unangenehm direkt am Rand der Box klebt, sondern etwas “Luft zum Atmen” hat.

2. Margin: Der Außenabstand

Das Margin ist der Abstand außerhalb deiner Kiste. Es bestimmt, wie weit deine Kiste von anderen Kisten (oder dem Rand des Bildschirms) entfernt geschoben wird.

  • Ein gutes Beispiel: Das ist quasi die “persönliche Komfortzone” deiner Kiste. Wenn sich zwei Personen unterhalten und einen halben Meter Abstand zueinander halten, ist dieser halbe Meter das Margin.

  • Auf der Webseite: Wenn du zwei Text-Boxen untereinander hast und nicht möchtest, dass sie sich berühren, gibst du der oberen Box ein Margin nach unten. Dadurch drückt sie die untere Box von sich weg.

Die Grenze dazwischen: Der Border (Rahmen)

Um zu verstehen, wo Padding aufhört und Margin anfängt, gibt es die Border (Rahmen). Der Rahmen ist die eigentliche Wand deiner Kiste. Alles, was sich innerhalb der Wand befindet, ist Padding. Alles, was sich außerhalb der Wand befindet, ist Margin. Den Rahmen kannst du in CSS sichtbar machen (zum Beispiel als schwarze Linie) oder unsichtbar lassen.

Abstände gezielt steuern

Wenn du in CSS einfach nur margin: 20px; schreibst, bekommt deine Box an allen vier Seiten (oben, unten, links und rechts) exakt 20 Pixel Abstand.

Oft möchtest du aber vielleicht nur nach unten hin etwas Platz schaffen, damit der nächste Text nicht so nah an deiner Box klebt, während die Seiten unverändert bleiben sollen.

Dafür gibt es in CSS für jede Himmelsrichtung einen eigenen Befehl:

Für den Außenabstand (Margin):

  • margin-top: Abstand nach oben

  • margin-right: Abstand nach rechts

  • margin-bottom: Abstand nach unten

  • margin-left: Abstand nach links

Für den Innenabstand (Padding):

  • padding-top: Polsterung oben

  • padding-right: Polsterung rechts

  • padding-bottom: Polsterung unten

  • padding-left: Polsterung links

Der Profi-Trick: Das Uhrzeiger-Prinzip

Statt vier verschiedene Zeilen Code zu schreiben, nutzen Webdesigner oft eine Kurzschreibweise. Du kannst einfach vier Zahlen hintereinander schreiben. Der Browser liest diese Zahlen immer im Uhrzeigersinn, beginnend bei 12 Uhr (oben):

margin: 10px 20px 30px 40px;

  1. 10px = Top

  2. 20px = Right

  3. 30px = Bottom

  4. 40px = Left

(Das Gleiche funktioniert natürlich auch mit padding.)

HTML Editor
</>
<!DOCTYPE html> <html> <head> <title>Abstände in der Praxis</title> <style> body { font-family: Arial, sans-serif; } .info-box { background-color: black; border: 2px solid #333; /* Dunkler Rahmen */ padding-top: 30px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; /* Wir schieben das nächste Element nur nach UNTEN weg */ margin-bottom: 40px; } /* Ein Hamster Beschwör Knopf */ .klick-mich { background-color: darkblue; color: white; /* Padding: 10px oben/unten, 20px links/rechts */ padding: 10px 20px; /* Margin: 50px Abstand nur nach links */ margin-left: 50px; } </style> </head> <body> <h2>Unsere Abstands-Testseite</h2> <div class="info-box"> HEHE ein kleiner Text zum Ärgern. Dank <b>padding-top</b> und <b>padding-bottom</b> hat dieser Text viel Luft nach oben und unten zum Rahmen. Durch das <b>margin-bottom</b> wird alles, was nach dieser Box kommt, weit nach unten weggedrückt. (Der Arme Knopf!) </div> <span class="klick-mich">Ich bin ein Button ohne Funktion</span> </body> </html>
Live Vorschau
👁️
ZUR ÜBERSICHT
Alle Posts
INHALT