Kapitel 6: Textstile

Text ist das wichtigste Element auf den meisten Webseiten. In diesem Kapitel lernen Sie, wie Sie Text schön und lesbar gestalten!

6.1 Schriftbezogene Eigenschaften

1. Schriftart (font-family)

Legt die Schriftart des Textes fest.

Syntax:

css

selektor {
    font-family: schriftart1, schriftart2, generischer-name;
}

Beispiel:

css

/* Einzelne Schriftart */
p {
    font-family: Arial, sans-serif;
}

/* Mehrere Schriftarten (Fallback) */
h1 {
    font-family: 'Times New Roman', Times, serif;
}

/* Schriftarten mit Leerzeichen (Anführungszeichen verwenden) */
.spezial-text {
    font-family: 'Courier New', Courier, monospace;
}

💡 Wichtige Tipps:

✅ Immer einen Generischen Namen als Fallback angeben (serif, sans-serif, monospace, cursive, fantasy)
✅ Schriftarten mit Leerzeichen in Anführungszeichen setzen
✅ Websichere Schriftarten verwenden (Arial, Helvetica, Times New Roman, Courier New)

Empfohlene Schriftart-Kombinationen:

css

/* Für Überschriften (serif) */
h1, h2, h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Für Fließtext (sans-serif - besser lesbar auf Bildschirmen) */
body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Für Code (monospace) */
code, pre {
    font-family: 'Courier New', Courier, monospace;
}

2. Schriftgröße (font-size)

Legt die Größe des Textes fest.

Einheiten:

px (Pixel) - Feste Größe (am häufigsten verwendet)
em / rem - Relative Größe (besser für responsives Design)
% - Prozentual zur Standardgröße
small, medium, large - Schlüsselwörter

Beispiel:

css

/* Feste Größe in Pixeln */
p {
    font-size: 16px;
}

/* Relative Größe (1.5 mal die Standardgröße) */
h2 {
    font-size: 1.5em;
}

/* Relative Größe basierend auf der Wurzel-Element-Größe */
h1 {
    font-size: 2rem;
}

/* Prozentual */
.small-text {
    font-size: 80%;
}

/* Schlüsselwörter */
.very-small {
    font-size: small;
}

📊 Empfohlene Schriftgrößen:

css

h1 { font-size: 2rem; }      /* 32px (bei 16px Standard) */
h2 { font-size: 1.5rem; }    /* 24px */
h3 { font-size: 1.25rem; }   /* 20px */
p { font-size: 1rem; }       /* 16px (Standard) */
small { font-size: 0.875rem; } /* 14px */

3. Schriftgewicht (font-weight)

Legt die Stärke der Schrift fest.

Werte:

normal (entspricht 400)
bold (entspricht 700)
Zahlen von 100 bis 900 (100 = sehr dünn, 900 = sehr dick)

Beispiel:

css

/* Schlüsselwörter */
p {
    font-weight: normal;
}

strong {
    font-weight: bold;
}

/* Zahlen */
h1 {
    font-weight: 900; /* Sehr dick */
}

h2 {
    font-weight: 300; /* Dünn */
}

/* Überschriften fett machen */
h1, h2, h3 {
    font-weight: bold;
}

4. Schriftstil (font-style)

Legt den Stil der Schrift fest (kursiv oder normal).

Werte:

normal - Normale Schrift
italic - Kursiv
oblique - Geneigt (ähnlich wie kursiv)

Beispiel:

css

/* Normaler Text */
p {
    font-style: normal;
}

/* Kursiver Text */
.emphasis {
    font-style: italic;
}

/* Zitat kursiv machen */
blockquote {
    font-style: italic;
    color: #666666;
    border-left: 4px solid #cccccc;
    padding-left: 15px;
}

6.2 Textbezogene Eigenschaften

1. Textfarbe (color)

Legt die Farbe des Textes fest.

Farbwerte:

