Cascading Style Sheets

Webseiten mit Cascading Style Sheets (CSS) bieten viele Vorzüge. Mit Style Sheets können Sie in einer Datei bestimmen, wie das Layout Ihrer Webseiten aussehen soll. Damit erscheint Ihr Webauftritt in einem einheitlichen und professionellen Layout.

Nebeneffekt: Wollen Sie etwas am Design ändern, müssen Sie nur die CSS-Vorlage editieren - und alle betroffenen Webseiten erneuern sich automatisch. Das ist ein großer Vorteil, der Ihnen Zeit und Arbeit spart, da Sie nicht mehr jede Webseite einzeln bearbeiten müssen. Style Sheets gestatten Formatierungen, die Sie mit bloßem HTML nicht verwirklichen können. So können Sie beispielshalber die Schriftgröße unabhängig skalieren und Objekte pixelgenau positionieren.

Webdesign mit Style Sheets

Verschachtelte Style Sheets definieren Tags in Abhängigkeit anderer Tags. Etwa: Hervorgehobener Text in Überschriften soll grün sein, auf der übrigen Seite aber weiß. Durch den Einsatz von verschachtelten Style Sheets sparen Sie sich viel Tipparbeit, Ihre Seiten werden noch kleiner und sind noch einfacher handzuhaben.

CSS-Datei einbinden

Wollen Sie Ihr Layout, Typographie usw. später umbauen, genügt es, wenn Sie die Style-Sheet-Angaben in der CSS-Datei ändern. Webdesigner gewinnen dadurch eine Menge Zeit und vermeiden Fehler, weil Sie nicht mühsam jede Seite von Hand neu formatieren müssen.

Struktur bestimmen

Bevor Sie mit den Style Sheets loslegen, verschaffen Sie sich einen Überblick über sämtliche Seiteninhalte, die für Ihre Webseite in Frage kommen. Überlegen Sie, wie Sie die Inhalte präsentieren möchten. Aus der Struktur der Inhalte entwickeln Sie ein Navigationskonzept. Möchten Sie das Hauptmenü oben oder links auf der Seite platzieren, und soll der Pfad der aktuellen Seite ständig eingeblendet sein? Benötigen Sie im Webdesign Bereiche, in denen Sie besondere Informationen hervorheben möchten? Wenn Sie die Bereiche festgelegt haben, füllen Sie diese mit verschiedenen Seitenelementen.

Web:Tipps

Promotionagentur

Layout konzipieren

Legen Sie die Elemente fest, die Sie für das Layout Ihrer Seite benötigen. Diese Seitenelemente können zum Beispiel ein Bild für den Seitenhintergrund oder dessen Farbe sein. Wie soll der normale Fließtext aussehen? Als Nächstes gilt es zu überlegen, wie der Text in Menüs oder Kästen erscheinen soll und wie Sie Überschriften formatieren wollen. Das Aussehen von Links kann bei diesen Überlegungen ebenso eine Rolle spielen wie das Aussehen von Listen und Navigationsmenüs.

CSS-Begriffe

Formate beziehen sich auf einzelne HTML-Tags.
Beispiel: Sie weisen dem Überschriften-Tag mit h1 {font-size:24pt;} eine Schriftgröße zu.

Klassen von Formaten verwenden Sie, wenn ein HTML-Tag in verschiedenen Varianten vorkommen soll. Etwa hl.blau und hl.rot.

Pseudoklassen beziehen sich auf Elemente, die sich nicht durch HTML beschreiben lassen, wie etwa 'aktiver Link'. Pseudoklassen erkennen Sie an dem Doppelpunkt hinter dem HTML-Tag: a:active {text-decoration:none}.

Mit verschachtelten Style Sheets weisen Sie einem HTML-Tag Eigenschaften zu, die es nur annimmt, wenn es innerhalb eines weiteren Tags oder einer CSS-Klasse steht. Mit h1 b {font-size:24pt} erscheint eine Überschrift nur dann in der angegebenen Größe, wenn sie von den Tags h1 umschlossen ist.

[ Von: Karl Reichert ]

zurück letzte Seite