Nun, da wir wissen wie und wo CSS-Code gespeichert wird und wie man bestimmt, auf welche Elemente er sich auswirkt, wollen wir uns die eigentlichen CSS-Propertys etwas genauer ansehen.
Auch, wenn die Auflistung aller möglichen Propertys und Kombinationen den Rahmen dieses Einführungs-Tutorials weit sprengen würde, wollen wir uns mit den am häufigsten verwendeten Funktionen befassen.
Am besten, wir bleiben zum Ausprobieren der Propertys bei unserem <h1>-Tag und dem dazugehörigen Selektor in der CSS-Datei. So können wir einfach immer im H1-Block Ihrer CSS-Datei ergänzen und sich durch die verschiedenen Einstellungen und Kombinationen durchprobieren.
Schriftfarbe
Dieses Attribut kennen wir bereits aus den vorigen Beispielen. Mit color geben wir an, welche Farbe ein selektierter Schriftzug haben soll. Diese Angabe kann entweder in Form einer Wortbezeichnung (englischer Farbname) wie z. B. red, blue, yellow, etc. gemacht werden oder in Form eines Hexadezimalcodes.
Da die Verwendung von vordefinierten Worten das Farbspektrum sehr stark einschränken würde, ist es üblich, Farbangaben als Hexadezimalcode zu schreiben. Dabei muss der Wert immer mit einer Raute (#) beginnen. Man kann sich die Hexadezimalcodes der gewünschten Farbe von einigen Grafikprogrammen anzeigen lassen oder mit kostenlosen Online-Tools, zum Beispiel: http://html-color-codes.info/ (~Link~).
h1 {
Color: #000000;
}
und
h1 {
Color: black;
}
Liefern identische Ergebnisse. Wenn wir noch nicht mit Hexadezimalcodes gearbeitet haben, lohnt es sich auf jeden Fall, etwas mit den oben genannten Tools zu spielen und sich an das Konvertieren von Farbe in Code zu gewöhnen – es wird uns bei zahlreichen Aufgaben im Alltag eines Webdesigners von großer Hilfe sein!
Hintergrundfarbe
Nach demselben Prinzip, nach dem wir soeben die Schriftfarbe verändert haben, können wir auch für Textzeilen oder andere Objekte eine Hintergrundfarbe festlegen, mit dem Attribut background-color.
h1 {
background-color: green;
}
oder als Dezimalcode:
h1 {
background-color: #04B404;
}
Schriftgröße
Bei der Schriftgröße gibt es ebenfalls wieder zwei gängige Methoden. Zum einen können wir die exakte Schriftgröße in Pixel (px) angeben oder einen Prozentwert nennen. Der Prozentwert orientiert sich dann an der Standard-Schriftgröße auf Ihrer Website bzw. der Browsereinstellung des Websitebesuchers, wobei 100 % der Ausgangswert ist. Die Angabe erfolgt über das Attribut font-size.
h1 {
font-size: 42px;
}
oder
h1 {
font-size: 150%;
}
Fetter Text
Fette Schrift erzeugen wir über das Attribut font-weight. Der Standardwert für normale Schrift, ist normal, für fette Schrift verwenden wir bold. Überschriften sind meistens schon von Haus aus fett geschrieben, also werden wir mit
h1 {
font-weight: bold;
}
keinen großen Unterschied bemerken. Eventuell aber mit:
h1 {
font-weight: normal;
}
Bei normalen Texten und Absätzen auf Ihrer Website ist es umgekehrt (Standard: normal).
Kursiver Text
Zum kursiv schreiben gibt es das Attribut font-style. Für kursiven Text geben wir ihm den Wert italic, für normalen text das Attribut normal:
h1 {
font-style: italic;
}
Text-Dekoration
Für die Dekoration Ihres Textes stehen drei Möglichkeiten zur Verfügung: Unterstrichen, Überstrichen, Durchgestrichen. Die Propertys dazu lauten:
h1 {
text-decoration: underline;
}
h1 {
text-decoration: overline;
}
h1 {
text-decoration: line-through;
}
Bei Attributen wie diesem möchten wir vielleicht mehrere Effekte miteinander kombinieren. Das können wir (sofern die Effekte nicht miteinander in Konflikt treten – wie etwas zwei verschiedene Schriftgrößen oder dergleichen) erreichen, indem wir einfach die Werte mit einem Abstand hintereinanderschreiben:
h1 {
text-decoration: underline overline line-through;
}
wird dafür sorgen, dass die Überschriften sowohl unterstrichen als auch überstrichen und durchgestrichen gleichzeitig sind.