Farbnamen (red, blue, green)
Hexadezimal (#ff0000, #00ff00, #0000ff)
RGB (rgb(255, 0, 0))
RGBA (rgba(255, 0, 0, 0.5) - mit Transparenz)
HSL (hsl(0, 100%, 50%))

Beispiel:

css

/* Farbnamen */
h1 {
    color: blau;
}

/* Hexadezimal (am häufigsten verwendet) */
p {
    color: #333333; /* Dunkelgrau */
}

/* RGB */
.warning {
    color: rgb(255, 0, 0); /* Rot */
}

/* RGBA (mit Transparenz) */
.semi-transparent {
    color: rgba(0, 0, 255, 0.5); /* Halb-transparentes Blau */
}

/* HSL */
.custom-color {
    color: hsl(120, 100%, 50%); /* Grün */
}

🎨 Farbgebungsschema-Tipps:

css

/* Haupttext (dunkelgrau, nicht reines Schwarz) */
body {
    color: #333333;
}

/* Sekundärer Text (mittleres Grau) */
.secondary-text {
    color: #666666;
}

/* Links (Blau) */
a {
    color: #0066cc;
}

/* Fehlermeldungen (Rot) */
.error {
    color: #cc0000;
}

/* Erfolgsmeldungen (Grün) */
.success {
    color: #009900;
}

2. Textausrichtung (text-align)

Legt die horizontale Ausrichtung des Textes fest.

Werte:

left - Linksbündig
right - Rechtsbündig
center - Zentriert
justify - Blocksatz (beide Ränder ausrichten)

Beispiel:

css

/* Überschriften zentrieren */
h1, h2, h3 {
    text-align: center;
}

/* Normalen Text linksbündig */
p {
    text-align: left;
}

/* Gedicht zentrieren */
.poem {
    text-align: center;
    font-style: italic;
}

/* Blocksatz für lange Absätze */
.long-text {
    text-align: justify;
}

3. Textdekoration (text-decoration)

Legt Linien am Text fest (Unterstreichung, Durchstreichung, etc.).

Werte:

none - Keine Dekoration
underline - Unterstrichen
overline - Überstrichen
line-through - Durchgestrichen

Beispiel:

css

/* Links standardmäßig nicht unterstreichen */
a {
    text-decoration: none;
}

/* Links beim Darüberfahren unterstreichen */
a:hover {
    text-decoration: underline;
}

/* Durchgestrichener Text (für erledigte Aufgaben) */
.done {
    text-decoration: line-through;
    color: #999999;
}

/* Überstrichener Text */
.overline-text {
    text-decoration: overline;
}

💡 Tipp: Entfernen Sie die Standard-Unterstreichung von Links für ein modernes Design!

css

a {
    text-decoration: none;
    color: #0066cc;
}

a:hover {
    text-decoration: underline;
}

4. Text Einzug (text-indent)

Legt den Einzug der ersten Zeile fest (nützlich für Absätze).

Beispiel:

css

/* Erste Zeile eines Absatzes einziehen (chinesische Lesegewohnheiten) */
p {
    text-indent: 2em; /* 2 Zeichen Breite einziehen */
    margin-bottom: 15px;
}

/* Oder fester Wert in Pixeln */
.indent-p {
    text-indent: 30px;
}

5. Zeilenhöhe (line-height)

Legt den Abstand zwischen den Zeilen fest. Sehr wichtig für Lesbarkeit!

Werte:

Zahlen (1.6, 1.5) - Empfohlen (relativ zur Schriftgröße)
Pixel (24px)
Prozent (150%)

Beispiel:

css

/* Gute Lesbarkeit für Fließtext */
p {
    line-height: 1.6; /* 1.6 mal der Schriftgröße */
}

/* Engerer Zeilenabstand für Überschriften */
h1, h2, h3 {
    line-height: 1.2;
}

/* Fester Zeilenabstand in Pixeln */
.fixed-line-height {
    line-height: 24px;
}

📊 Empfohlene Zeilenhöhen:

Überschriften: 1.2 bis 1.4
Fließtext: 1.5 bis 1.8
Code: 1.4 bis 1.6

6.3 Anfänger-Tipps: Schriftkompatibilitätsprobleme

Problem 1: Schriftarten werden nicht angezeigt

Grund: Die Schriftart ist auf dem Gerät des Benutzers nicht installiert.

Lösung:

✅ Immer Fallback-Schriftarten angeben
✅ Websichere Schriftarten verwenden
✅ Google Fonts verwenden (kostenlose Webschriften)

Google Fonts verwenden:

html

<!-- In den <head>-Bereich einfügen -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

css

/* In der CSS-Datei verwenden */
body {
    font-family: 'Open Sans', Arial, sans-serif;
}

Problem 2: Text ist auf verschiedenen Browsern unterschiedlich

Grund: Verschiedene Browser haben unterschiedliche Standardstile.

Lösung: ✅ CSS-Reset oder Normalize.css verwenden

css

/* Einfaches CSS-Reset für Schriftarten */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
}

