CSS-Design in 3 (oder 5) Schritten

Schritt 3: Formatierung

• Beginnend mit einer Grundausstattung .
• Es kaskadiert ... .
• Abweichungen zur Grundausstattung .

Es gibt grundsätzlich zwei Arten von Elementen in HTML.

1. Blockelemente (Absätze,  Überschriften, Tabellen usw.) und
2. Inline-Elemente (Links, Grafiken, Formulare usw.)

Beginnend mit einer Grundausstattung

Für jedes Blockelement, das verwendet wird, sollte ein Muster erstellt werden. Die Muster-Elemente

• sollten die typische Gestaltung des Inhaltsbereichs annehmen (Schriftbild, Abstände) und
• sollten Abstände mittels margin zugewiesen bekommen, dabei empfiehlt sich für margin-bottom immer der Wert 0.

Als Ergebnis sollten Absätze, Listen, Tabellen u.v.m. als Muster vorliegen.

Grundsätzlich sollen alle Grundformatierungen für Text auf Blockelemente angewandt werden (Schriftangaben, Abstände usw.).

Eine weitere Grundregel für die Formatierung ist, dass die Abstände, die beispielsweise ein Absatz hat, zunächst ausschließlich über margin erfolgen sollten und man sollte so vorgehen, dass der Abstand nach unten (margin-bottom) immer 0 ist. Ansonsten kann eine beliebige Aneinanderreihung von Blockelementen zu unberechenbaren Abständen zwischen diesen Elementen führen.

Weitere Abstände nach innen (padding) sind auch möglich, jedoch sollte dies die Ausnahme bleiben.

Man kann für alle Elemente Formatierungen vergeben. Diese beinhalten wie eben beschrieben die Textgestaltung und/oder die Abstände der Blockelemente. Beginnen sollte man mit dem Inhaltsbereich. Für alle vorkommenden Elemente, die üblicherweise auf der Webseite benutzt werden sollen, sollte man Vorlagen bauen und in verschiedenen Kombinationen, Reihenfolgen usw. testen, mit Abständen, Überschriften, Tabellen, Formularelementen, Grafiken für jede erdenkliche bzw. mögliche Aneinanderreihung. Erst wenn der Inhaltsbereich zufriedenstellend getestet ist und die "Grundausstattung" an formatierten Blockelementen für beliebige Inhalte sauber dargestellt wird, kann man sich überlegen, wie die Block- und Inlinelemente in den anderen Bereichen gestaltet werden müssen.

Es kaskadiert ...

Wenn Sie beispielsweise einem Absatz (P) die Schriftart Verdana zugeordnet haben, dann wird jeder Absatz überall auf der Website genau mit der Schriftart erscheinen, sowohl im Inhaltsbereich wie in allen anderen Kästen (sofern diese auch Absätze enthalten). Gleiches gilt natürlich für alle anderen Elemente und CSS-Angaben auch. Umso wichtiger ist es also, dass die "Grundausstattung" für die einzelnen Elemente möglichst einfach gehalten wird. Nur so erzielt man eine robuste CSS-Vorlage.

Wenn Sie beispielsweise für den Inhaltsbereich für Grafiken Abstände nach links und rechts optimieren, werden diese "Optimierungen" für alle Grafiken auf der Webseite angewandt. Sie sollten sich also während dieser ersten Schritte der Formatierung immer überlegen, dass die Eigenschaften, die sie anwenden möglichst auch für die gesamte Site gelten sollen.

abweichungen

Es kann natürlich sein, dass Sie beispielsweise in der Fußleiste oder einem sonstigen Kasten die Elemente ganz anders darstellen möchten als im Inhaltsbereich. Dadurch, dass Sie den einzelnen Kästen eindeutige Kennungen (ID) zugewiesen haben, ist es nun möglich einzelne Elemente abhängig von den einzelnen Kennungen zu definieren.

Kontextuelle Formatierungen

Sie können jetzt einzelne Elemente für andere Bereiche definieren.

Beispiel:

#hauptnav p { font-size:0.9em; }
Alle Absätze im Bereich hauptnav erhalten die Schriftgröße 0.9em.

Wenn Sie beispielsweise die Schriftgröße für einen Absatz (P) generell auf 0.8em gesetzt haben, aber etwa für die Hauptnavigation die Schriftgröße auf 0.9em setzten wollen, können Sie mit der Schreibweise die Absätze in der Hauptnavigation entsprend Kasten-abhängig definieren. Absätze in der Hauptnavigation behalten alle sonstigen Formatierungen von unserem Standardabsatz bei. Nur mit dieser Angabe wird die Schriftgröße für den Absatz in der Hauptnavigation geändert.

Mit dieser Methode ist es nun möglich Ausnahmen und Abweichungen individuell für jeden Bereich zu definieren.

Klassen

Sie können Klassen definieren, die unabhängig von den Bereichen sind.

Beispiel:

p.groesser { font-size:1.1em; }
An beliebiger Stelle im Quelltext kann einem Absatz p die Klasse groesser zugewiesen werden.
<p class="groesser">Text des Absatzes</p>

Die Möglichkeit Elemente auf einer Seite mit CSS zu formatieren sind sehr vielfältig. Neben den bereits erwähnten Kennungen (ID) können auch Klassen (class) vergeben werden. Klassen eignen sich insbesondere für immer wiederkehrende Elemente, die eine bestimmte Formatierung abweichend von der Norm erhalten sollen. Im Gegensatz zu Kennungen (ID) darf eine Klasse mehrfach vergeben werden auf einer Seite. So kann man für einen Standardabsatz u.a. ein margin-left von 2em definieren und eine Klasse p.einruecken definieren, die lediglich die Eigenschaft margin-left:4em hat. Alle Eigenschaften des Standardabsatzes bleiben erhalten, nur der linke Abstand wird für Absätze mit dieser Klasse geändert.

Jetzt dürfen Inhalte umgesetzt werden.

Über das CSS-Design

Lesen Sie,  warum ich mich an die Standards halte und warum das Layout mit  Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der  Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.

Suchen Sie was auf barrierefreies- webdesign.de?

Geben Sie Ihr Stichwort ein:

Entspricht die Seite den W3C-Normen?

Die  Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.

Der schnelle Seitenzugriff

Verwenden Sie  Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.