Dieser Beitrag ist Teil des CSS Kurses.

In diesem Schritt lernen Sie die Schriftart und die Schriftgröße über CSS zu steuern. Dies können Sie mit einigen wenigen Anweisungen erledigen. Da im CSS das Vererbungsprinzip gilt und alle Kästchen innerhalb des body Kästchens dessen Einstellungen erben (also übernehmen), müssen Sie erst einmal nur den body anpassen.
Die Schriftart wird über die Eigenschaft font-family festgelegt. Sie können die gewünschten Schriftarten der Reihe nach definieren. Wird die erste Schriftart auf dem Computer des Users nicht gefunden, versucht der Browser es mit der zweiten usw. Wenn alle Stricke reißen, können Sie angeben, ob es eine Schriftart mit oder ohne (sans) Serifen sein soll.
Ein Beispiel:


body {
    background-color: #353535;
    color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

Die Schriftgröße wird über die Eigenschaft font-size bestimmt. Sie können die Größe in absoluten Werten, wie zum Beispiel Pixel, in relativen Werten, z.B. 1.5 oder 150%, sowie in Ausdrücken wie small beschreiben.


body {
    background-color: #353535;
    color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
}

Der Ausdruck small bedeutet, dass eine Schriftgröße kleiner als normal genommen wird. Der Benutzer kann die Schrift nach wie vor im Browser vergrößern oder verkleinern.
Diese Einstellungen greifen für fast alle Texte auf der Webseite. Aber nur fast. Elemente wie Überschriften <h1> oder Adressangaben <address> werden von dem Browser weiterhin anhand des browserinternen Stylesheets interpretiert.
Um diese Einstellungen überschreiben zu können, müssen Sie diese Elemente explizit in Ihrem Stlyesheet erwähnen.
So wollen wir die Überschrift ein wenig kleiner gestalten.


h1 { font-size: 150%;}
h2 { font-size: 120%;}

Die Prozentangaben beziehen sich auf die im body eingestellte Schriftgröße small.

Anhand des Elements address möchte ich noch ein Paar Gestaltungsmöglichkeiten demonstrieren. Standardmäßig wird der Inhalt von dem address Kästchen kursiv dargestellt. Mit der Eigenschaft font-style können Sie dies ändern.


address {
    font-style: normal;
}

Mit dem Eigenschaft text-align können Sie außerdem den Text zentrieren.


address {
    text-align: center;
}

Den Abstand zwischen den Buchstaben können Sie mit der Eigenschaft letter-spacing bestimmen.


address {
    letter-spacing: 2px;
}

Der Zeilenabstand wird über line-height festgelegt. In unserem Beispiel wird das Eineinhalbfache der Schrift genommen.


address {
    line-height: 1.5;
}

Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

Dieser Beitrag ist ein Teil der VBA Grundlagen Serie.
In diesem Beitrag zeige ich Ihnen wie Sie mit VBA bestimmte Mappen löschen können. Zunächst prüfen wir, ob die zu löschende Mappe überhaupt existiert. Dies geschieht mit dem Befehl Dir. Wenn die Mappe nicht existiert, wird ein leerer String zurückgegeben. Wir prüfen also, ob der Rückgabewerte nicht leer ist. Ist es der Fall, wird die Mappe mit dem Befehl Kill gelöscht. Ansonsten wird eine Meldung mit dem Hinweis ausgegeben, dass die Datei nicht gefunden wurde.

Weiterlesen

Dieser Beitrag ist ein Teil der VBA Grundlagen Serie.
In diesem How To zeige ich wie Sie alle Eigenschaften einer Arbeitsmappe auslesen und verändern können. Zunächst präsentiere ich einen kleinen Trick um schnell Zugriff auf alle Dokumenteigenschaften zu bekommen. Weiterlesen

In diesem How To zeige ich Ihnen wie Sie Planungsfunktionen in SAP Design Studio verwenden können. Zunächst müssen Sie die gewünschte Planungsfunktion zu Ihrer Anwendung hinzufügen. Wählen Sie dazu in Outline den Knoten Planning Objects.
Weiterlesen

Dieser Beitrag ist Teil des CSS Kurses.

Nun wollen wir die Hintergrund- und Schriftfarben unserer Webseite anpassen. Es soll ein bisschen Farbe reinkommen.
Als erstes gestalten wir das Element body dieses stellt den gesamten sichtbaren Bereich einer Webseite dar. Die Hintergrundfarbe wird über das Attribut background-color gesteuert. Die Farbe wird in hexadezimaler Schreibweise, angeführt mit einer Raute, angegeben. Wir wählen ein dunkles Grau aus. Die Anweisung wird mit einem Semikolon abgeschlossen. Das Attribut für die Schriftfarbe lautet einfach color. Wir wählen weiß als Schriftfarbe aus.


body {
background-color: #353535;
color: #ffffff;
}

Die von uns gestalteten IDs werden auch mit Raute angesprochen. Als Nächstes gestalten wir den wrapper Abschnitt. Wir wählen weiß als Hintergrundfarbe und schwarz als Schriftfarbe aus.


#wrapper {
background-color: #ffffff;
color: #000000;
}

Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.