CSS Grundlagen | HTML Befehls-Datenbank

Was ist CSS?

CSS (Cascading Style Sheets) ist eine Sprache, mit der du das Design und die Darstellung von HTML-Elementen steuerst – also Farben, Schriftarten, Abstände, Layout usw.

Merke: HTML beschreibt, was auf der Seite ist – CSS beschreibt, wie es aussieht.

🔗 CSS einbinden

Es gibt drei Möglichkeiten, CSS zu verwenden:

1️⃣ Externe Datei (empfohlen)

<link rel="stylesheet" href="css/style.css">

2️⃣ Intern im <head>

<style>
  body { background-color: lightgray; }
</style>

3️⃣ Inline (direkt im HTML-Tag)

<p style="color: red;">Roter Text</p>

Best Practice: Nutze die externe Variante – sie trennt Struktur (HTML) und Design (CSS).

🎯 Selektoren – So wählst du Elemente aus

Mit Selektoren bestimmst du, welche HTML-Elemente du gestalten willst.

Selektor	Beispiel	Beschreibung
Element	`p { color: blue; }`	Alle Absätze
Klasse	`.highlight { color: orange; }`	Alle Elemente mit `class="highlight"`
ID	`#intro { font-weight: bold; }`	Ein bestimmtes Element mit `id="intro"`
Mehrere	`h1, h2 { color: green; }`	Mehrere Elemente gleichzeitig

Beispiel:

<p class="highlight">Ich bin orange!</p>

Ich bin orange!

🧱 Wichtige CSS-Eigenschaften

Textgestaltung

color: red;            /* Textfarbe */
font-size: 18px;       /* Schriftgröße */
font-family: Arial;    /* Schriftart */
text-align: center;    /* Textausrichtung */

Hintergrund

background-color: #f0f0f0;
background-image: url("bild.jpg");
background-repeat: no-repeat;
background-size: cover;

Abstände

margin: 20px;   /* Außenabstand */
padding: 10px;  /* Innenabstand */

Rahmen

border: 2px solid #333;
border-radius: 8px;

Größe & Anzeige

width: 300px;
height: 150px;
display: inline-block;

🌈 Farben definieren

CSS unterstützt verschiedene Farbsysteme:

Schlüsselwörter: red, blue, green
HEX-Werte: #ff0000 (Rot)
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5) (mit Transparenz)

Beispiel:

🔖 Klassen & IDs im HTML verwenden

<p class="wichtig">Ich bin eine Klasse</p>
<p id="einzigartig">Ich bin eine ID</p>

.wichtig {
  color: crimson;
}

#einzigartig {
  font-weight: bold;
}

Regel: Eine Klasse (.) kann mehrfach verwendet werden, eine ID (#) nur einmal pro Seite.

📦 Das Box-Modell

Jedes HTML-Element ist wie eine Box aufgebaut:

content – der eigentliche Inhalt
padding – Abstand zwischen Inhalt und Rahmen
border – Rahmen um das Element
margin – Abstand zu anderen Elementen

div {
  width: 200px;
  padding: 10px;
  border: 3px solid #333;
  margin: 20px;
}

Beispielausgabe:

Ich bin eine CSS-Box

🧭 Mini-Beispiel: Layout mit CSS

<header>Kopfbereich</header>
<main>Hauptinhalt</main>
<footer>Fußbereich</footer>

header, main, footer {
  padding: 1em;
  margin: 0.5em;
  background: #ddd;
}

Kopfbereich

Hauptinhalt