Schriftgröße, Schriftart und Schriftfarbe mit CSS steuern

Und weiter geht es mit CSS. Einen Tip habe ich noch für Euch: Wenn Ihr mit CSS herum experimientiert, verwendet am besten extreme Werte um zu schauen, ob das Design der Seite auf Eure änderungen in der CSS überhaupt "hört". ändert also den Hintergrund kurz von weiß auf komplett schwarz, oder so. So sieht man direkt, ob Eure änderungen auch angenommen werden. Danach könnt Ihr den Wert hinein schreiben, der Euch am meisten zusagt.

Schriftfarbe mit CSS ändern

In die geschweiften Klammern des Body-Selektors können wir noch mehr rein schreiben. Wie wäre es z.B. mit einer für die ganze Website fest definierten Schriftfarbe? Das geht ganz einfach mit der Eigenschaft "color". Den Farbwert könnt Ihr wie gehabt ausschreiben, oder mit einem hexadezimalen Wert festlegen. Ich habe mich für die Farbe #4a001a entschieden.

Schriftgröße mit CSS verändern

Die Größe der Schrift hört auf die Eigenschaft "font-size". Danach könnt Ihr wie schon bei der Breite des Bodys die Größe (Höhe) der Schrift in Pixel angeben. Ich verwende im Beispiel-Projekt 12px - große Schrift.

Mit CSS eine andere Schriftart wählen

Das ist ebenfalls einfach. Wenn Ihr eine andere Schriftart, als die von Eurem Browser festgelegte verwenden wollt, dann tragt hinter der Eigenschaft "font-family" einen entsprechenden Wert ein.

Welche Schriftarten es so alles gibt, weß jeder bestimmt aus "Word", oder einem anderen Textbearbeitungsprogramm. Leider können wir in Webdokumenten nicht jede Schriftart verwenden, die uns einfällt. Der Grund: damit der Betrachter der Seite sie mit der Schriftart sehen kann, wie Ihr es hineingeschrieben hat, muss auf seinem Computer diese Schriftart ebenfalls installiert sein. Und das ist nun Mal nicht immer gegeben.

Verzichtet also am besten auf exotische Schriftarten und haltet Euch an die Gängigsten. Diese sind: "Times New Roman", Arial und Verdana.
Meistens stehen in der CSS-Anweisung mehrere Schriftarten drin. Diese sind durch ein Komma voneinander getrennt. Das hat damit zu tun, was ich im vorherigen Absatz beschrieben habe. An erster Stelle steht die von Euch bevorzugte Schriftart. Sollte der Browser des Betrachters sie nicht "beherrschen", versucht er es mit der Alternative, die Ihr im nach der ersten Schriftart angegeben habt. Wenn diese auch nicht gehen sollte, versucht er es mit der dritten usw. Sollte der Computer des Betrachters keine der angegebenen Schriftarten laden können, greift er auf seine Grundeinstellung zurück.

In unserem Projekt habe ich mich für diese Schriftarten entschieden:
verdana, arial, "Times New Roman"

Und so sieht unsere CSS-Datei nun aus:

Quellcode:

body {

width: 1024px;
background: #f2f2f2;
color: #4a001a;
font-size: 12px;
font-family: verdana, arial, "Times New Roman";

}

Auch beim CSS-Code gilt: übersichtlich schreiben! Und vergesst nicht die schließende geschweifte Klammer!

Body positionieren, Ränder mit CSS festlegen

Den Body unserer Datei haben wir ja in der vorher gehenden Lektion auf eine Breite von 1024 Pixel begrenzt. Wie Ihr sehen könnt, beginnt der Text direkt am linken und oberen Bildschirmrand. Andere Anweisungen hat der BODY halt nun Mal nicht erhalten. Das wollen wir nun ändern.

Rand festlegen

Wollen wir, dass der Body einen Abstand von 50 Pixel von oben einhält? Kein Problem! Schreibt in die geschweiften Klammern folgendes hinein:

margin-top: 50px;

Zur Erklärung: Mit "margin" ist die Eigenschaft angesprochen, die für den AUSSENABSTAND eines Elements steht. Da man bei jedem Element (auch beim Body) vier Aussenabstände definieren kann (oben, unten, links, rechts) können wir jede Richtung jeweils für sich definieren. Das passiert in diesem Fall mit dem Anhängsel "-top" (engl.=oben)

Wenn Ihr später diese Seite ganz leicht wiederfinden wollt, empfehle ich Euch das Anlegen von Favoriten bei Mr-Wong! So stehen Euch alle Lesezeichen zu den wichtigsten Compiclub-Lektionen an jedem Internetrechner parat. Ihr findet auf jeder Compiclub-Seite unten links das Mister-Wong-Logo. Mit nur zwei Klicks ist die Seite dann abgespeichert. Ist sehr praktisch - ich nutze es ebenfalls.

Body zentrieren

Ich bin ja ein Freund von in der Mitte des Bildschirms zentrierten Webseiten. (horizontal) Um das zu erreichen müssten wir ja für "margin-left" und "margin-right" den gleichen Wert definieren. Dann wäre die Seite theoretisch zentriert.

Allerdings funktioniert das nicht auf diese Weise, denn jeder Bildschirm ist unterschiedlich. Während ich auf meinem vieleicht einen Links und Rechts - Abstand von jeweils 100 Pixeln brauche, benötigt einer, der mit einem 32 Zoll TFT unterwegs ist deutlich mehr.

Zum Glück gibt es den Wert "auto" den wir margin zuweisen können. Wie das Wort schon sagt wird der Abstand ganz automatisch "gerecht verteilt" Schreibt bitte oberhalb der margin-top Anweisung folgendes: margin: auto;

Es ist wichtig, dass zuerst die margin-Eigenschaft definiert wird und erst dann die margin-top Eigenschaft ins Spiel gebracht wird. Das hat etwas damit zu tun, dass ein Computer den Code immer von oben nach unten abarbeitet. Mit margin: auto; haben wir also für alle 4 Aussenabstände festgelegt, dass diese ich automatisch verteilen sollen. Danach haben wir diese Anweisung mit margin-top: 50px; teilweise aufgehoben. So "versteht" es unser Browser.

Würden wir die Anweisungen in anderer Reihenfolge rein schreiben, würde die margin: auto; die vorherige aufheben und wir hätten den gewünschten Abstand von oben nicht mehr. Probiert einfach selbst etwas herum.

Unsere CSS-Datei sieht also bislang wie folgt aus:

Quellcode:

body {

width: 1024px;
margin: auto;
margin-top: 50px;
background: #f2f2f2;
color: #4a001a;
font-size: 12px;
font-family: verdana, arial, "Times New Roman";

}

In der nächsten Lektion werden wir die Überschriften und die horizontalen Linien definieren, denn diese sind ja auch mit ihren eigenen TAGs markiert. Wenn Ihr Lust habt, könnt Ihr ja schon Mal selber etwas versuchen. Eigentlich kann man vieles schon aus dieser Lektion für die H1 und HR - Tags ableiten.

VIEL SPAß!

<<< zurück II weiter >>>