Problem 3: Schriftgröße passt sich nicht an verschiedene Bildschirmgrößen an

Grund: Verwendung von festen Pixel-Werten.

Lösung: ✅ Relative Einheiten verwenden (rem, em)

css

/* Schlecht: Feste Pixel */
p {
    font-size: 16px;
}

/* Gut: Relative Einheiten */
p {
    font-size: 1rem; /* 16px (Standard) */
}

h1 {
    font-size: 2rem; /* 32px */
}

/* Media Queries für verschiedene Bildschirmgrößen */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem; /* Kleinere Überschriften auf Handys */
    }
}

6.4 Praxis: Artikel, Überschriften und Links gestalten

Lassen Sie uns das Gelernte in einem praktischen Beispiel anwenden!

🎯 Aufgabe

Erstellen Sie eine HTML-Seite mit:

Einer Hauptüberschrift (<h1>)
Einer Unterüberschrift (<h2>)
Einem oder mehreren Absätzen (<p>)
Einem oder mehreren Links (<a>)

Stylen Sie diese Elemente so, dass sie professionell und lesbar aussehen.

📄 Lösung

HTML (index.html):

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Artikel Seite</title>
    <link rel="stylesheet" href="style.css">
    <!-- Google Fonts einbinden -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <article class="blog-post">
        <h1>CSS Textstile lernen</h1>
        
        <h2>Warum ist Typografie wichtig?</h2>
        
        <p>Typografie ist eines der wichtigsten Elemente im Webdesign. Gute Typografie macht Text nicht nur lesbar, sondern auch ästhetisch ansprechend.</p>
        
        <p>Dies ist ein <a href="#">Link innerhalb eines Absatzes</a>. Links sollten deutlich erkennbar, aber nicht störend sein.</p>
        
        <h2>Wichtige Tipps</h2>
        
        <p class="highlight">Dieser Absatz ist besonders wichtig und wurde hervorgehoben.</p>
        
        <p>Besuchen Sie <a href="https://www.example.com" target="_blank">Example.com</a> für weitere Informationen.</p>
    </article>
</body>
</html>

CSS (style.css):

css

/* ===== Grundlegende Einstellungen ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1rem; /* 16px Standard */
    line-height: 1.6;
    color: #333333;
    background-color: #f5f5f5;
    padding: 20px;
}

/* ===== Artikel-Container ===== */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ===== Überschriften ===== */
h1 {
    font-family: 'Roboto', 'Times New Roman', serif;
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    color: #222222;
    line-height: 1.2;
    margin-bottom: 20px;
    border-bottom: 3px solid #0066cc;
    padding-bottom: 10px;
}

