CSS Text Styling

Einführung

Willkommen zum CSS Text Styling Lab! Im Webdesign ist die Kontrolle des Textaussehens grundlegend für die Erstellung lesbarer, zugänglicher und ästhetisch ansprechender Websites. CSS (Cascading Style Sheets) bietet hierfür einen leistungsstarken Satz von Eigenschaften.

In diesem Lab erhalten Sie praktische Erfahrung mit den gängigsten CSS-Eigenschaften für die Textgestaltung. Sie lernen, wie Sie die Textfarbe ändern, die Schriftgröße anpassen, Text fett formatieren, ihn ausrichten und den Zeilenabstand steuern. Wir werden mit zwei Dateien arbeiten: index.html, die den Inhalt enthält, und style.css, in der Sie Ihre CSS-Regeln schreiben. Sie können Ihre Änderungen in Echtzeit sehen, indem Sie im Lab-Environment zum Tab Web 8080 wechseln.

Legen wir los!

Setze die color-Eigenschaft für die Textfarbe

In diesem Schritt lernen Sie, wie Sie die Farbe von Text mit der CSS-Eigenschaft color ändern. Diese Eigenschaft kann Farbnamen (wie red, blue), Hexadezimalwerte (wie #FF0000), RGB-Werte und mehr akzeptieren.

Suchen Sie zuerst die Datei style.css im Dateiexplorer auf der linken Seite der WebIDE. Klicken Sie darauf, um sie im Editor zu öffnen.

Fügen wir nun eine Regel hinzu, um die Farbe des Absatztextes zu ändern. Wir verwenden einen p-Selektor, um alle Absatz-Elemente anzusprechen. Fügen Sie den folgenden Code in Ihre style.css-Datei ein:

p {
  color: #2980b9;
}

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei style.css. Um das Ergebnis zu sehen, klicken Sie auf den Tab Web 8080 oben in der Benutzeroberfläche. Sie sollten sehen, dass sich die Farbe des Absatztextes zu einem Blauton geändert hat.

Wende die font-size-Eigenschaft in Pixeln an

In diesem Schritt passen wir die Größe unseres Textes mit der Eigenschaft font-size an. Diese Eigenschaft steuert die Größe der Schrift. Obwohl es viele Einheiten gibt, die Sie verwenden können (wie em, rem, %), beginnen wir mit Pixeln (px), die eine feste Größe bieten.

Wir werden den Text des Absatzes für eine bessere Lesbarkeit etwas größer machen. Gehen Sie zurück zu Ihrer style.css-Datei und fügen Sie die font-size-Eigenschaft zur bestehenden p-Regel hinzu.

Ihre p-Selektor-Regel sollte nun wie folgt aussehen:

p {
  color: #2980b9;
  font-size: 18px;
}

Speichern Sie die Datei und wechseln Sie erneut zum Tab Web 8080. Sie werden feststellen, dass der Text im Absatz nun größer ist als zuvor.

Verwende die font-weight-Eigenschaft für fetten Text

In diesem Schritt lernen Sie, wie Sie die Fettheit von Text mit der Eigenschaft font-weight steuern. Diese Eigenschaft kann Schlüsselwortwerte wie normal oder bold oder numerische Werte von 100 bis 900 annehmen.

Wir werden die Überschrift (h1) stärker hervorheben, indem wir ihr Gewicht explizit festlegen. Obwohl Überschriften oft standardmäßig fett sind, stellt die Definition in Ihrem CSS Konsistenz sicher. Wir werden auch den Absatztext fett formatieren.

Ändern Sie Ihre style.css-Datei. Fügen Sie zuerst eine neue Regel für das h1-Element hinzu. Fügen Sie dann die font-weight-Eigenschaft zu Ihrer bestehenden p-Regel hinzu.

h1 {
  font-weight: bold;
}

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
}

Speichern Sie die Datei und überprüfen Sie den Tab Web 8080. Sie werden sehen, dass der Absatztext nun fett ist.

Implementiere die text-align-Eigenschaft zum Zentrieren

In diesem Schritt verwenden wir die text-align-Eigenschaft, um die horizontale Ausrichtung von Text zu steuern. Diese Eigenschaft kann Werte wie left, right, center oder justify haben. Sie ist eine großartige Möglichkeit, Überschriften und andere blockbasierte Textelemente zu positionieren.

Wir werden die Hauptüberschrift unserer Seite zentrieren. Dazu fügen wir die text-align-Eigenschaft zu unserer h1-Regel in style.css hinzu.

Aktualisieren Sie die h1-Regel in Ihrer style.css-Datei, um text-align: center; einzufügen:

h1 {
  font-weight: bold;
  text-align: center;
}

Nachdem Sie die Datei gespeichert haben, aktualisieren Sie den Tab Web 8080. Die <h1>-Überschrift "Welcome to CSS Text Styling" sollte nun perfekt am oberen Rand der Seite zentriert sein.

Füge die line-height-Eigenschaft für Abstände hinzu

In unserem letzten Schritt verbessern wir die Lesbarkeit unseres Absatzes, indem wir den Abstand zwischen den Textzeilen anpassen. Dies geschieht mit der line-height-Eigenschaft.

Die Verwendung eines einheitenlosen Werts für line-height ist eine gängige Best Practice, da sie einen Abstand schafft, der sich auf die Schriftgröße des Elements bezieht. Zum Beispiel bedeutet eine line-height von 1.6, dass der Abstand das 1,6-fache der Schriftgröße beträgt.

Fügen wir unserem Absatz vertikalen Abstand hinzu. Gehen Sie zu Ihrer style.css-Datei und fügen Sie die line-height-Eigenschaft zur p-Regel hinzu.

Ihre endgültige p-Regel sollte wie folgt aussehen:

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
}

Speichern Sie die Datei und sehen Sie sich das Ergebnis im Tab Web 8080 an. Sie werden feststellen, dass der Absatz nun viel besser lesbar ist und einen angenehmeren Zeilenabstand aufweist.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des CSS Text Styling Labs! Sie haben einige der wichtigsten CSS-Eigenschaften zur Steuerung des Erscheinungsbilds von Text auf einer Webseite erfolgreich gelernt und angewendet.

In diesem Lab haben Sie geübt:

• color: Zum Ändern der Textfarbe.
• font-size: Zur Steuerung der Textgröße.
• font-weight: Zum Anpassen der Textstärke (Fettdruck).
• text-align: Zum Festlegen der horizontalen Textausrichtung.
• line-height: Zur Verwaltung des vertikalen Abstands zwischen Textzeilen.

Diese grundlegenden Fähigkeiten sind die Bausteine für die Erstellung gut gestalteter und lesbarer Webinhalte. Experimentieren Sie gerne weiter mit verschiedenen Werten und Eigenschaften in der style.css-Datei. Erkunden Sie weiter, um Ihre CSS-Kenntnisse zu vertiefen!