Einführung in CSS
Cascading Style Sheets (CSS) sind ein zentrales Werkzeug zur Gestaltung und Formatierung von Webseiten. Mit CSS kannst du das Aussehen und Layout von HTML-Dokumenten unabhängig von deren Struktur definieren.
8.1. Was ist CSS?
CSS steht für Cascading Style Sheets und ist eine Stylesheet-Sprache, die verwendet wird, um das Design und Layout von HTML-Dokumenten zu bestimmen. CSS ermöglicht es dir, Stile für verschiedene HTML-Elemente festzulegen, wie z.B. Farben, Schriftarten, Abstände und Positionierungen.
Vorteile von CSS:
- Trennung von Inhalt und Design: HTML für Struktur und Inhalt, CSS für Design und Layout.
- Wiederverwendbarkeit: Ein CSS-Stylesheet kann auf mehrere HTML-Dokumente angewendet werden.
- Wartbarkeit: Änderungen am Design können durch Anpassungen an den CSS-Dateien zentral verwaltet werden.
8.2. Einbindung von CSS
Es gibt drei Möglichkeiten, CSS in HTML einzubinden:
- Inline-CSS: Direkt im HTML-Element.
- Internes CSS: Innerhalb eines
<style>-Tags im<head>-Bereich des HTML-Dokuments. - Externes CSS: In einer separaten CSS-Datei, die mit dem HTML-Dokument verlinkt wird.
Inline-CSS:
<p style="color: red; font-size: 20px;">Dieser Text ist rot und 20px groß.</p>
Internes CSS:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internes CSS</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Dieser Text ist blau und 18px groß.</p>
</body>
</html>
Externes CSS:
HTML-Datei:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Externes CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Dieser Text wird durch externes CSS gestylt.</p>
</body>
</html>
CSS-Datei (styles.css):
p {
color: green;
font-size: 16px;
}
8.3. Grundlegende CSS-Syntax
CSS besteht aus Selektoren, Eigenschaften und Werten. Die grundlegende Struktur einer CSS-Regel sieht wie folgt aus:
selektor {
eigenschaft: wert;
}
- Selektor: Bestimmt, auf welche HTML-Elemente die Regel angewendet wird.
- Eigenschaft: Definiert den Aspekt des Designs, der geändert wird (z.B. Farbe, Schriftgröße).
- Wert: Gibt an, wie die Eigenschaft geändert wird.
Beispiele:
/* Selektiert alle p-Elemente und setzt die Textfarbe auf blau und die Schriftgröße auf 18px */
p {
color: blue;
font-size: 18px;
}
/* Selektiert das Element mit der ID "header" und setzt den Hintergrund auf grau */
#header {
background-color: grey;
}
/* Selektiert alle Elemente mit der Klasse "highlight" und setzt die Textfarbe auf rot */
.highlight {
color: red;
}
8.4. Selektoren
CSS bietet verschiedene Arten von Selektoren, um HTML-Elemente zu stylen:
Elementselektoren: Selektieren HTML-Elemente nach ihrem Tag-Namen.
h1 {
color: blue;
}
Klassenselektoren: Selektieren HTML-Elemente nach ihrer Klasse.
.highlight {
background-color: yellow;
}
<p class="highlight">Dieser Text ist hervorgehoben.</p>
ID-Selektoren: Selektieren ein HTML-Element nach seiner ID.
#main {
font-size: 20px;
}
<div id="main">Dies ist der Hauptbereich.</div>
Attributselektoren: Selektieren HTML-Elemente nach ihren Attributen.
input[type="text"] {
border: 1px solid black;
}
<input type="text" placeholder="Text eingeben">