h2 {
    font-family: 'Roboto', 'Times New Roman', serif;
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    color: #444444;
    line-height: 1.3;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* ===== Absätze ===== */
p {
    margin-bottom: 20px;
    text-align: justify; /* Blocksatz für bessere Lesbarkeit */
}

/* Hervorgehobener Absatz */
.highlight {
    background-color: #fff9e6;
    border-left: 4px solid #ffcc00;
    padding: 15px;
    font-weight: 600;
    color: #666600;
}

/* ===== Links ===== */
a {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

a:hover {
    color: #ff6600;
    text-decoration: underline;
}

a:visited {
    color: #800080;
}

a:active {
    color: #cc0000;
}

/* ===== Responsive Anpassungen ===== */
@media (max-width: 768px) {
    .blog-post {
        padding: 20px;
    }
    
    h1 {
        font-size: 2rem; /* Kleinere Überschriften auf Handys */
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    p {
        text-align: left; /* Linksbündig auf Handys (Blocksatz sieht oft schlecht aus) */
    }
}

🔍 Erklärung des Codes

@import url('https://fonts.googleapis.com/css2?family=...');: Bindet Google Fonts ein (Roboto für Überschriften, Open Sans für Fließtext)
font-family: 'Open Sans', Arial, sans-serif;: Verwendet Open Sans, falls nicht verfügbar Arial, falls nicht verfügbar eine serifenlose Schrift
line-height: 1.6;: Angenehmer Zeilenabstand für Fließtext
text-align: justify;: Blocksatz für professionelleres Aussehen
transition: color 0.3s ease;: Sanfter Farbübergang beim Darüberfahren
Media Queries: Passt die Größe auf kleineren Bildschirmen an

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Schriftbezogene Eigenschaften (font-family, font-size, font-weight, font-style)
✅ Textbezogene Eigenschaften (color, text-align, text-decoration, text-indent, line-height)
✅ Wie man Schriftkompatibilitätsprobleme löst
✅ Wie man eine vollständige Artikelseite mit schönen Texten gestaltet

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

Hintergrundstile erlernen (Farben, Bilder, Verläufe)
Hintergrundbilder steuern
Visualisierungseffekte erstellen

Bereit für mehr? Los geht's! 🎨

Kapitel 6: Textstile ​

6.1 Schriftbezogene Eigenschaften ​

1. Schriftart (font-family) ​

2. Schriftgröße (font-size) ​

3. Schriftgewicht (font-weight) ​

4. Schriftstil (font-style) ​

6.2 Textbezogene Eigenschaften ​

1. Textfarbe (color) ​

2. Textausrichtung (text-align) ​

3. Textdekoration (text-decoration) ​

4. Text Einzug (text-indent) ​

5. Zeilenhöhe (line-height) ​

6.3 Anfänger-Tipps: Schriftkompatibilitätsprobleme ​

Problem 1: Schriftarten werden nicht angezeigt ​

Problem 2: Text ist auf verschiedenen Browsern unterschiedlich ​

Problem 3: Schriftgröße passt sich nicht an verschiedene Bildschirmgrößen an ​

6.4 Praxis: Artikel, Überschriften und Links gestalten ​

🎯 Aufgabe ​

📄 Lösung ​

🔍 Erklärung des Codes ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

Kapitel 6: Textstile

6.1 Schriftbezogene Eigenschaften

1. Schriftart (font-family)

2. Schriftgröße (font-size)

3. Schriftgewicht (font-weight)

4. Schriftstil (font-style)

6.2 Textbezogene Eigenschaften

1. Textfarbe (color)

2. Textausrichtung (text-align)

3. Textdekoration (text-decoration)

4. Text Einzug (text-indent)

5. Zeilenhöhe (line-height)

6.3 Anfänger-Tipps: Schriftkompatibilitätsprobleme

Problem 1: Schriftarten werden nicht angezeigt

Problem 2: Text ist auf verschiedenen Browsern unterschiedlich

Problem 3: Schriftgröße passt sich nicht an verschiedene Bildschirmgrößen an

6.4 Praxis: Artikel, Überschriften und Links gestalten

🎯 Aufgabe

📄 Lösung

🔍 Erklärung des Codes

📝 Zusammenfassung

🎯 Nächste Schritte