CSS – Grundlagen

1. Was ist CSS?

CSS steht für Cascading Style Sheets. CSS ist eine Stylesheet-Sprache, mit der das Aussehen und die Gestaltung von HTML-Dokumenten festgelegt werden.

Mit CSS können Farben, Schriftarten, Abstände, Rahmen, Hintergründe und das Layout einer Webseite verändert werden.

2. Wofür wird CSS verwendet?

CSS wird verwendet, um Webseiten übersichtlich, ansprechend und benutzerfreundlich zu gestalten.

• Textfarben und Hintergrundfarben ändern
• Schriftarten und Schriftgrößen festlegen
• Abstände zwischen Elementen bestimmen
• Rahmen und Schatten hinzufügen
• Navigationen und Karten gestalten
• Layouts mit Flexbox und Grid erstellen
• Webseiten an verschiedene Bildschirmgrößen anpassen
• Übergänge und Animationen hinzufügen

3. Aufbau einer CSS-Regel

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Der Deklarationsblock enthält Eigenschaften und Werte.

Beispiel

h1 {
    color: blue;
    font-size: 30px;
}

4. HTML ohne CSS und mit CSS

HTML-Code

<h1>Meine Webseite</h1>
<p>Willkommen auf meiner Webseite!</p>

Ohne zusätzliche CSS-Regeln verwendet der Browser seine Standarddarstellung.

CSS-Code

h1 {
    color: #1959a6;
    font-size: 26px;
}

p {
    color: #475569;
    font-size: 16px;
}

Gestaltetes Ergebnis

5. Drei Möglichkeiten, CSS einzubinden

CSS kann auf drei verschiedene Arten in eine HTML-Seite eingebunden werden.

5.1 Inline-CSS

Bei Inline-CSS wird die Gestaltung direkt im HTML-Element festgelegt.

<p style="color: red;">
    Dieser Text ist rot.
</p>

5.2 Internes CSS

Internes CSS wird innerhalb eines style-Elements im HTML-Dokument definiert.

<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>

5.3 Externes CSS

Bei externem CSS werden die Gestaltungsregeln in einer separaten CSS-Datei gespeichert.

Die CSS-Datei wird über ein link-Element eingebunden.

HTML-Datei

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

style.css

body {
    background-color: #f3f7fc;
}

h1 {
    color: #1959a6;
}

6. Die wichtigsten CSS-Eigenschaften

7. Maßeinheiten in CSS

In CSS werden verschiedene Maßeinheiten verwendet.

Beispiel

.container {
    width: 80%;
    max-width: 1100px;
    padding: 2rem;
}

8. Was bedeutet Cascading?

Das Wort Cascading beschreibt, wie der Browser entscheidet, welche CSS-Regeln angewendet werden, wenn mehrere Regeln dasselbe Element betreffen.

Dabei spielen unter anderem Herkunft, Wichtigkeit, Spezifität und Reihenfolge der Regeln eine Rolle.

Beispiel

p {
    color: blue;
}

p {
    color: green;
}

In diesem Beispiel wird der Text grün dargestellt, weil beide Regeln dieselbe Spezifität besitzen und die zweite Regel später steht.

9. CSS-Kommentare

Kommentare helfen dabei, CSS-Code zu dokumentieren und übersichtlich zu strukturieren.

SQL-Code

/* Das ist ein CSS-Kommentar */

h1 {
    color: blue;
}

/* Navigation gestalten */
nav {
    background-color: #1959a6;
}

Kommentare werden vom Browser nicht als Gestaltungsregeln ausgeführt.

10. Praktisches Beispiel: Eine Schaltfläche gestalten

HTML-Code

<a href="#" class="button">
    Mehr erfahren
</a>

CSS-Code

.button {
    display: inline-block;
    background-color: #1959a6;
    color: white;
    padding: 10px 18px;
    border-radius: 7px;
    text-decoration: none;
}

Ergebnis

Mit wenigen CSS-Eigenschaften wird ein einfacher Link optisch wie eine Schaltfläche dargestellt.

11. Praktische Übungen

h2 {
    color: blue;
}

p {
    font-size: 18px;
}

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

.karte {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}

12. Zusammenfassung

CSS ist eine Stylesheet-Sprache zur Gestaltung von Webseiten. CSS-Regeln bestehen aus Selektoren, Eigenschaften und Werten.

CSS kann inline, intern oder extern eingebunden werden. Für größere Projekte empfiehlt sich die Verwendung externer CSS-Dateien.

In den nächsten Kapiteln werden Selektoren, Farben, Schriftarten, das Box-Modell und moderne Layouttechniken behandelt.