Glückwunsch!

Glückwunsch, du hast den CSS-Kurs abgeschlossen! Du hast das Aussehen einer ganzen Webseite allein gestaltet: ihre Schriften, Farben, Abstände und ihr Layout.

Das hast du im Kurs gelernt:

CSS beschreibt, wie eine Seite aussieht. Eine Regel besteht aus einem Selektor und Deklarationen der Form Eigenschaft: Wert. CSS kann im Attribut style, im Element style oder, am häufigsten, in einem externen Stylesheet stehen, das mit dem Element link eingebunden wird.
Selektoren wählen Elemente nach Typ, Klasse, ID oder Attribut oder nach ihrem Zustand, etwa :hover. Sie lassen sich gruppieren, verketten und kombinieren, um Nachfahren oder Kinder auszuwählen.
Wenn mehrere Regeln dasselbe Element gestalten, gewinnt die Regel mit dem spezifischeren Selektor, und bei gleicher Spezifität die später geschriebene. Das ist die Kaskade. Manche Eigenschaften, etwa die Textfarbe und die Schrift, werden von Kindelementen geerbt.
Farben lassen sich als Namen, in RGB, als Hex-Codes oder in HSL schreiben, auch halbtransparent. Die Eigenschaft opacity macht ein ganzes Element durchsichtig.
Text: Schriftfamilien mit Ersatzschriften, Webschriften, Stärke und Größe der Schrift (in px oder rem), Zeilenhöhe und Ausrichtung.
Das Box-Modell: Inhalt, Padding, Rahmen und Margin. Breite und Höhe in verschiedenen Einheiten, abgerundete Ecken, box-sizing und overflow.
Der normale Fluss und wie display und position ihn verändern.
Flexbox, um Elemente in einer Zeile oder einer Spalte anzuordnen, und CSS Grid für Zeilen und Spalten gleichzeitig.

Speichere deine Seite. Eine Seite mit Stylesheet besteht aus zwei Dateien, und sie müssen im selben Ordner liegen:

Lege auf deinem Computer einen neuen Ordner an, z. B. meine-seite.
Öffne einen einfachen Texteditor, etwa Editor unter Windows oder TextEdit auf dem Mac (im Menü Format auf einfachen Text umgestellt), oder einen Code-Editor wie Visual Studio Code. Füge den Code von index.html ein und speichere ihn im Ordner als index.html.
Erstelle auf dieselbe Weise eine zweite Datei mit dem Code von style.css und speichere sie im selben Ordner als style.css.
Doppelklicke auf index.html, und die Seite öffnet sich in deinem Browser, samt Stilen.

Warum derselbe Ordner? href="style.css" ist eine relative Adresse: Der Browser sucht die Datei style.css in dem Ordner, in dem index.html liegt. Ist sie nicht dort, erscheint die Seite ohne Stile. Wenn du deinen eigenen Code nicht gespeichert hast, kannst du hier aus dem Editor unsere Seite speichern.

Die Schrift von Google Fonts wird aus dem Internet geladen. Ohne Verbindung verwendet der Browser die Ersatzschrift aus deiner font-family, genau dafür ist sie da. Und wie im HTML-Kurs gilt: Achte auf Bilder. Eine Adresse wie /learn/html/cats.webp funktioniert nur auf unserer Website. Verwende die vollständige Adresse des Bildes, https://www.startcoder.com/learn/html/cats.webp, oder speichere das Bild im selben Ordner und schreibe nur seinen Dateinamen.

Wie geht es weiter?

Responsives Design. Mit Media Queries (@media-Regeln) setzt du manche Stile nur auf schmalen oder nur auf breiten Bildschirmen ein, zum Beispiel um die Karten auf einem Handy in einer einzigen Spalte zu zeigen.
Übergänge und Animationen. Mit der Eigenschaft transition geschieht eine Änderung bei :hover nicht auf einmal, sondern sanft, und mit animation bringst du Elemente in Bewegung.
JavaScript. HTML gibt einer Seite ihren Inhalt, CSS ihr Aussehen, und JavaScript erweckt sie zum Leben: Es kann auf Klicks reagieren, den Inhalt der Seite ändern oder mit den Daten aus einem Formular arbeiten. Mach weiter mit dem JavaScript-Kurs.

