CSS-Einführung

Inhaltsverzeichnis

Erste Schritte: CSS-Einführung

CSS (Cascading Style Sheets) ist die Sprache, mit der du das Aussehen und Layout
deiner HTML-Seiten bestimmst. Während HTML die Struktur deiner Webinhalte
definiert, kümmert sich CSS um Farben, Schriftgrößen, Abstände und das gesamte
Erscheinungsbild. Wenn du PHP lernen willst, kommst du um CSS
nicht herum – schließlich sollen deine dynamischen Inhalte auch optisch ansprechend
dargestellt werden.

Warum CSS?

Mit CSS kannst du das Erscheinungsbild deiner Website von der Struktur entkoppeln.
Statt zum Beispiel Font-Größen oder Farben direkt im HTML zu schreiben, legst du
im Stylesheet fest, wie Elemente aussehen. Das bringt viele Vorteile:

Bessere Wartbarkeit: Du passt das Design an einer zentralen Stelle an, ohne jede HTML-Datei einzeln zu ändern.
Schnellere Ladezeiten: Oft cached der Browser deine CSS-Datei, sodass die Inhalte flotter geladen werden.
Konsistentes Aussehen: Eine Änderung der Farbpalette im CSS reicht aus, um die ganze Seite einheitlich anzupassen.

Grundlagen: Syntax und Selektoren

Ein CSS-Stylesheet besteht aus Regeln, die definieren, wie bestimmte Elemente aussehen sollen.
Die Grundstruktur sieht so aus:

selektor {
    eigenschaft: wert;
    eigenschaft: wert;
}

1. Selektor: Legt fest, welche Elemente (z. B. <p>, <div>, Klassen, IDs)
gestylt werden.
2. Eigenschaft: Eine CSS-Eigenschaft (z. B. color, background, margin).
3. Wert: Der Wert für diese Eigenschaft (z. B. red, #ccc, 20px).

Beispiel: Einfache CSS-Regeln

/* Alle Überschriften h1 sollen rot und fett sein */
h1 {
    color: red;
    font-weight: bold;
}

/* P-Elemente bekommen größere Schrift und einen Zeilenabstand */
p {
    font-size: 18px;
    line-height: 1.5;
}

So wird der gesamte Text in <h1>-Tags rot dargestellt, während <p>-Elemente
etwas größer und mit mehr Zeilenabstand erscheinen.

Arten, CSS einzubinden

Es gibt drei gängige Wege, CSS in ein HTML-Dokument einzubinden:

Externes Stylesheet:
Über <link rel=“stylesheet“ href=“style.css“> bindest du eine separate CSS-Datei ein,
z. B. in deinem <head>.
```
<head>
    <link rel="stylesheet" href="style.css">
</head>
    
```
Das ist die empfohlene Methode, weil sie am übersichtlichsten ist.
Internes Stylesheet:
Innerhalb des <head>-Bereichs platzierst du einen <style>-Block:
```
<head>
    <style>
      p { color: blue; }
    </style>
</head>
    
```
Praktisch für kleine Projekte oder einzelne Ausnahmen, aber weniger flexibel.
Inline-Styles:
Direkt im HTML-Tag mit dem style-Attribut:
```
<p style="color: blue; font-weight: bold;">Hallo!</p>
    
```
Inline-Styles solltest du nur benutzen, wenn wirklich kein anderer Weg geht,
z. B. bei dynamischen Inhalten oder Debugging. Es macht den Code unübersichtlich.

Klassenselektoren & ID-Selektoren

In der Praxis brauchst du oft mehr als nur die Elementnamen (h1, p). Daher nutzt du:

Klassen (.class):
Du fügst HTML-Elementen ein class-Attribut hinzu und stylst diese Klasse:

<div class="highlight">Besonderer Text</div>
.highlight {
    background-color: yellow;
}

IDs (#id):
Ein eindeutiges Merkmal für ein bestimmtes Element:
```
<p id="intro">Einleitung</p>
#intro {
    font-style: italic;
}
    
```
IDs sind nur einmal pro Seite sinnvoll, Klassen können beliebig wiederverwendet werden.

Box-Modell und Layout

Jedes HTML-Element wird im CSS als rechteckige Box behandelt, bestehend aus:
Content, Padding, Border und Margin.
Verinnerlichst du dieses Box-Modell, verstehst du, wie Abstände, Rahmen und Inhaltsbreiten
zusammenspielen.

selector {
    margin: 10px;  /* Abstand nach außen */
    padding: 5px;  /* Abstand nach innen */
    border: 1px solid #333; /* Rahmen */
}

Mit Layout-Techniken wie Flexbox oder CSS Grid kannst du
komplexe Seitenaufbauten (z. B. mehrspaltige Layouts) realisieren,
ohne sich veralteter Tricks (z. B. Floats) zu bedienen.

Beispiel einer einfachen layout.css

/* Header anpassen */
header {
    background-color: #f4f4f4;
    padding: 10px;
    margin-bottom: 20px;
}

/* Hauptinhalt zentrieren */
main {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
}

/* Navigation oder Sidebar */
aside {
    float: right; /* Früher gängige Methode, modern: Flexbox/Grid */
    width: 200px;
    margin-left: 20px;
    background-color: #eee;
    padding: 10px;
}

/* Fußzeile */
footer {
    text-align: center;
    font-size: 0.9em;
    color: #666;
    padding: 20px;
    margin-top: 20px;
}

Diese Datei könntest du als layout.css speichern und im <head>
deines HTML-Dokuments verlinken. Sie gibt deinem Grundgerüst bereits etwas Struktur und Flair.

Tipps für den Einstieg

Verwende externe Stylesheets: Halte deinen Code sauber und trenne Struktur (HTML) von Gestaltung (CSS).
Nutze ein Reset-Stylesheet oder Normalize: Das angleicht Standardwerte in verschiedenen Browsern.
Experimentiere mit Entwickler-Tools: In Chrome, Firefox oder Edge kannst du per Rechtsklick „Untersuchen“ die CSS-Regeln live verändern.
Schaffe dir eine Grundstruktur: Mit Klassen und IDs kommst du klar, wenn du dein HTML-Layout schon semantisch aufgeteilt hast (<header>, <main>, <section> usw.).

Fazit

CSS ist ein essenzieller Bestandteil der Webentwicklung. Indem du das visuelle Layout
separierst, kannst du dich ganz auf die Optik konzentrieren, während deine PHP– oder
HTML-Logik flexibel bleibt. Anfangs können all die Selektoren, Eigenschaften und Layout-Methoden
überwältigend wirken, aber mit etwas Übung wirst du schnell verstehen, wie du deine Webseiten
perfekt in Szene setzt. Denke immer daran, dass ein klares, strukturiertes HTML-Grundgerüst
und ein durchdachtes CSS-Konzept Hand in Hand gehen – so wird dein Projekt wartbar und flexibel.