CSS – Einführung in CSS

Heute wird dein Steckbrief mit CSS schöner gemacht: Farben, Schriftgrößen, Abstände, Schatten und ein bisschen Deko.

Vorbereitung

Öffne den Editor mit deinem Steckbrief.

Editor öffnen

Du kannst jederzeit im CSS-Spickzettel nachschauen, welche Eigenschaften es gibt.

So ist CSS aufgebaut

Eine CSS-Regel besteht aus einem Selektor (worauf sich das CSS bezieht) und Eigenschaften in geschweiften Klammern:

h1 {
  color: steelblue;
}
  • h1 ist der Selektor – hier: „alle <h1>-Überschriften“.
  • color ist die Eigenschaft, steelblue der Wert.
  • Jede Eigenschaft endet mit einem Semikolon ;.

Aufgabe 1 – Schriftfarbe, -größe und -dicke

Style deine Überschrift <h1>: eine andere Farbe, eine größere Schrift und eine bestimmte Schriftdicke.

h1 {
  color: steelblue;
  font-size: 2.5rem;
  font-weight: bold;
}

Neue Eigenschaften:

  • color – Textfarbe (Name wie steelblue, oder Hex-Code wie #3b82f6)
  • font-size – Schriftgröße, z. B. in px oder rem
  • font-weight – Schriftdicke: normal, bold oder Zahlen von 100–900

Style anschließend auch deinen <p>-Text mit einer eigenen Farbe und Größe.

Aufgabe 2 – Zeilenhöhe und Zeilenausrichtung

Style dein ganzes Dokument mit <body> so, dass die Zeilen mehr Abstand zueinander haben.

In allen Absätzen <p> soll der Text zentriert stehen.

body {
  line-height: 1.6;
}

p {
  text-align: center;
}

Neue Eigenschaften:

  • line-height – Abstand zwischen den Zeilen (Zahl ohne Einheit, z. B. 1.6 = das 1,6-fache der Schriftgröße)
  • text-align – Ausrichtung: left, center, right oder justify (Blocksatz)

Aufgabe 3 – Eine Liste als Box

Style eine deiner Listen (<ul> oder <ol>) so, dass sie wie eine Karte mit Hintergrundfarbe und Schatten wirkt – das macht sie plastischer.

ul {
  background-color: #f0f4ff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  li {
    margin-left: 1rem;
  }
}

Neue Eigenschaften:

  • background-color – Hintergrundfarbe
  • padding – Innenabstand zwischen Inhalt und Rand der Box
  • border-radius – runde Ecken
  • box-shadow – Schatten: x-Versatz y-Versatz Weichzeichnung Farbe

Aufgabe 4 – Bildgröße begrenzen

Dein Bild soll nicht größer als 300 Pixel breit sein.

img {
  max-width: 300px;
}

Neue Eigenschaft: max-width – die Breite darf höchstens so groß werden, aber auf schmalen Bildschirmen auch kleiner sein (anders als width, das die Breite fest vorgibt).

Zum Schluss: Ein Farbverlauf für den Hintergrund

Verschönere den Hintergrund deiner ganzen Seite mit einem Farbverlauf.

body {
  background: linear-gradient(90deg, #a855f7, #3b82f6);
}

Neue Eigenschaft: background mit linear-gradient(winkel, farbe1, farbe2, …) – erzeugt einen weichen Übergang zwischen mehreren Farben. Probier verschiedene Winkel und Farben aus!

Speichern

Wenn du fertig bist, klicke im Editor auf Speichern. Dadurch wird deine Seite als fertige .html-Datei (inklusive CSS) heruntergeladen. Lade die Datei anschließend im Kursnotizbuch hoch.

Zusatzaufgabe (für Schnelle)

Schau im CSS-Spickzettel unter „Für Profis“ nach und probiere zum Beispiel:

  • Eine <h1> mit text-shadow oder letter-spacing gestalten.
  • Deine Links mit text-decoration: none unterstreichungsfrei machen und stattdessen mit :hover beim Drüberfahren die Farbe wechseln lassen.
  • Dem Bild mit border-radius: 50% eine runde Form geben.
  • Der ganzen Seite mit transition einen sanften Übergang geben, wenn sich beim Hovern etwas ändert.

Diese CSS-Eigenschaften kommen vor

Eigenschaft Bedeutung
color Textfarbe
font-size Schriftgröße
font-weight Schriftdicke (normal, bold, 100–900)
line-height Zeilenabstand
text-align Textausrichtung (left, center, right, justify)
background-color Hintergrundfarbe
padding Innenabstand
border-radius runde Ecken
box-shadow Schatten
max-width maximale Breite
background (linear-gradient) Hintergrund mit Farbverlauf

Kein Steckbrief mehr da?

Kein Problem – kopiere diesen Beispiel-Steckbrief in das HTML-Feld:

<article>
  <h1>Mein Steckbrief</h1>
  <p>Ich heiße Alex, bin 14 Jahre alt und gehe in die 8. Klasse. Ich mag Computer, Musik und Sport.</p>

  <h2>Meine Hobbys</h2>
  <ul>
    <li>Programmieren</li>
    <li>Fußball</li>
    <li>Gitarre spielen</li>
  </ul>

  <h2>Meine Top 3 Filme</h2>
  <ol>
    <li>Film 1</li>
    <li>Film 2</li>
    <li>Film 3</li>
  </ol>

  <h2>Meine Lieblings-Webseiten</h2>
  <ul>
    <li><a href="https://www.youtube.com">YouTube</a></li>
    <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
  </ul>

  <h2>Mein Lieblingslogo</h2>
  <img src="/assets/img/8bitschule-logo.svg" alt="8bit.schule Logo">
</article>

{{TOC}}