Was ist CSS?

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

CSS ist eine leistungsstarke und unverzichtbare Sprache zur Gestaltung von Webseiten, mit der du mühelos visuell ansprechende und gut gestaltete Websites erstellen kannst.

Es arbeitet Hand in Hand mit HTML, um deine Inhalte zum Leben zu erwecken, und verwandelt einfachen Text und Elemente in ansprechende, attraktive Layouts.

Mit CSS hast du die Möglichkeit, das Erscheinungsbild jedes Aspekts deiner Website zu steuern – von Farben und Schriftarten bis hin zu Abständen und Positionierung.

Aufgabe

Einfach

Klicke auf die Schaltfläche „Code ausführen“, um deinen ersten Code in CSS auszuführen.

Bonus: Versuche, die Farbe des Absatzes zu ändern! Kannst du erkennen, 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