Zum Inhalt
Sicher gedacht
Stylesheet-Sprache

CSS
verständlich erklärt.

CSS gestaltet HTML: Farben, Schrift, Abstände und Layout. Dieselben Inhalte können damit auf einem Handy anders angeordnet sein als auf einem großen Bildschirm.

Wofür wird
CSS genutzt?

Die wichtigsten Einsatzgebiete auf einen Blick – und eine Grenze, die du kennen solltest.

Layout

Karten, Seitenleisten und Navigation anordnen.

Lesbarkeit

Schriftgröße, Zeilenhöhe und Kontraste festlegen.

Anpassung

Mit Media Queries auf unterschiedliche Bildschirmbreiten reagieren.

Vom Beispiel
zum Verständnis.

Erst die Aufgabe lesen, dann den Code verfolgen und schließlich eine kleine Änderung ausprobieren.

BEISPIEL 01

Eine lesbare Hinweiskarte

Eine Meldung soll sich mit ruhigen Farben vom Hintergrund abheben.

<style>
.hinweis {
  padding: 1.5rem;
  border-radius: 1rem;
  background: #e8f4f4;
  color: #12343b;
  line-height: 1.6;
}
</style>
<p class="hinweis">Deine Anfrage ist angekommen.</p>

Das passiert im Code

  1. .hinweis wählt Elemente mit dieser Klasse aus.
  2. padding schafft Innenabstand; border-radius rundet die Ecken.
  3. background und color bestimmen Hintergrund und Textfarbe.

Erwartetes Ergebnis

Ein heller Kasten mit dunkler Schrift, Innenabstand und abgerundeten Ecken.

Probiere es selbst

Verdopple den Innenabstand.

Lösung ansehen

Ändere padding von 1.5rem auf 3rem.

BEISPIEL 02

Karten auf Handy und Desktop

Zwei Angebote sollen nur bei genügend Platz nebeneinanderstehen.

<style>
.raster { display: grid; gap: 1rem; }
@media (min-width: 600px) {
  .raster { grid-template-columns: 1fr 1fr; }
}
</style>
<div class="raster">
  <article>Wartung</article>
  <article>Reparatur</article>
</div>

Das passiert im Code

  1. Grid steuert die Anordnung der direkten Kindelemente.
  2. gap legt den Abstand zwischen den Karten fest.
  3. Die Media Query aktiviert die zwei Spalten erst ab der angegebenen Breite.

Erwartetes Ergebnis

Unter 600 px stehen die Angebote untereinander; ab 600 px in zwei gleich breiten Spalten.

Probiere es selbst

Lass die zwei Spalten erst ab 800 px beginnen.

Lösung ansehen

Ersetze min-width: 600px durch min-width: 800px.

Wie geht es
weiter?

Vertiefe das Thema in der Dokumentation oder vergleiche es mit einem verwandten Werkzeug.

Dokumentation zu CSS öffnen ↗

Auszeichnungssprache

HTML

HTML gibt einer Webseite ihre Struktur und Bedeutung: Eine Überschrift ist eine Überschrift, ein Link führt zu einem Ziel und ein Formular erfasst Eingaben.

HTML mit Beispielen
Programmiersprache

JavaScript

JavaScript reagiert auf Eingaben und verarbeitet Daten. Im Browser macht es Oberflächen interaktiv; mit Laufzeitumgebungen wie Node.js kann es auch außerhalb des Browsers arbeiten.

JavaScript mit Beispielen

← Alle Sprachen und Technologien