Schlagwortarchiv für: CSS

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.

CSS Experte und Autor Peter Müller drückt es ganz treffend aus – alle Webseiten bestehen im Wesentlichen aus kleinen Kisten. Diese Webseite übrigens auch. Die Überschrift, das Logo und selbst dieser Satz – alle sind in kleinen, rechteckigen Kästchen untergebracht. In diesem Kurs lernen Sie wie Sie diese Kisten mit HTML erschaffen und über CSS (Cascading Style Sheets) ihr Aussehen sowie ihre Position verändern können.
Wie bei jeder Sprache müssen wir auch bei CSS zunächst ein Paar Vokabeln und Grammatikregeln pauken. Als Schreibwerkzeug können Sie einen beliebigen Editor verwenden. Von Notepad (kostenlos) bis Adobe Dreamweaver (ca. 1000 EUR) existieren eine Menge von nützlichen Tools. Notepad++ ist ebenso kostenlos, ist einsteiger freundlich und erleichtert das Erstellen von HTML und CSS Dokumenten.
Obwohl dieser Kurs CSS als Überschrift trägt, ist es zunächst wichtig sich mit HTML zu beschäftigen. Mit HTML, Hypertext Markup Language (engl. für Hypertext-Auszeichnungssprache), legen Sie die Kästchen an, die Sie später mit CSS gestalten können.

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.