Einführung in CSS
CSS (Cascading Style Sheets) ist eine Sprache, die das Aussehen und Layout von HTML-
Elementen auf einer Webseite definiert. Mit CSS kannst du Farben, Abstände,
Schriftarten und vieles mehr anpassen. Es gibt drei Möglichkeiten, CSS in einem
Dokument zu verwenden:
1. Inline-CSS
CSS wird direkt im HTML-Tag definiert. Dies ist praktisch für kleine Anpassungen, aber
nicht sehr übersichtlich:
<p style="color: red; font-size: 20px;">Das ist ein roter
Text.</p>
2. Internes CSS
CSS wird im <style>-Tag innerhalb des <head>-Bereichs geschrieben:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Das ist ein blauer Text.</p>
</body>
</html>
3. Externes CSS
CSS wird in einer separaten Datei (z. B. styles.css) gespeichert und mit einem <link>-Tag
eingebunden:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Das ist ein Text mit externer CSS-Datei.</p>
</body>
</html>
, Inhalt der Datei styles.css:
p {
color: green;
font-size: 16px;
}
Unterschied zwischen HTML-Tag und CSS-Selektor
HTML-Tag: Bezeichnet ein Element in deinem HTML-Dokument, z. B. <p>, <div> oder
<h1>.
CSS-Selektor: Wird verwendet, um ein HTML-Element zu stylen. Es gibt verschiedene
Selektoren:
Tag-Selektor: p (wählt alle <p>-Tags aus)
Klassen-Selektor: .class (wählt Elemente mit einer bestimmten Klasse aus)
ID-Selektor: #id (wählt ein Element mit einer bestimmten ID aus)
Hier ist eine ausführlichere Tabelle mit einer breiten Auswahl an CSS-Eigenschaften, die
sowohl grundlegende als auch fortgeschrittene Konzepte abdeckt:
CSS-Syntax: Aufbau einer CSS-Regel
Eine CSS-Regel besteht aus zwei Hauptbestandteilen: einem Selektor und einem
Deklarationsblock.
1. Selektor:
Der Selektor zeigt auf das HTML-Element, das du gestalten möchtest.
Beispielsweise wählt der Selektor p alle <p>-Elemente aus.
2. Deklarationsblock:
o Der Deklarationsblock wird von geschweiften Klammern {} umschlossen.
o Innerhalb des Blocks befinden sich Deklarationen, die aus einer
Eigenschaft (z. B. color) und einem dazugehörigen Wert (z. B. red)
bestehen.
CSS (Cascading Style Sheets) ist eine Sprache, die das Aussehen und Layout von HTML-
Elementen auf einer Webseite definiert. Mit CSS kannst du Farben, Abstände,
Schriftarten und vieles mehr anpassen. Es gibt drei Möglichkeiten, CSS in einem
Dokument zu verwenden:
1. Inline-CSS
CSS wird direkt im HTML-Tag definiert. Dies ist praktisch für kleine Anpassungen, aber
nicht sehr übersichtlich:
<p style="color: red; font-size: 20px;">Das ist ein roter
Text.</p>
2. Internes CSS
CSS wird im <style>-Tag innerhalb des <head>-Bereichs geschrieben:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Das ist ein blauer Text.</p>
</body>
</html>
3. Externes CSS
CSS wird in einer separaten Datei (z. B. styles.css) gespeichert und mit einem <link>-Tag
eingebunden:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Das ist ein Text mit externer CSS-Datei.</p>
</body>
</html>
, Inhalt der Datei styles.css:
p {
color: green;
font-size: 16px;
}
Unterschied zwischen HTML-Tag und CSS-Selektor
HTML-Tag: Bezeichnet ein Element in deinem HTML-Dokument, z. B. <p>, <div> oder
<h1>.
CSS-Selektor: Wird verwendet, um ein HTML-Element zu stylen. Es gibt verschiedene
Selektoren:
Tag-Selektor: p (wählt alle <p>-Tags aus)
Klassen-Selektor: .class (wählt Elemente mit einer bestimmten Klasse aus)
ID-Selektor: #id (wählt ein Element mit einer bestimmten ID aus)
Hier ist eine ausführlichere Tabelle mit einer breiten Auswahl an CSS-Eigenschaften, die
sowohl grundlegende als auch fortgeschrittene Konzepte abdeckt:
CSS-Syntax: Aufbau einer CSS-Regel
Eine CSS-Regel besteht aus zwei Hauptbestandteilen: einem Selektor und einem
Deklarationsblock.
1. Selektor:
Der Selektor zeigt auf das HTML-Element, das du gestalten möchtest.
Beispielsweise wählt der Selektor p alle <p>-Elemente aus.
2. Deklarationsblock:
o Der Deklarationsblock wird von geschweiften Klammern {} umschlossen.
o Innerhalb des Blocks befinden sich Deklarationen, die aus einer
Eigenschaft (z. B. color) und einem dazugehörigen Wert (z. B. red)
bestehen.
