CSS Grundsyntax

Inhaltsverzeichnis

Erste Schritte: CSS Grundsyntax (Selektoren, Eigenschaften)

CSS (Cascading Style Sheets) ist das zentrale Tool,
um das Erscheinungsbild deiner HTML-Dokumente zu gestalten. Während HTML
den strukturellen Aufbau vorgibt, bestimmst du mit CSS, welche Schriften,
Farben, Abstände oder Layouts eingesetzt werden. In diesem Tutorial erfährst du,
wie die Grundsyntax funktioniert und welche Rolle Selektoren und Eigenschaften spielen.

Aufbau einer CSS-Regel

Die Basis jeder CSS-Regel sieht so aus:

selektor {
    eigenschaft: wert;
    eigenschaft: wert;
    ...
}

Selektor: Legt fest, für welche(s) HTML-Element(e) die Regel gilt.
Das kann ein Tag-Name (z. B. p, h1), eine Klasse (.klasse)
oder eine ID (#id) sein.
Eigenschaft: Beschreibt, was du am Aussehen ändern möchtest
(z. B. color, background-color, margin).
Wert: Gibt an, welchen Wert du der Eigenschaft zuweist
(z. B. red, #f0f0f0, 20px).

Typische Selektoren

Selektoren bestimmen, welche Elemente im HTML vom jeweiligen Styleset
betroffen sind. Zu den meistgenutzten gehören:

Element-Selektor:
```
p { color: red; }
```
Wirkt auf alle <p>-Tags im Dokument.
Klassen-Selektor:
```
.highlight { background-color: yellow; }
```
Betrifft alle Elemente, die das Attribut class=“highlight“ tragen.
ID-Selektor:
```
#banner { background: url("banner.jpg") no-repeat center; }
```
Ziel ist das Element mit id=“banner“. IDs sollten pro Seite eindeutig sein.
Universal-Selektor (*):
```
* { margin: 0; padding: 0; }
```
Wirkt auf alle Elemente. Oft genutzt, um Standardabstände zu resetten.
Attribut-Selektor:
```
a[target="_blank"] { color: orange; }
```
Selektiert alle Links (<a>), die ein target=“_blank“ haben.

Je nach Komplexität deiner Site kannst du Selektoren kombinieren und verfeinern
(z. B. .navigation li a), um gezielt bestimmte Elemente anzusprechen.

Mehrere Selektoren in einer Zeile

Möchtest du dieselben Eigenschaften auf verschiedene Elemente anwenden,
kannst du die Selektoren per Komma trennen:

h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #333;
}

Alle <h1>, <h2> und <h3>-Überschriften erhalten nun diese Formatierung.

Häufig genutzte Eigenschaften

Hier ein Überblick über einige Standard-Eigenschaften:

color: Schriftfarbe
```
p { color: blue; }
```
background-color: Hintergrundfarbe
```
div { background-color: #fafafa; }
```
font-size: Schriftgröße
```
h1 { font-size: 2em; }
```

margin / padding: Außen-/Innenabstände

section { margin: 20px; padding: 10px; }

border: Rahmen um das Element
```
img { border: 2px solid #ccc; }
```
width / height: Breite und Höhe
```
.box { width: 200px; height: 100px; }
```
display: Steuert, ob ein Element block, inline, flex, grid etc. ist
```
nav li { display: inline-block; }
```

CSS-Eigenschaften gibt es in großer Zahl, von Farbverläufen (gradient) über
Schriftstile (font-family, font-weight) bis hin zu aufwändigen Animationen.

Kommentare in CSS

Um deinen Stylesheet zu strukturieren, kannst du
/* Kommentare */ verwenden:

/* Hauptlayout */
main {
    margin: 0 auto;
    width: 80%;
}

/* Farbakzente für Links */
a {
    color: #0066cc;
}

Kommentare helfen dir (und deinen Teamkollegen) zu verstehen, wofür die
jeweiligen Regeln gedacht sind.

Verschachtelte Selektoren (Kind, Nachfolger etc.)

Manchmal möchtest du mehr Kontrolle, etwa nur die <p>-Tags in einem <div> mit
der Klasse „content“ ansprechen. Dafür gibt es Vererbungs- und Kombinator-Methoden:

/* Selektor-Kombination: Nur p-Elemente im div.content */
div.content p {
    font-size: 1.2em;
}

So erfasst du nur jene <p>-Absätze, die direkt (oder auch verschachtelt)
in einem <div class=“content“> liegen.

Ein kleines Beispiel in Action

/* style.css */
body {
    margin: 0; 
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px;
}

header h1 {
    margin: 0;
}

.main-content p {
    line-height: 1.6;
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    color: #666;
    padding: 5px;
}

.footer-links a:hover {
    color: #111; 
    background-color: #ddd;
}

Im HTML könntest du Folgendes haben:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine CSS-Seite</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Willkommen!</h1>
    </header>

    <div class="main-content">
        <p>Das ist der Hauptinhalt.</p>
        <p>Noch ein Absatz.</p>
    </div>

    <footer>
        <div class="footer-links">
            <a href="#impressum">Impressum</a> |
            <a href="#datenschutz">Datenschutz</a>
        </div>
    </footer>
</body>
</html>

Mit diesen Kombinationen aus Selektoren und Eigenschaften kannst du bereits
ein ansprechendes Grundlayout erstellen.

Fazit

Die CSS-Grundsyntax beruht auf einfachen, aber enorm flexiblen Bausteinen:
Selektoren, Eigenschaften und Werte. Sobald du beherrschst, wie du die passenden Elemente ansprichst
und welche Eigenschaften du ihnen zuweist, bist du in der Lage, Oberflächen und Layouts nach
deinem Geschmack zu gestalten. Gerade wenn du PHP lernen möchtest, ist CSS
unverzichtbar, um deine dynamischen Inhalte auch optisch ansprechend zu präsentieren.
Mit den vorgestellten Grundlagen kannst du deine ersten Stylesheets erstellen und
selbst komplexe Layouts realisieren – viel Erfolg beim Experimentieren!