CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit der du das Aussehen und Layout von HTML-Elementen gestalten kannst. Während HTML die Struktur deiner Website definiert, sorgt CSS dafür, dass sie optisch ansprechend und übersichtlich wird. Du kannst Farben, Abstände, Schriftarten und vieles mehr steuern – für einzelne Elemente oder ganze Seiten. CSS lässt sich direkt im HTML einbinden oder in eine separate Datei auslagern, was besonders bei größeren Projekten von Vorteil ist.
<body style="background-color: yellow;">
<h1 style="color: red;">Meine Überschrift</h1>
<div style="background-color: cyan; margin-top: 50px;">
<p style="text-align: center;">Dieser Text ist zentriert.</p>
</div>
</body>
Im ersten Beispiel setzen wir die Hintergrundfarbe des gesamten <body>-Bereichs auf Gelb. Das bedeutet: Die ganze Webseite bekommt einen gelben Hintergrund, was mit der CSS-Eigenschaft background-color direkt im HTML-Tag gesteuert wird.
Im zweiten Beispiel färben wir eine Überschrift der Ebene 1 (<h1>) rot. Dafür nutzen wir die CSS-Eigenschaft color, die die Textfarbe bestimmt.
Im dritten Beispiel erstellen wir einen Container mit dem <div>-Element. Diesem geben wir über margin-top: 50px; einen Abstand von 50 Pixeln nach oben, sodass er nicht direkt an vorherige Inhalte anstößt. Gleichzeitig bekommt der Container einen cyanfarbenen Hintergrund (background-color: cyan). Innerhalb dieses Containers befindet sich ein Absatz (<p>), dessen Text mit text-align: center; zentriert dargestellt wird.
Nun wollen wir uns dem <span> Element und weiteren Textdekorationen widmen.
Das <span>-Element ist ein generisches Inline-Container-Element in HTML. Im Gegensatz zum <div>-Element, das als Block-Element fungiert, wird <span> verwendet, um Teile von Text oder Inhalte innerhalb einer Zeile zu markieren oder zu gruppieren.
- Inline-Element: Es verursacht keinen Zeilenumbruch und nimmt nur so viel Platz ein wie sein Inhalt.
- Kein visueller Effekt ohne CSS: Standardmäßig hat
<span>keine visuelle Wirkung auf den Inhalt. - Styling-Möglichkeiten: Besonders nützlich in Kombination mit CSS, um bestimmte Textteile hervorzuheben oder zu formatieren.
- Semantisch neutral: Es trägt keine inhaltliche Bedeutung, sondern dient rein der Strukturierung und Gestaltung.
Dazu kommen noch <strong> um den Text fett zu schreiben und <em> damit er kursiv dargestellt wird.
Füher wurde zum Unterstreichen das Tag <u> benutzt. Es steht semantisch nicht für Betonung oder Wichtigkeit – es ist rein stilistisch und wurde früher oft für Links verwendet. Wenn du gezielt optisch unterstreichen willst (z. B. für Design-Zwecke), kannst du alternativ auch CSS nutzen.
<body>
<h1>CSS Textformatierung mit Inline-Styles</h1>
<p>Normaler Text ohne Formatierung.</p>
<p>Text mit <span style="color: red;">roter Farbe</span> durch span-Element mit Inline-Style.</p>
<p>Text mit <strong>fetter Schrift</strong> durch strong-Element.</p>
<p>Text mit <em>kursiver Schrift</em> durch em-Element.</p>
<p>Text mit <span style="text-decoration: underline;">Unterstreichung</span> durch Inline-Style.</p>
<p>Alle Stile können <strong><em><span style="color: red; text-decoration: underline;">kombiniert</span></em></strong> werden.</p>
</body>CSS im style-Element verwenden
Während Inline-Styles direkt in HTML-Elementen nützlich sein können, bietet das <style>-Element im <head> des HTML-Dokuments eine deutlich bessere Methode, um CSS-Regeln zu organisieren und anzuwenden.
- Bessere Organisation: Alle Stilregeln befinden sich an einem zentralen Ort
- Wiederverwendbarkeit: Regeln können auf mehrere Elemente angewendet werden
- Einfachere Wartung: Änderungen müssen nur einmal vorgenommen werden
- Trennung von Inhalt und Design: Entspricht den Best Practices der Webentwicklung
Im folgenden Beispiel siehst du, wie CSS im <style>-Element definiert wird:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>learn.rainpearl - bc003</title>
<style>
/* Eine rote Überschrift */
h1 {
color: red;
}
/* Ein zentrierter div mit Hintergrundfarbe */
div.container {
background-color: cyan;
margin-top: 50px;
width: 500px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 20px;
box-sizing: border-box;
}
/* Zentrierter Paragraph */
p.centered {
text-align: center;
}
/* Textstile */
.rot {
color: red;
}
strong {
font-weight: bold;
color: #0066cc;
}
em {
font-style: italic;
color: #006600;
}
.unterstrichen {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>CSS im style-Element</h1>
<div class="container">
<p class="centered">Dieser div-Container hat einen türkisen Hintergrund, 50px Abstand nach oben, ist 500px breit und zentriert.</p>
<h2>CSS Textformatierung - Beispiele</h2>
<p>Normaler Text ohne Formatierung.</p>
<p>Text mit <span class="rot">roter Farbe</span> durch span-Element mit CSS-Klasse.</p>
<p>Text mit <strong>fetter Schrift</strong> durch strong-Element.</p>
<p>Text mit <em>kursiver Schrift</em> durch em-Element.</p>
<p>Text mit <span class="unterstrichen">Unterstreichung</span> durch text-decoration.</p>
<p>Alle Stile können <strong><em><span class="rot unterstrichen">kombiniert</span></em></strong> werden.</p>
</div>
</body>
</html>Erklärung der CSS-Selektoren
Im obigen Beispiel werden verschiedene Arten von CSS-Selektoren verwendet: Element-Selektor (h1, strong, em): Wendet Stile auf alle Elemente dieses Typs an Klassen-Selektor (.rot, .unterstrichen): Wendet Stile nur auf Elemente mit der entsprechenden Klasse an Kombinations-Selektor (div.container, p.centered): Wendet Stile nur auf bestimmte Elemente mit einer bestimmten Klasse an Die Verwendung des <style>-Elements im <head> ist ein wichtiger Schritt, um sauberen, wartbaren Code zu schreiben und die Trennung von Inhalt (HTML) und Design (CSS) zu gewährleisten.