Anweisungen

Glückwunsch zum Abschluss des CSS-Kurses! Speichere deine Seite auf deinem Computer und mach weiter mit dem JavaScript-Kurs, wenn du so weit bist.

Zurück

Glückwunsch!

Glückwunsch, du hast den CSS-Kurs abgeschlossen! Du hast das Aussehen einer ganzen Webseite allein gestaltet: ihre Schriften, Farben, Abstände und ihr Layout.

Das hast du im Kurs gelernt:

CSS beschreibt, wie eine Seite aussieht. Eine Regel besteht aus einem Selektor und Deklarationen der Form Eigenschaft: Wert. CSS kann im Attribut style, im Element style oder, am häufigsten, in einem externen Stylesheet stehen, das mit dem Element link eingebunden wird.
Selektoren wählen Elemente nach Typ, Klasse, ID oder Attribut oder nach ihrem Zustand, etwa :hover. Sie lassen sich gruppieren, verketten und kombinieren, um Nachfahren oder Kinder auszuwählen.
Wenn mehrere Regeln dasselbe Element gestalten, gewinnt die Regel mit dem spezifischeren Selektor, und bei gleicher Spezifität die später geschriebene. Das ist die Kaskade. Manche Eigenschaften, etwa die Textfarbe und die Schrift, werden von Kindelementen geerbt.
Farben lassen sich als Namen, in RGB, als Hex-Codes oder in HSL schreiben, auch halbtransparent. Die Eigenschaft opacity macht ein ganzes Element durchsichtig.
Text: Schriftfamilien mit Ersatzschriften, Webschriften, Stärke und Größe der Schrift (in px oder rem), Zeilenhöhe und Ausrichtung.
Das Box-Modell: Inhalt, Padding, Rahmen und Margin. Breite und Höhe in verschiedenen Einheiten, abgerundete Ecken, box-sizing und overflow.
Der normale Fluss und wie display und position ihn verändern.
Flexbox, um Elemente in einer Zeile oder einer Spalte anzuordnen, und CSS Grid für Zeilen und Spalten gleichzeitig.

Speichere deine Seite. Eine Seite mit Stylesheet besteht aus zwei Dateien, und sie müssen im selben Ordner liegen:

Lege auf deinem Computer einen neuen Ordner an, z. B. meine-seite.
Öffne einen einfachen Texteditor, etwa Editor unter Windows oder TextEdit auf dem Mac (im Menü Format auf einfachen Text umgestellt), oder einen Code-Editor wie Visual Studio Code. Füge den Code von index.html ein und speichere ihn im Ordner als index.html.
Erstelle auf dieselbe Weise eine zweite Datei mit dem Code von style.css und speichere sie im selben Ordner als style.css.
Doppelklicke auf index.html, und die Seite öffnet sich in deinem Browser, samt Stilen.

Wie geht es weiter?

Responsives Design. Mit Media Queries (@media-Regeln) setzt du manche Stile nur auf schmalen oder nur auf breiten Bildschirmen ein, zum Beispiel um die Karten auf einem Handy in einer einzigen Spalte zu zeigen.
Übergänge und Animationen. Mit der Eigenschaft transition geschieht eine Änderung bei :hover nicht auf einmal, sondern sanft, und mit animation bringst du Elemente in Bewegung.
JavaScript. HTML gibt einer Seite ihren Inhalt, CSS ihr Aussehen, und JavaScript erweckt sie zum Leben: Es kann auf Klicks reagieren, den Inhalt der Seite ändern oder mit den Daten aus einem Formular arbeiten. Mach weiter mit dem JavaScript-Kurs.