Was ist CSS?

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

CSS ist eine leistungsstarke und unverzichtbare Sprache für das Styling von Webseiten, die es Ihnen ermöglicht, mit Leichtigkeit optisch ansprechende und gut gestaltete Websites zu erstellen.

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

Mit CSS haben Sie die Möglichkeit, das Erscheinungsbild jedes Aspekts Ihrer Website zu steuern, von Farben und Schriftarten bis hin zu Abständen und Positionierung.

Aufgabe

Einfach

Drücke 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?

Spickzettel

CSS (Cascading Style Sheets) wird verwendet, um Webseiten zu gestalten und zu designen. Es arbeitet mit HTML zusammen, um das visuelle Erscheinungsbild von Website-Elementen zu steuern, einschließlich Farben, Schriftarten, Abständen und Positionierung.

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 with CSS

1Einführung

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

4Text-Grundlagen

Textfarbe Schriftfamilie Schriftgröße Schriftstärke Textausrichtung Textdekoration Wiederholungs-Challenge #1 Wiederholungs-Challenge #2

7Box-Modell Teil 1

Was ist das Box-Modell?Padding Margins Borders Breite und Höhe Wiederholungs-Challenge

10Login-Formular

Body Formular-Container

Eingabefeld

Button

13Tonga Webseite

Navigationsmenü Willkommens-Header

2CSS hinzufügen

Inline-CSS Internes CSS Externes CSS Grundlagen-Styling-Challenge

5Farben und Hintergründe

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

8Box-Modell Teil 2

Box-Sizing Border-Radius Overflow Box-Shadow Recap-Challenge

11Layout-Techniken

Block- vs. Inline-Elemente Grundlagen der Positionierung Relative Positionierung Absolute Positionierung Fixierte Positionierung Z-Index Grundlagen Wiederholungs-Challenge

14Abschluss-Herausforderungen

Elemente anordnen Filmliste Hochzeitseinladung Schwebende Benachrichtigung

3Grundlegende Selektoren

Einführung in Selektoren Typ-Selektor Klassen-Selektor ID-Selektor Gruppen-Selektoren Universal-Selektor Selektions-Herausforderung

6Café-Menü

Typografie-Grundlagen Text-Styling

Farben und Hintergründe

9Flexbox

Was ist Flexbox?Flex Direction Justify Content Align Items Die perfekte Zentrierung Flexbox-Herausforderung

12Grundlagen des Responsive Designs

Was ist Responsive Design?Viewport Meta Tag Fluid Layouts Viewport-Einheiten Media Queries Grundlagen Flexible Bilder