Mit CSS, den Cascading Style Sheets, kann man Elemente einer Webseite anpassen – so lassen sich zum Beispiel Texte schnell und einfach formatieren und die Farbe des Textes, die Schriftgröße und die Schriftart ändern, um den Text nach eigenen Wünschen zu gestalten.
Farbe definieren
color:black;
<div style="color:black;">Beispieltext</div>
So sieht es aus:
Beispieltext
Fetter Text und andere Farbe
Statt schwarz kann man auch eine andere Farbe wählen – statt dem Farbwert als Text kann man die Farbe auch als 6-stelligen Hexadezimalwert angeben. Durch das Attribut “font-weight” kann man den Text auch fett darstellen lassen.
color:#FFFFFF;
font-weight:bold;
<div style="color:white;font-weight:bold;">Beispieltext</div>
So sieht es aus:
Beispieltext
Andere Schriftart:
Man kann zahlreiche verschiedenen Schriften nutzen, um den Text zu formatieren. Wenn man dabei keine Webfonts nutzt, die mit der Seite geladen werden, sollte man auf Scriften zurückgreifen, die auf allen Systemen vorhanden sind, damit der Browser keine alternative Schrift wählen muss.
color:black;
font-weight:bold;
font-family:arial;
<div style="color:black;font-weight:bold;font-family:arial;">Beispieltext</div>
So sieht es aus:
Beispieltext
Alternativ kann man statt der Serifenlosen Arial-schrift auf die klassisch wirkende Times wählen:
color:black;
font-weight:bold;
font-family:times;
So sieht es aus:
Beispieltext
Andere Schriftgröße
color:black;
font-size:23px;
<div style="color:black;font-size:23px;">Beispieltext</div>
So sieht es aus:
Beispieltext
CSS Befehle als Klasse definieren
Wenn die CSS Befehle für mehrere Elemente einer Webseite übernommen werden sollen, lassen sie sich auch einmal als CSS Klasse definieren und später den einzelnen Elementen zuweisen: Das spart nicht nur doppelte Zeichen, sondern ist auch einfacher, wenn Werte geändert werden sollen. Dazu bindet man entweder eine CSS Datei ein, in der man die Informationen kopiert, oder fügt in den <head> Bereich der Seite die gewünschten Style-Informationen ein, zum Beispiel so:
<style type="text/css">
#uhrzeit {
color:black;
font-weight:bold;
font-size:27px;
}
#datum {
color:black;
font-weight:normal;
font-size:15px;
}
</style>
Jetzt kann man einem Element die vorher definierte Klasse zuweisen:
<div class="datum"></div>
<div class="uhrzeit"></div>