Willkommen zu CSS!

CSS (Cascading Style Sheets) beschreibt das Aussehen von HTML-Elementen — also Farben, Abstände, Layout und Animationen.

Was du lernst:

Wie du Elemente mit Selektoren ansprichst
Wie du Farben, Text und Layout gestaltest
Wie du mit Flexbox arbeitest und Animationen hinzufügst

Selektoren

Selektoren bestimmen, welche HTML-Elemente CSS beeinflusst. Du kannst sie nach Tag, Klasse oder ID auswählen.

/* Tag-Selektor */
p {
  color: gray;
}

/* Klassen-Selektor */
.button {
  background-color: skyblue;
}

/* ID-Selektor */
#header {
  font-weight: bold;
}

Live-Beispiel:

Ich bin der Header

Ich bin ein normaler Absatz.

Farben

Farben kannst du mit Namen, Hex-Codes, RGB oder HSL definieren.

h1 { color: navy; }
p { color: #333; }
div { background-color: rgb(200, 230, 255); }
span { background-color: hsl(200, 80%, 80%); }

Text & Schrift

CSS steuert Schriftart, Größe, Ausrichtung und Abstand. Mit font-family, font-size und text-align kannst du Text gestalten.

h1 {
  font-family: "Segoe UI", sans-serif;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

Schön formatierte Überschrift

CSS macht Texte gut lesbar und optisch ansprechend. Du kannst Schriftgrößen, Farben und Abstände einfach anpassen.

Das Box-Modell

Jedes HTML-Element ist eine Box mit Inhalt, Padding, Border und Margin.

div {
  margin: 20px;   /* äußerer Abstand */
  padding: 10px;  /* innerer Abstand */
  border: 2px solid skyblue;
}

Box-Modell Beispiel

Layout & Flexbox

Mit display: flex kannst du Elemente nebeneinander oder zentriert anordnen.

.container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.box {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

Transitionen & Hover-Effekte

Mit Transitionen kannst du Animationen hinzufügen, wenn sich ein Zustand ändert — z. B. bei Hover.

button {
  background-color: skyblue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: royalblue;
}