In Teil 1 hast du die Grundlagen von HTML und CSS kennengelernt. In diesem zweiten Teil gehen wir einen Schritt weiter. Du lernst, wie du Elemente gezielter stylen kannst, wie du Blöcke nebeneinander anordnest, wie Formulare funktionieren und wie du eine Seite besser an verschiedene Bildschirmgrößen anpasst.

Class und ID

Mit class und id kannst du HTML-Elementen einen Namen geben. Dadurch kannst du sie in CSS gezielt gestalten.

Eine class verwendest du, wenn mehrere Elemente das gleiche Styling erhalten sollen.

Dieser Text fällt auf.
Dieser Text fällt auch auf.

In CSS schreibst du das so:

.highlight {
  background-color: yellow;
}

Eine id ist für ein einzelnes, einzigartiges Element auf der Seite gedacht.

Willkommen auf meiner Seite

In CSS schreibst du eine ID mit einer Raute:

#hoofdtitel {
  color: darkblue;
}

Kurz merken:

• . . in CSS bedeutet eine Class
• # # in CSS bedeutet eine ID

Verwende meistens eine class. Eine id nutzt du nur, wenn etwas wirklich einzigartig ist.

Links und Buttons

Anfänger verwechseln Links und Buttons oft. Das ist logisch, da sie sich manchmal ähnlich sehen. Dennoch haben sie nicht die gleiche Funktion.

• Ein Link führt dich zu einer anderen Seite oder Stelle
• Ein Button führt meistens eine Aktion aus, wie Senden oder Öffnen

Ein normaler Link sieht so aus:

Mehr lesen

Ein Button sieht so aus:

Absenden

Du kannst einen Link mit CSS auch wie einen Button aussehen lassen:

Jetzt starten

.button-link {
  display: inline-block;
  background-color: #0066cc;
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 6px;
}

Damit bleibt es technisch ein Link, sieht aber wie ein Button aus.

Bilder stylen

In Teil 1 hast du gesehen, wie du ein Bild mit <img> hinzufügst. Jetzt schauen wir uns an, wie du es mit CSS schöner gestalten kannst.

.foto {
  width: 300px;
  border-radius: 12px;
}

Was passiert hier?

• Das Bild wird 300 Pixel breit
• Die Ecken werden abgerundet

Wenn du möchtest, dass ein Bild sauber mit dem Bildschirm skaliert, ist dies oft praktischer:

.foto {
  max-width: 100%;
  height: auto;
}

Dann wird das Bild nie breiter als der verfügbare Platz.

Formulare: Input, Label, Textarea und Button

Formulare verwendest du, wenn jemand etwas ausfüllen muss. Denke an ein Kontaktformular, eine Suchleiste oder einen Login-Bildschirm.

Ein einfaches Formular kann so aussehen:

  Name
  

  Nachricht
  

  Absenden

Die wichtigsten Bestandteile sind:

• <form> ist das Formular selbst
• <label> ist die Beschriftung eines Feldes
• <input> ist ein Eingabefeld
• <textarea> ist ein größeres Textfeld
• <button> ist der Sende-Button

Ein Label ist wichtig, weil es verdeutlicht, was ausgefüllt werden muss. Auch für die Barrierefreiheit ist das sehr gut.

Du kannst Formulare auch stylen:

input,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  margin-bottom: 16px;
}

button {
  background-color: #0066cc;
  color: white;
  padding: 12px 18px;
  border: none;
  border-radius: 6px;
}

Display: block, inline und inline-block

Mit der CSS-Eigenschaft display bestimmst du, wie sich ein Element im Layout verhält.

Ein Absatz ist standardmäßig meist ein Block-Element. Ein span ist standardmäßig inline.

Beispiel:

.blok {
  display: block;
}

.inline-tekst {
  display: inline;
}

.knopje {
  display: inline-block;
}

Ein Link, der wie ein Button aussehen soll, erhält oft inline-block, damit das Padding richtig funktioniert.

Position: static, relative und absolute

Mit position kannst du Elemente präziser platzieren. Das ist für Anfänger oft etwas schwieriger, also betrachte dies vor allem als erste Einführung.

Die am häufigsten verwendeten Werte sind:

• staticstatic, die Standardposition
• relativerelative, das Element bleibt an seinem Platz, kann aber leicht verschoben werden
• absoluteabsolute, das Element wird losgelöst im Verhältnis zu einem Elternelement platziert

Beispiel:

.box {
  position: relative;
}

.label {
  position: absolute;
  top: 10px;
  right: 10px;
}

Damit kannst du zum Beispiel ein kleines Label oben rechts in einer Card platzieren.

Wichtig zu merken: Ein Element mit position: absolute; orientiert sich oft am nächsten Elternelement mit position: relative;.

Flexbox: Elemente ordentlich nebeneinander setzen

Flexbox ist eine sehr praktische Methode, um Elemente nebeneinander zu setzen und ordentlich zu verteilen. Dies wird in modernen Websites häufig verwendet.

Angenommen, du möchtest zwei Blöcke nebeneinander anzeigen:

<div class="row">
  <div class="kolom">Block 1</div>
  <div class="kolom">Block 2</div>
