CSS lernen – Was ist CSS?

Was ist CSS

Wenn du schon einmal in HTML deine erste Website erstellt hast, warst du vielleicht, so ging es mir damals zumindest, ein klein wenig enttäuscht vom Aussehen der Website. Ich hab mir damals gedacht, na ja gut, rein technisch ist das vielleicht eine Website aber veröffentlichen möchte ich dieses Ergebnis nicht.

Oft fängt man ja beim Programmieren lernen mit damit an, das typische „Hello World!“ mit HTML darzustellen.
Auch wenn dies ein erstes Ergebnis ist, ist es dennoch sicherlich nicht das was du dir unter deiner ersten Website vorgestellt hast. Vor allem optisch.

Wie du dich vielleicht aus dem HTML-Kurs erinnerst, legt man mit HTML die Struktur einer Website fest, also definiert was eine Überschrift, ein Header-Bereich, eine Sidebar ein Bild und so weiter ist. Und du fügst die Inhalte in deine Website ein.

Wenn du dies getan hast, willst du deine Website sicherlich auch optisch anpassen. Und genau dafür brauchst du CSS. Wie CSS funktioniert und wie du mit der Hilfe von CSS das Aussehen deiner Website nach deinen Wünschen anpasst, lernst du in diesem Kurs.

Definition

CSS steht für Cascading Style Sheets also aus dem englischen frei übersetzt so etwas wie eine hintereinander geschaltete Anordnung von Styling-Befehlen. Klingt jetzt erstmal kompliziert, ist aber eigentlich super einfach. Im Grunde ist CSS nur eine Liste an Befehlen an den Browser, wie er die HTML-Elemente darstellen soll.

Dabei gehst du immer gleich vor. Du definierst, welches HTML-Element du verändern willst und schreibst dann in geschweifte Klammern die Liste an Befehlen, wie z.B. Textfarbe bitte in einem dunklen Grau und das Bild bitte mit einem Schlagschatten. Der Browser führt diese Befehle dann brav aus und macht deine Website richtig schick.

Die ersten Zeilen CSS

Sage wir also du hast mit HTML einige Inhalte in deine Website eingefügt, wie hier eine Überschrift, etwas Text in drei Containern.

Dann sieht das Ganze im Browser erstmal recht langweilig aus.

Fügen wir nun einige CSS-Befehle hinzu für das gesamte Dokument, die Textabsätze und die drei Inhaltsboxen, sieht das ganze schon deutlich spannender aus, oder?

Hier das Ergebnis im Browser:

Noch ein Beispiel

Du schreibst also die Inhalte der Struktur in HTML und stylst diese dann mit CSS. Du könntest also ein HTML-Dokument vollkommen anders aussehen lassen, wenn du das CSS veränderst. Ein Projekt namens CSS-Zen-Garden . Hier hat der Entwickler Dave Shea ein HTML-Dokument mit CSS gestyled und öffentlich dazu aufgerufen, dass andere Entwickler dasselbe HTML-Dokument nach ihren Vorstellungen stylen. Mittlerweile haben hunderte von Entwicklern dies getan. Das Ergebnis kannst du dir auf der CSS-Zen-Garden-Website ansehen.

Klick dich einmal durch die unterschiedlichen Ergebnisse zu sehen, um zu verstehen, dass ein und dasselbe HTML-Dokument durch anderes CSS ein völlig anderes Aussehen erhält.

CSS und HTML zusammen

Eine Website besteht also aus mehr als nur HTML. Mit CSS veränderst du das Aussehen deiner Website. Die Kombination deines HTML-Dokuments und deines CSS-Dokuments ergibt dann das was du im Browser siehst – deiner schicke neue Website.

Das war der Einstieg in CSS. In den kommenden Wochen folgen weitere, sehr detaillierte Tutorials zu CSS, in denen auch die fortgeschrittenen Leser unter euch sicher noch etwas lernen können.

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.