HTML & CSS Lernen

HTML

Die wichtigsten Tags

Links: Code · Rechts: Ergebnis im Browser

<p> Text / Absatz Paragraph

CODE

<p>Das ist ein Absatz.</p>
<p>Noch ein Absatz.</p>

IM BROWSER

Das ist ein Absatz.

Noch ein Absatz.

<a> Link Anchor

CODE

<a href="https://google.com">
  Zu Google
</a>

IM BROWSER

Zu Google

<h1> – <h6> Überschriften Heading 1–6

CODE

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>

IM BROWSER

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

<div> Box / Container Division

CODE

<div style="
  background: #EEF2FF;
  padding: 12px;
  border-radius: 8px;
">
  Ich bin eine Box!
</div>

IM BROWSER

Ich bin eine Box!

<img> Bild Image — selbstschließend

CODE

<img
  src="foto.jpg"
  alt="Mein Foto"
  width="160"
/>

IM BROWSER

🖼️

alt wird angezeigt wenn Bild fehlt

<span> Inline-Markierung Inline Container

CODE

<p>
  Text mit
  <span style="color:red">
    roter Farbe
  </span>
  drin.
</p>

IM BROWSER

Text mit roter Farbe drin.

<button> Schaltfläche Button

CODE

<button>
  Klick mich!
</button>

<button disabled>
  Deaktiviert
</button>

IM BROWSER

<form> Formular Daten absenden

CODE

<form
  action="/senden"
  method="POST"
>
  <!-- Felder hier -->
  <button type="submit">
    Absenden
  </button>
</form>

IM BROWSER

<form> ist unsichtbar.
Bündelt Felder und Button,
schickt Daten an den Server.

<input> Eingabefeld Verschiedene Typen

CODE

<input
  type="text"
  placeholder="Dein Name"
/>
<input
  type="email"
  placeholder="E-Mail"
/>
<input type="checkbox" />
Ich stimme zu

IM BROWSER

Ich stimme zu

<label> Beschriftung Verbindet Text mit Input

CODE

<label for="name">
  Dein Name:
</label>
<input
  id="name"
  type="text"
/>

IM BROWSER

Dein Name:

Klick auf das Label → fokussiert das Feld

CSS

Wichtigste Eigenschaften

Syntax: eigenschaft: wert;

colorTextfarbe

p {
  color: #E34C26;
}

Hallo Welt!

background-colorHintergrundfarbe

div {
  background-color: #EEF2FF;
}

Hintergrund

font-sizeSchriftgröße

h1 { font-size: 32px; }
p  { font-size: 16px; }
sm { font-size: 12px; }

32px 16px 12px

font-weightSchriftstärke

/* 100–900 */
p { font-weight: 400; }
b { font-weight: 700; }
h { font-weight: 900; }

400 — Normal 700 — Fett 900 — Extra fett

marginAußenabstand (außerhalb der Box)

div {
  margin: 16px;
  /* oder getrennt: */
  margin-top: 8px;
  margin-bottom: 8px;
}

margin

Element

paddingInnenabstand (innerhalb der Box)

div {
  padding: 20px;
  /* oder getrennt: */
  padding-left: 24px;
  padding-right: 24px;
}

padding

Inhalt

borderRahmen um ein Element

div {
  border: 2px solid #264DE4;
/* ↑Stärke ↑Art  ↑Farbe */
}

Rahmen!

border-radiusRunde Ecken

div    { border-radius: 8px;  }
circle { border-radius: 50%; }
/* 50% = perfekter Kreis */

width / heightBreite & Höhe

div {
  width: 120px;
  height: 60px;
  /* auch: 50%, 100%, auto */
}

120 × 60 px

displayAnzeigetyp des Elements

.box  { display: block;  }
.text { display: inline; }
.lay  { display: flex;   }
.grd  { display: grid;   }
.gone { display: none;   }

block — ganze Zeile

Normal inline Text läuft weiter

Flexbox

Layout mit Flexbox

Alles startet mit display: flex

display: flex

Aktiviert Flexbox — Kinder stehen nebeneinander

ohne flex → untereinander (block)

display: flex → nebeneinander

flex-direction

Richtung: row = waagrecht (Standard), column = senkrecht

flex-direction: row (Standard)

flex-direction: column

justify-content

Ausrichtung entlang der Hauptachse (bei row = horizontal)

justify-content: flex-start

justify-content: center

justify-content: space-between

align-items

Ausrichtung auf der Querachse (bei row = vertikal)

align-items: flex-start

align-items: center

gap

Abstand zwischen allen Flex-Elementen

gap: 4px

gap: 24px

flex-wrap

Erlaubt Umbruch wenn kein Platz mehr ist

flex-wrap: nowrap (Standard — Überlauf!)

Box 1

Box 2

Box 3

Box 4

flex-wrap: wrap → bricht um ✓

Box 1

Box 2

Box 3

Box 4

Beispiel

Eine kleine Webseite

Code links · Ergebnis rechts

profil.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Mein Profil</title>
  <style>

    body {
      font-family: Arial, sans-serif;
      background: #F0F4FF;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    .karte {
      background: white;
      border-radius: 16px;
      padding: 32px;
      width: 320px;
      box-shadow: 0 8px 32px
        rgba(0, 0, 0, 0.12);
    }

    .avatar {
      width: 68px;
      height: 68px;
      background: #264DE4;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      margin-bottom: 16px;
    }

    h1 {
      font-size: 22px;
      margin-bottom: 4px;
    }

    p {
      color: #6B7280;
      font-size: 14px;
    }

    .tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin: 14px 0;
    }

    .tag {
      background: #EEF2FF;
      color: #264DE4;
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
    }

    a {
      display: inline-block;
      background: #264DE4;
      color: white;
      padding: 10px 22px;
      border-radius: 100px;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
    }

  </style>
</head>
<body>

  <div class="karte">

    <div class="avatar">👨‍💻</div>

    <h1>Max Mustermann</h1>
    <p>Frontend Entwickler · Wien</p>

    <div class="tags">
      <span class="tag">HTML</span>
      <span class="tag">CSS</span>
      <span class="tag">JavaScript</span>
    </div>

    <a href="mailto:max@example.com">
      Kontakt
    </a>

  </div>

</body>
</html>

profil.html

👨‍💻

Max Mustermann

Frontend Entwickler · Wien

HTML CSS JavaScript

Kontakt

Lern HTML & CSS

Die wichtigsten Tags

Wichtigste Eigenschaften

Layout mit Flexbox

Eine kleine Webseite