CSS-Crashkurs

Als begeisterter Hobby-Bastler von Homepages kommt man mittlerweile um Cascading Style Sheets (CSS) nicht mehr herum. Sie erlauben die Gestaltung von HTML-Elementen und ermöglichen so eine Trennung vom Inhalt einer Seite zum Design einer Seite.

Auf eine kurze Nachfrage bei Lycos iQ hin, gibt es hier mal einen kleinen Crashkurs, wie man CSS anwenden kann. Für eine intensivere, ausführlichere und fachlich deutlich kompetentere Auseinandersetzung ist SELFHTML natürlich der beste Ansprechpartner.

 

Eine typische CSS-Auszeichnung ist nach folgendem Muster aufgebaut:

Was-soll-verändert-werden { Welche-Eigenschaft-davon: Wie-soll-es-verändert-werden; }

 

In Fachbegriffen ausgedrückt:

Selektor { Eigenschaft: Wert; }

 

Als Selektor kann man zum Beispiel jeden Textabsatz eines Dokumentes (<p>) nehmen. Damit würde jeder Textabsatz die beschriebenen Eigenschaften bekommen:

p { Eigenschaft: Wert; }

 

Es gibt unzählige Eigenschaften, die man zuweisen. In diesem kleinen Beispiel wollen wir die Schriftfarbe verändern. Die CSS-Eigenschaft für Schriftfarbe heißt ganz simple “color”:

p { color: Wert; }

 

Der Wert jeder Eigenschaft ist natürlich abhängig davon, welche Eigenschaft verändert werden soll. Für “color” sind logischerweise nur Farben erlaubt. Wollte ich die Schriftgröße verändern, muss ich natürlich eine Größenangabe auswählen.
Wollen wir dem Textabsatz nun eine grüne Schriftfarbe verpassen, wählen wir die Farbe (in Hexadezimalnotation) aus.

p { color: #008000; }

 

Das ergibt einen Textabsatz, der in grüner Farbe geschrieben ist:

Dies ist ein Textabsatz in grüner Farbe.

 

Diese Auszeichnung, dass Textabsätze eine grüne Schriftfarbe haben sollen, wird im Head-Bereich einer HTML-Seite, also zwischen <head> und </head>, verpackt. Diese Regeln stehen zwischen diesen beiden HTML-Tags <style type=”text/css”> und </style>. In diesem Beispiel sehe es also folgendermaßen aus:

<style type="text/css"> p { color: #008000; } </style>

 

So, das war ein kleiner Crashkurs zu CSS. Es fehlen viele wichtige Dinge, wie zum Beispiel die Möglichkeit Klassen zu erstellen und damit nur einzelne Textabsätze eine grüne (oder hübschere) Schriftfarbe zu geben. Das Grundprinzip von CSS ist aber hoffentlich deutlich geworden.

Zum Weiterlesen empfehle ich das Kapitel Stylesheets (CSS) von SELFHTML.

Ähnliche Beiträge

Hier schreibt exklusiv für Dich

Marc Pentermann bloggt seit über zehn Jahren, hauptsächlich über technische, netzpolitische und sozialpolitische Themen mit dem Schwerpunkt Arbeit & Arbeitsmarkt. Immer sonntags gibt es einen Sammelbeitrag von lesenswerten Artikeln. Er arbeitet als Berufs- und Sozialpädagoge in der beruflichen Rehabilitation. Seit 2010 lebt er in Österreich (mehr).