Was ist CSS?

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 1 von 76.

CSS (Cascading Style Sheets) ist die Sprache, die festlegt, wie HTML-Elemente aussehen. Sie ist leistungsstark und unverzichtbar für die Gestaltung von Webseiten und ermöglicht es dir, mühelos optisch ansprechende und gut gestaltete Websites zu erstellen.

Es arbeitet Hand in Hand mit HTML, um deine Inhalte zum Leben zu erwecken und einfachen Text und Elemente in ansprechende, schöne Layouts zu verwandeln.

Mit CSS kannst du das Erscheinungsbild jedes Aspekts deiner Website steuern, von Farben und Schriftarten bis hin zu Abständen und Positionierung.

Aufgabe

Einfach

Klicke auf die Schaltfläche zum Ausführen des Codes, um deinen ersten CSS-Code auszuführen.

Bonus: Versuche, die Farbe des Absatzes zu ändern! Findest du heraus, wie das geht?

Probier es selbst

<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>Hello CSS!</p>
  </body>
</html>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Styling mit CSS

1Einführung

Was ist CSS?CSS-Syntax CSS-Kommentare Das-Head-Tag Das-Title-Tag

4Textgrundlagen

Textfarbe Schriftfamilie Schriftgröße Schriftstärke Textausrichtung Textdekoration Wiederholungsaufgabe Nr. 1 Wiederholungsaufgabe Nr. 2

7Box-Modell Teil 1

Was ist das Box-Modell?Innenabstand Außenabstände Rahmen Breite und Höhe Wiederholungs-Challenge

10Anmeldeformular

Body Formularcontainer

Eingabefeld

Schaltfläche

13Tonga-Webseite

Navigationsmenü Willkommensüberschrift

2CSS hinzufügen

Inline-CSS Internes CSS Externes CSS Herausforderung: Grundlegendes Styling

5Farben und Hintergründe

Hintergrundfarbe HEX-Farben RGB-Farben Transparenz mit RGBA Wiederholungs-Challenge #1

8Box-Modell Teil 2

Box-Größe Rahmenradius Überlauf Box-Schatten Wiederholungsherausforderung

11Layout-Techniken

Block- vs. Inline-Elemente Grundlagen der Positionierung Relative Positionierung Absolute Positionierung Fixierte Positionierung Grundlagen von z-index Wiederholungs-Challenge

14Letzte Herausforderungen

Elemente anordnen Filmliste Hochzeitseinladungskarte Schwebende Benachrichtigung

Übe selbstständig: Web-Playground