</div>

.row {
  display: flex;
  gap: 20px;
}

.kolom {
  background-color: #f2f2f2;
  padding: 20px;
  flex: 1;
}

Was passiert hier?

• display: flex; display: flex setzt die Blöcke nebeneinander
• gap: 20px; gap erzeugt Platz zwischen den Blöcken
• flex: 1; flex: 1 sorgt dafür, dass beide Blöcke gleich viel Platz erhalten

Andere nützliche Flexbox-Eigenschaften sind:

Beispiel:

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Responsive Basics

Eine Website wird auf verschiedenen Bildschirmen wie Mobilgeräten, Tablets und Desktops betrachtet. Responsive Design bedeutet, dass sich dein Layout an den Bildschirm anpasst.

Eine häufig verwendete Technik hierfür ist eine Media Query.

@media (max-width: 768px) {
  .row {
  flex-direction: column;
  }
}

Was bedeutet das?

• Wenn der Bildschirm 768 Pixel breit oder schmaler ist
• Dann stehen die Blöcke nicht mehr nebeneinander
• Sondern untereinander

Das ist auf dem Handy praktisch, da dort weniger horizontaler Platz zur Verfügung steht.

Noch ein paar Responsive-Tipps für Anfänger:

• Verwende lieber max-width: 100% statt fester Breiten für Bilder
• Nutze Flexbox, damit Blöcke sich leichter anpassen
• Prüfe immer, wie etwas auf dem Handy aussieht
• Mache Buttons und Links groß genug zum Antippen

Ein komplettes Mini-Beispiel

Hier siehst du einen einfachen Card-Block mit Bild, Titel, Text und Button:

<div class="card">
  <img src="beispiel.jpg" alt="Beispielbild" class="card-image">
  <h2>Lerne HTML und CSS</h2>
  <p>Mit kleinen Schritten kommst du schon sehr weit.</p>
  <a href="#" class="button-link">Mehr lesen</a>
</div>

.card {
  max-width: 400px;
  padding: 20px;
  border: 1px solid #dddddd;
  border-radius: 10px;
  background-color: #ffffff;
}

.card-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 16px;
}

.button-link {
  display: inline-block;
  background-color: #0066cc;
  color: white;
  padding: 12px 18px;
  text-decoration: none;
  border-radius: 6px;
}

Dies ist ein schönes Beispiel, in dem mehrere Dinge zusammenkommen:

• HTML für die Struktur
• Eine Class zum Stylen
• Ein Bild, das sauber skaliert
• Ein Link, der wie ein Button aussieht

Kleine Übung 1

Erstelle einen Block mit:

• einem Titel
• einem kurzen Text
• einem Link, der wie ein Button aussieht

<div class="blok">
  <h2>Willkommen</h2>
  <p>Dies ist mein erster Content-Block.</p>
  <a href="#" class="button-link">Mehr ansehen</a>
</div>

.blok {
  padding: 20px;
  background-color: #f3f3f3;
}

.button-link {
  display: inline-block;
  background-color: #0066cc;
  color: white;
  padding: 10px 16px;
  text-decoration: none;
}

Kleine Übung 2

Erstelle zwei Blöcke nebeneinander mit Flexbox.

<div class="row">
  <div class="kolom">Links</div>
  <div class="kolom">Rechts</div>
</div>

.row {
  display: flex;
  gap: 20px;
}

.kolom {
  flex: 1;
  background-color: #eeeeee;
  padding: 20px;
}

Kleine Übung 3

Sorge dafür, dass zwei Spalten auf dem Handy untereinander stehen.

@media (max-width: 768px) {
  .row {
  flex-direction: column;
  }
}

Häufige Fehler in Teil 2

• Eine id mehrmals auf derselben Seite verwenden
• Einen Link verwenden, wo eigentlich ein Button nötig wäre, oder umgekehrt
• Bildern eine feste Breite geben, wodurch sie auf dem Handy zu groß werden
• Vergessen, dass display: flex; auf dem Elternelement stehen muss
• position: absolute; absolute verwenden, ohne zu verstehen, im Verhältnis zu welchem Element es platziert wird

Zusammenfassung

In diesem zweiten Teil hast du gelernt, wie du HTML-Elemente mit class und id besser steuern kannst, wie sich Links und Buttons unterscheiden, wie Formulare funktionieren und wie du mit Flexbox und Media Queries ein Layout besser aufbauen kannst. Dies sind wichtige Bausteine für fast jede moderne Webseite.

Das Wichtigste ist, dass du klein anfängst. Baue erst einen einfachen Block, gestalte ihn mit CSS und füge erst danach neue Dinge hinzu. So behältst du den Überblick und lernst am schnellsten.

Übungsaufgabe für dich

Erstelle selbst eine kleine Profilkarte mit:

• einem Bild
• einem Namen als Titel
• einer kurzen Beschreibung
• einem Link im Button-Stil

Gib der Karte eine Hintergrundfarbe, Padding, abgerundete Ecken und sorge dafür, dass das Bild sauber mit skaliert. Wenn das klappt, hast du schon eine sehr gute Basis geschaffen.