Lernen Sie Webseiten mithilfe von CSS zu gestalten

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 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.

Dieser Beitrag ist Teil des CSS Kurses.

In diesem Beitrag erstellen wir unser erstes Stylesheet. Es gibt drei Möglichkeiten ein Stylesheet in eine Webseite einzubinden.
Sie könnten den Inhalt einfach in den head Bereich schreiben.


<style type="text/css"> </style>

Oder Sie speichern den Inhalt in einer zentralen Datei und binden diese in Ihre Seiten ein. Die Änderungen in dieser Datei würden sich dann in allen Webseiten wiederspiegeln.


<link href="style.css" type="text/css" rel="stylesheet" media="screen" />

Zuerst sagen wir wo unsere Datei zu finden ist. Als Nächstes definieren wir den Dateityp. Es ist eine Datei vom Typ Text mit dem Untertyp CSS. Diese Datei hat eine Beziehung (engl. relation) zu der vorhandenen Webseite, sie ist nämlich ihr Stylesheet. Dieses Stylesheet steuert die Darstellung der Inhalte vom Medium screen, das ist die Webseite am Bildschirm. Über dieses Attribut können Sie zwei verschiedene Layouts für Bildschirme und Drucker (media="print") erstellen.
Last but not least können Sie auch innerhalb der Elemente selbst einen Style als Attribut unterbringen. Die Einstellungen gelten dann nur für dieses eine Element.


<span style="text-decoration: underline;">Unterstrichener Text</span>

Unterstrichener Text

Dabei gilt der Grundsatz – je näher der Style an dem zu gestaltenden Element ist, desto wichtiger ist er. So übersteuert das Style als Attribut die Styles im head Bereich.

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 Teil des CSS Kurses.
Im Unterschied zu Papierseiten sind Webseiten und Grafiken getrennt zu betrachten. Im eigentlichen Quelltext steht nur der Verweis auf die Grafik. Erst im Browser werden die beiden Elemente zusammengeführt.
Unser Logo
In diesem Beitrag zeige ich Ihnen, wie Sie Bilder in Ihre Webseite einbinden können. Dazu verwenden wir das Element img (engl. image = Bild). Beim Element img wird kein Endtag wie </img> verwendet. Das Element wird einfach mit einem Schrägstrich beendet. Mit dem Attribut src (engl. source = Quelle) sagen wir dem Browser wo unser Bild zu finden ist. Wenn Sie nur den Dateinamen angeben, sucht der Browser im selben Order in dem sich die jeweilige Webseite befindet.


<img src="logo.jpg" />

Befindet sich das Bild in einem anderen Ordner, müssen Sie den Weg dorthin angeben. Diese Angabe ist relativ zu dem allerersten Ordner der Webseite (in unserem Fall www.denisreis.com). Wenn das Bild unter www.denisreis.com/logo.jpg zu finden ist können Sie den Pfad wie folgt angeben:


<img src="/logo.jpg" />

Sie können natürlich auch die ganze URL reinschreiben, also https://www.denisreis.com/logo.jpg

Nun haben Sie dem Browser gesagt, wo Ihre Grafik zu finden ist. Wenn der Browser Ihren Code liest, läuft er los und holt sich die Grafik, macht aber parallel mit dem Text weiter. Je nach der Internetverbindung und der Größe der Grafik sieht Ihr Besucher erst einmal nichts.
Daher macht es Sinn das img Element um zusätzliche Attribute zu erweitern. Bis die Grafik geladen ist, wollen wir, dass ein alternativer Text angezeigt wird. Dazu verwenden wir das Attribut alt (engl. alternative). Wenn die Grafik noch nicht angezeigt wird, sieht der Benutzer stattdessen den Text. Daher sollte der Text möglichst aussagekräftig sein. In unserem Fall also nicht „Logo“ sondern lieber „CSS Kurs“. Anschließend sagen wir noch wie hoch und wie breit unsere Grafik ist. Um das Bild später in CSS eindeutig identifizieren zu können vergeben wir noch eine ID.


<img src="logo.jpg" id="logo" alt="CSS Kurs" width="222" height="32" />

Die Reihenfolge der Attribute spielt dabei keine Rolle.

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 Teil des CSS Kurses.
Hyperlinks sind die Fäden, die das WorldWideWeb zusammenhalten. Sie verlinken von einer Webseite auf die andere. Sie können sich dieses Element wie eine Ankerkette vorstellen, die eine Webseite mit der anderen verbindet. In diesem Beitrag lernen Sie solche Links zu erstellen.
Das HTML Element für einen Link beginnt mit <a> (engl. anchor = Anker) und wird mit </a> abgeschlossen. Dazwischen steht der Text oder die Grafik. Nach dem Klick auf den Text bzw. das Bild wird der Besucher zum Ziel geleitet. Innerhalb des Elements vergeben Sie mit dem Attribut href noch die Referenz, also das Ziel Ihrer Verlinkung.


<a href="https://www.denisreis.com">Homepage</a>

Mit dem Attribut title können Sie eine Beschreibung zu Ihrem Link angeben. Diese wird angezeigt, wenn Ihr Besucher mit der Maus über dem Link verweilt. Mit dem Attribut target können Sie steuern ob die neue Webseite im selben Fenster oder in einem neuen (_blank) Fenster angezeigt werden soll.


<a href="https://www.denisreis.com" title="Startseite" target="_blank">Homepage</a>

Probieren Sie es selbst aus!

Um innerhalb einer Webseite zu springen, können Sie die von Ihnen gewählten IDs oder den Namen eines Bereichs benutzen. Wenn Ihr Inhalt in dem Bereich <div id="inhalt"> steht können Sie mit dem folgenden Code einen Link zu diesem erstellen.


<a href="#inhalt">Zum Inhalt springen</a>

Alternativ können Sie mit dem Attribut name einen Namen für eine bestimmte Position vergeben und dann auf diese verweisen.


<a name="inhalt"></a>

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.