Lerne, wie du in Dreamweaver mithilfe von CSS Farbe, Ausrichtung und andere Textmerkmale festlegen kannst.

Im Tutorial Typografie und Web findest du weitere Informationen darüber, wie du das Design deiner Web-Seiten typografisch perfektionieren kannst.

Wenn du die Struktur für deinen Text in HTML anlegst, wird eine Standardschrift verwendet. Durch das Hinzufügen von CSS-Textstilen lassen sich Gliederung, Lesbarkeit und der optische Gesamteindruck deiner Web-Seiten deutlich verbessern.

Um den H1 -Text zu vergrößern, füge die Property font-size unterhalb des H1 -Selektors hinzu. Ein H1 -Element beschreibt die Hauptüberschrift der Web-Seite.

h1 {
margin: 0;
font-size: 48px;
}

Die Standardschrift für HTML-Seiten ist meist Times New Roman. Du kannst die Schriftart ändern, indem du die Property font-family hinzufügst. Trenne mehrere Schriftarten durch Kommata – der Webbrowser verwendet die erste Schriftart aus der Liste, die auf dem Computer des Endanwenders installiert ist. Füge immer „sans-serif“ oder „serif“ am Ende der Liste ein. Dann ist sichergestellt, dass der Browser eine geeignete Schrift wählt.

h1 {
...
font-size: 48px;
font-family: Gotham, Tahoma, sans-serif;
}

Text ist standardmäßig linksbündig. Das kannst du aber durch Hinzufügen der Property text-align ändern. Mögliche Werte sind „left“, „right“, „center“ oder „justified“ (für linke, rechte oder zentrierte Ausrichtung bzw. Blocksatz). Füge die Property text-align: center; zum H1 -Selektor und zum H2 -Selektor hinzu. Ein H2 -Element definiert untergeordnete Überschriften auf der Web-Seite.

h1 {
...
font-family: Gotham, Tahoma, sans-serif;
text-align: center;
h2 {
...
color: #282828;
text-align: center;
}

Die Standardfarbe für Text ist Schwarz. Du kannst die Farbe für das H1 -Element durch Hinzufügen der Property color und Angabe eines Hex-Codes ändern. Wenn du „color:“ eingibst, erscheint ein Kontextmenü. Mache einen Doppelklick auf die Option für Farbe. Klicke dann im Farbmenü auf die Pipette. Klicke in den dunkelorangenen Bereich der Planetengrafik, um die Farbe auszuwählen. Drücke dann die Eingabetaste. Der Hex-Code dieser Farbe wird automatisch hinzugefügt. Du kannst den Hex-Code aber auch manuell eingeben. Beachte, dass ein Semikolon folgen muss, um die Property zu schließen.

h1 {
...
text-align: center;
color: #F47A53;
}

Mithilfe der Property font-style kannst du Text z. B. auch kursiv setzen. Ändere den Textstil des H2 -Elements in kursiv, indem du diese Property mit dem Wert italic hinzufügst.

h2 {
…
text-align: center;
font-style: italic;
}

Mit der Property font-weight kannst du Text dünner oder dicker setzen. Die Schriftstärke wird in einem Vielfachen von 100 ausgedrückt. 100 stellt die geringste und 900 die höchste Stärke dar. Verwende diese Property, um die Schriftstärke des H2 -Elements zu reduzieren.

h2 {
…
font-style: italic;
font-weight: 300;
}

Mit text-transform lässt sich Text in Groß- oder Kleinbuchstaben setzen. Mit letter-spacing kannst du den horizontalen Abstand zwischen allen Buchstaben vergrößern, die durch einen Selektor gesteuert werden. Probiere diese Optionen am H1 -Element aus.

h1 {
...
color: #F67A53;
text-transform: uppercase;
letter-spacing: .08em;
}

Beim Selektor p siehst du die Property line-height. Sie bestimmt den Zeilenabstand im Text. Wenn du line-height löschst, siehst du sofort, wie sich diese Änderung auf die Lesbarkeit des Textes auswirkt. Drücke Befehl+Z (macOS) oder Strg+Z (Windows), um diese Änderung rückgängig zu machen.