CSS pur! - Ultimative Weblösungen mit Stil

In der professionellen Gestaltung von Websites kommt niemand mehr um Cascading Style Sheets herum. Erst mit dem Einsatz von CSS ist eine Trennung von Layout und Design möglich. Die Vorteile liegen auf der Hand: Suchmaschinenoptimierung, rasche Umsetzung von Designänderungen, Umsetzung von Templates für Content Management Systeme und Barrierefreiheit. Das Buch CSS in der Praxis gibt einen umfassenden Überblick in die umfangreiche Welt der Cascading Style Sheets. Zu Beginn erhalten Sie fundiertes Wissen zu CSS, Sie lernen die Grundlagen auf einem lösungsorientierten Anwender-Level, perfekt erklärt für Einsteiger und Fortgeschrittene! Dieses Wissen hilft Ihnen den weiteren großen Praxis-Teil des Buchs noch besser zu verstehen. Anhand von drei kompletten Websites sehen Sie wie Sie CSS problemlos einsetzen um unterschiedliche Designwünsche zu realisieren. Jedes dieser Designs hat einen anderen Grundaufbau und andere Lösungen bei der Umsetzung, die verständlich erklärt werden. Viele der CSS-Elemente lassen sich untereinander kombinieren sodass sich unzählige Möglichkeiten und Wege zur Umsetzung von Websites eröffnen!


Leseprobe:

2 CSS-Basics (S. 43-44)

Im vorhergehenden Kapitel Grundlegendes haben wir uns ausführlich mit den Vorbereitungen für die nun folgenden Kapitel {2 CSS-Basics} und {3 Prototypen} beschäftigt: Wir wissen grob, um was es bei CSS geht, haben eine perfekte Arbeits- und Testumgebung eingerichtet, uns vielleicht die Referenzen als Lesezeichen in unserem Browser abgelegt, uns von CSS-Zen-Garden inspirieren lassen und sind somit fit und gut ausgerüstet, um mit der Praxis zu starten. In diesem nun folgenden Kapitel beginnen wir gleich nach der Dokumenttyp-Deklaration mit dem Aufbau einer

XHTML-Seitenstruktur

keine Sorge, wir langweilen Sie nun nicht mit dem korrekten Öffnen und Schließen von HTML-Tags, sondern hier geht es darum, die sinnvolle Reihenfolge und Bezeichnung für die Inhalte festzulegen. Danach geht es schon weiter mit CSS-Einbindung, der Unterscheidung von Block- versus Inline-Elementen, den CSS-Maßeinheiten, der Erläuterung der Kaskade, dem Box-Modell, der Positionierung uvm.

Sie können dieses Kapitel einerseits Schritt für Schritt durchgehen oder aber auch sofort mit der Umsetzung der Prototypen starten (ab Seite 130) und dieses Kapitel nur zum Nachschlagen verwenden. XHTML-Seitenstruktur Wir haben nun im vorherigen Abschnitt vieles über Zugänglichkeit und Barrierefreiheit besprochen – in diesem Abschnitt setzen wir die Theorie in die Praxis um und beschäftigen uns im ersten Schritt mit dem Aufbau einer HTML-Seite. Dabei geht es hier weniger um das HTML-Grundgerüst als vielmehr um richtige – semantisch sinnvolle – Be- und Auszeichnung der Inhalte, so dass diese sowohl von Suchmaschinen als auch behinderten Menschen besser wahrgenommen werden. Vorweg werfen wir noch einen kurzen Blick auf die Dokumenttyp-Deklaration:

Dokumenttyp-Deklaration (DTD)

Erinnern Sie sich? „Ein Dokument ist dann gültig, wenn es eine Dokumenttyp-Deklaration (DTD) enthält, die dazu passende Grammatik einhält und wohlgeformt ist." (Mehr zum Thema Validierung siehe Seite 26.) Die Dokumenttyp-Deklaration (engl. doctype declaration) ist sozusagen die Inhaltsangabe, sie erklärt dem Browser, in welcher Sprache der nachfolgende Quellcode formuliert ist, welche Elemente vorkommen dürfen und wie diese notiert werden. Achtung: Bei fehlender DTD versuchen Browser zu „erraten", um welche es sich handeln könnte – was eigentümliche Konsequenzen haben kann, und außerdem ist das Dokument dann nicht valide!

DTD-Varianten

Für XHTML gibt es drei mögliche Dokumenttyp-Deklarationen: 1. Strict – die korrekte, strenge Variante: Diese empfehlenswerte Variante ist die sauberste Möglichkeit der Auszeichnung. Die Regeln sind strenger einzuhalten – was aber langfristig Probleme vermeidet, da Sie von Anfang an korrektes Markup anwenden. Eine Liste aller nicht erlaubten Elemente und Attribute finden Sie hier: http://de.selfhtml.org/html/referenz/varianten.htm#typen.