Einstieg in HTML und CSS von Peter Müller

Auf 507 Seiten bietet Peter Müller mit dem 2020 erschienen Buch «Einstieg in HTML und CSS» einen tollen Einstieg in HTML und CSS. Schritt für Schritt lernst du, was es bei modernen Webgestaltung mit CSS zu wissen gibt und die anschaulichen Beispiele können leicht auf die eigenen Projekte angewendet werden. Der Inhalt geht von Grundlagen zu Schriften, Farben und Gestalten mit dem Box-Modell, über Konzepte der Spezifität, Kaskade und Positionierung bis zu dem Aspekt Gestaltung, wie Navigationen, Media Queries, Layouts mit Flexbox und Grid.

Der Autor arbeitet seit vielen Jahren als IT-Dozent und ist Autor von CSS-, HTML5- und WordPress-Büchern. Beim Rheinwerk Verlag ist das Buch für 29,90 Euro sofort lieferbar mit kostenlosem Versand in die Schweiz, sowie nach Deutschland und Österreich. rheinwerk-verlag.de 

Für einen optimalen Einblick, stellen wir dir hier das 18. Kapitel als Leseprobe zur Verfügung.

Kapitel 18 Ordnung halten: Stylesheets organisieren 

Worin Sie einige Anregungen zur Organisation Ihrer Stylesheets bekommen und danach aufräumen und das CSS in verschiedene Stylesheets unterteilen und validieren. 

Die Themen im Überblick: 

• Kommentare zum Strukturieren von Stylesheets
• Verschiedene Schreibweisen für CSS-Regeln
• Ein zentrales Stylesheet erleichtert die Entwicklung
• Die einzelnen Stylesheets erstellen und einbinden
• Aufräumen: Das CSS auf die Stylesheets verteilen
• CSS überprüfen mit dem CSS-Validator
• Ein neues Modul für ein modernes Layout 
• Auf einen Blick

»Ordnung ist das halbe Leben« und bei CSS manchmal auch ein bisschen mehr. Das Stylesheet für die Übungswebsite wird langsam, aber sicher unübersichtlich, und in diesem Kapitel möchte ich Ihnen ein paar Tipps zum Schreiben von CSS-Regeln und zur Organisation von Stylesheets geben. 

Zum Schluss bekommt die Übungswebsite ein zusätzliches Stylesheet für ein modernes Layout, das über die volle Breite der Seite geht. 

Wichtig ist, dass Sie den Überblick behalten … 
Wie ausführlich Sie die in diesem Kapitel gezeigten Ideen umsetzen, hängt unter anderem von Ihrem persönlichen Ordnungsbedürfnis ab. Wichtig ist, dass Sie den Überblick behalten, und ich hoffe, Ihnen dafür ein paar brauchbare Anregungen zu geben.

18.1 Kommentare zum Strukturieren von Stylesheets 

Stylesheets sind nicht selten mehrere Hundert oder gar Tausende Zeilen lang. Deshalb sollten Sie von Beginn an versuchen, das CSS so übersichtlich wie möglich zu schreiben, und das beginnt bereits mit so etwas Einfachem wie Kommentaren. 

18.1.1 Der Kommentar am Anfang des Stylesheets 

Am Dateinamen eines Stylesheets kann man nicht immer erkennen, zu welcher Site es gehört und welchen Zweck es erfüllt. Darum empfiehlt es sich, am Anfang jeder CSS- Datei die wichtigsten Informationen in einem Kommentar festzuhalten. 

Wie ausführlich dieser Kommentar ausfällt, hängt von Ihren persönlichen Vorlieben, Ihrem Ordnungsbedürfnis und der Komplexität des Projekts ab. Im Folgenden sehen Sie zwei Beispiele zur Anregung. 

Zunächst eine Minimalvariante: 

Wenn Sie dieses Stylesheet in ein paar Wochen oder Monaten wieder öffnen, wissen Sie wenigstens noch, wofür es geschrieben wurde. 

Die folgende Variante ist etwas ausführlicher: 

Je nach Lust und Laune können Sie hier zum Beispiel auch noch die verschiedenen Abschnitte des Stylesheets oder das verwendete Farbschema dokumentieren. 

18.1.2 Ein Stylesheet mit Kommentaren in Abschnitte unterteilen 

Zum Ordnunghalten bietet es sich an, ein Stylesheet mit mehrzeiligen Kommentaren in verschiedene Abschnitte zu unterteilen. Das könnte zum Beispiel so aussehen: 

In diesem Abschnitt werden zur optischen Gestaltung des Kommentars Gleichheitszeichen oder Sternchen verwendet. Stattdessen können Sie auch gerne andere Zeichen nutzen. Wichtig ist nur, dass der Kommentar mit /* anfängt und mit */ endet. Dazwischen haben Sie gewisse gestalterische Freiheiten. 

18.2 Verschiedene Schreibweisen für CSS-Regeln 

In diesem Abschnitt finden Sie ein paar Gedanken und Empfehlungen zum übersichtlichen Aufbau von Styles. 

18.2.1 Weit verbreitet: Eine Anweisung pro Zeile 

Eine typische CSS-Regel sieht ungefähr so aus: 

Der Aufbau dieser Regel ist recht übersichtlich und folgt einigen bisher unausgesprochenen Konventionen: 

• In der ersten Zeile stehen nur Selektoren und die öffnende geschweifte Klammer. 
• In jeder Zeile steht leicht eingerückt eine Anweisung. 
• Jede Anweisung endet mit einem Semikolon. 
• Eigenschaft und Wert werden durch einen Doppelpunkt getrennt, und nach dem Doppelpunkt folgt eine Leerstelle. 
• Die schließende geschweifte Klammer steht in einer eigenen Zeile, bündig mit dem ersten Zeichen des Selektors. 

Das ist eine sinnvolle und weit verbreitete Art, CSS-Regeln zu notieren, aber es ist eine Konvention und nicht streng vorgeschrieben. 

18.2.2 Kurze Regeln: Alles in einer Zeile 

Bei Styles mit nur einer Anweisung liegt es nahe, alles in eine Zeile zu schreiben. Der Einzeiler spart Platz und ist übersichtlich: 

Manche Autoren schreiben auch Styles mit nur einer Anweisung konsequent nach dem mehrzeiligen Schema, andere hingegen setzen mehrere Anweisungen in eine Zeile, weil es Platz spart. 

Die genaue CSS-Schreibweise ist eine Frage des Stils und manchmal auch einfach nur von der Tagesform abhängig. 

18.2.3 Übersichtlich: Nur ein gruppierter Selektor pro Zeile 

Gruppierte Selektoren, die mit einem Komma getrennt werden, kann man der Übersichtlichkeit halber auf getrennten Zeilen schreiben. Betrachten Sie zum Beispiel folgenden Unterschied. Zunächst zwei gruppierte Selektoren in einer Zeile: 

Diese Regel wird leichter lesbar, wenn pro Zeile nur ein Selektor steht. Nach dem letzten Selektor folgt dann statt des Kommas die öffnende geschweifte Klammer: 

18.2.4 Reihenfolge der Anweisungen: 1. Am Box-Modell orientieren 

Schauen Sie sich folgende fiktive CSS-Regel an: 

Die Reihenfolge der Anweisungen orientiert sich am Aufbau der Boxen: 

• Eigenschaften wie display und position bestimmen das Erscheinungsbild sowie die Positionierung der Box und stehen ganz am Anfang. 
• Danach folgen Eigenschaften für den Inhaltsbereich der Box: font-size, font-style, color, text-decoration etc. 
• Am Ende werden die Box-Modell-Eigenschaften gelistet, und zwar von innen nach außen: background, width & Co, padding, border und margin. 

In dieser Sortierung beschreiben die Anweisung also zuerst die Art und die Positionierung der Box und dann die Box selbst, von innen nach außen. So verinnerlichen Sie beim Ordnen der Anweisungen ganz nebenbei den Aufbau des Box-Modells und können die Gestaltung des Elements beim Lesen des CSS besser visualisieren.

18.2.5 Reihenfolge der Anweisungen: 2. Am Alphabet orientieren 

Eine andere Methode zur Sortierung von Anweisungen ist alphabetisch von A bis Z. Das folgende Listing zeigt dieselbe CSS-Regel wie oben, aber alphabetisch sortiert: 

Der Vorteil einer alphabetischen Sortierung ist, dass sie immer eindeutig und leicht einzuhalten ist. Nachteilig ist hingegen, dass verwandte Eigenschaften wie background und padding weit auseinanderstehen und wichtige Angaben wie display oder position mitten zwischen den anderen Eigenschaften vergraben liegen. 

18.3 Ein zentrales Stylesheet erleichtert die Entwicklung 

Wenn ein Stylesheet zu lang wird, verliert man leicht den Überblick. Während der Entwicklung der Seiten ist es deshalb von Vorteil, die CSS-Regeln nach dem Motto »Teile und herrsche« auf mehrere kleine Stylesheets zu verteilen. 

18.3.1 Während der Entwicklung: Modulbauweise mit mehreren Stylesheets 

Um den Überblick zu behalten, können Sie das CSS auf mehrere kleine Stylesheets verteilen. Diese Stylesheets binden Sie dann mit der Anweisung @import im zentralen Style- sheet style.css ein, das wie bisher mit dem link-Element in die Webseiten eingebunden wird. Abbildung 18.1 zeigt diesen Sachverhalt im Überblick: 

• Auf den Webseiten wird wie bisher mit einem link-Element das Stylesheet style.css eingebunden. Da ändert sich nichts. 
• In style.css werden per @import nur noch andere Stylesheets eingebunden. 
• Die CSS-Regeln stehen in den importierten Stylesheets wie basis.css, layout.css etc. 

Diese Vorgehensweise hat zwei große Vorteile: 

• Kleinere einzelne Stylesheets sind übersichtlicher als ein großes. 
• Beim Entwickeln kann man einfach ein Stylesheet hinzufügen oder austauschen. 

In den nächsten Kapiteln erleichtert ein zentrales Stylesheet die weitere Entwicklung der Übungswebsite. 

18.3.2 Für die Live-Site: Alles in einem Stylesheet vereinen 

Die Aufteilung des CSS auf mehrere Stylesheets ist während der Entwicklung der Website sehr praktisch, aber im Live-Betrieb geht sie zu Lasten der Performance: Ein Webserver muss alle per @import eingebundenen Stylesheets einzeln aufrufen, und das dauert messbar länger als das Laden eines einzigen Stylesheets. Vor dem Launch der Website sollten Sie daher alle Stylesheets wieder in einer Datei vereinen, um unnötige Dateiaufrufe zu vermeiden und die Seiten zu beschleunigen. 

Am einfachsten ist diese Wiedervereinigung per copy and paste: Sie kopieren einfach der Reihe nach das CSS aus den einzelnen Modulen über die Zwischenablage in ein Stylesheet. Dieses manuelle Kopieren und Einfügen ist in wenigen Minuten erledigt und völlig in Ordnung. Wenn Sie aber Programmierer sind und den ganzen lieben langen Tag in Ihrem Editor mit dem Schreiben von Sprachen wie HTML, CSS und JavaScript verbringen, lohnt es sich eventuell, diesen Vorgang mit einer Meta-Sprache wie SASS zu automatisieren. 

Die Meta-Sprache SASS erweitert die Möglichkeiten von CSS 
Eine Meta-Sprache wie SASS ergänzt CSS um weitere Möglichkeiten, und ein effektives Modulsystem ist nur eine davon. Weitere Infos zu SASS finden Sie auf sass-lang.com. 

18.4 Die einzelnen Stylesheets erstellen und einbinden 

In diesem Abschnitt erstellen Sie die einzelnen Stylesheets, binden sie per @import in style.css ein und verschieben dann die CSS-Regeln von style.css in die neu erstellten Stylesheets. Die in diesem Abschnitt gezeigte Variante hat sich bewährt, aber wie man sein CSS am besten aufteilt, hängt nicht zuletzt von der Website und von persönlichen Vorlieben ab. Falls Sie also eine andere Aufteilung (oder ein großes Stylesheet) bevorzugen, spricht überhaupt nichts dagegen. 

18.4.1 Schritt 1: Die einzelnen Stylesheets erstellen 

Im ersten Schritt erstellen Sie im Unterordner css ein paar neue Stylesheets. Für die Übungswebsite nutze ich dabei folgende Aufteilung: 

• basis.css enthält erstens allgemeine Einstellungen wie die Umstellung auf border-box oder die Vermeidung von Collapsing Margins, zweitens die grundlegende Schrift- und Textgestaltung und drittens Typselektoren und allgemeine Klassen. 
• layout.css enthält die Gestaltung für die Seite sowie den Kopf-, Inhalts- und Fußbereich. 
• navi-inline.css enthält die Gestaltung der Navigation. Der Name deutet an, dass die Listenelemente in diesem Stylesheet mit display: inline nebeneinandergestellt werden. 
• content.css gestaltet den Inhalt, also alle Elemente innerhalb des Inhaltsbereichs main. 
• formulare.css enthält das CSS zur Gestaltung von Formularen. 

Jedes Stylesheet bekommt am Anfang einen kurzen, beschreibenden Kommentar. Hier als Beispiel ein Kommentar für basis.css: 

Im folgenden Kasten erstellen Sie die Stylesheet-Dateien. 

Übungswebsite: Neue Stylesheets für die Module erstellen 
1. Starten Sie Ihren Editor, und erstellen Sie eine neue Datei.
2. Speichern Sie die Datei als basis.css im Unterordner css.
3. Erstellen Sie einen kurzen beschreibenden Kommentar (Listing 18.10), und speichern Sie die Datei.
4. Erstellen Sie entsprechend die Stylesheets layout.css, navi-inline.css, content.css und formulare.css, jeweils mit einem kurzen Kommentar am Anfang. 

18.4.2 Schritt 2: Stylesheets mit @import in »style.css« einbinden 

Mit @import können Sie CSS aus anderen Stylesheets importieren, und das ist ideal zur Erstellung der in diesem Abschnitt beschriebenen Modulbauweise. 

Anweisungen mit @import müssen am Anfang eines Stylesheets stehen, vor allen ande- ren CSS-Regeln. @import hat folgende Syntax: 

Ist Ihnen das Semikolon am Ende der Zeile aufgefallen? Falls nicht: Do not forget the Strichpunkt am Ende einer @import-Regel! 

In diesem Abschnitt verwandeln Sie style.css in ein zentrales Stylesheet. Dazu fügen Sie ganz am Anfang einen Kommentar und dann die @import-Regeln für die im vorherigen Abschnitt erstellten (noch leeren) Stylesheets ein: 

Zur Erinnerung: Pfadangaben in einem Stylesheet sind relativ zum Stylesheet, in dem sie stehen. Da alle Dateien im Unterordner css liegen, reicht bei den Importanweisungen der Dateiname. 

Die Reihenfolge der @import-Anweisungen ist wichtig, denn aus Sicht des Browsers verhalten sich die importierten Stylesheets wie ein einziges automatisch erstelltes großes Stylesheet. Gemäß der Kaskade überschreiben Anweisungen mit gleicher Wichtigkeit und Spezifität vorherige Anweisungen. 

Im Folgenden setzen Sie Listing 18.12 für die Übungswebsite um. 

Übungswebsite: Stylesheets per @import einbinden 
1. Öffnen Sie das Stylesheet style.css in einem Editor.
2. Fügen Sie ganz am Anfang der Datei den Kommentar und die @import-Regeln aus Listing 18.12 ein.
3. Speichern Sie das Stylesheet, und prüfen Sie die Webseiten im Browser. Es sollte sich nichts geändert haben. 

18.5 Aufräumen: Das CSS auf die Stylesheets verteilen 

In diesem Abschnitt verteilen Sie die in style.css gespeicherten CSS-Regeln auf die soeben frisch erstellten Stylesheets. 

18.5.1 Allgemeine Einstellungen und grundlegende Gestaltung in »basis.css« 

Das Stylesheet basis.css enthält die grundlegenden Einstellungen und Formatierungen für alle Webseiten und besteht aus drei Abschnitten. Das folgende Listing zeigt in kompakter Form, welche CSS-Regeln im ersten Abschnitt zu grundlegenden Einstellungen stehen können: 

Das Listing enthält die Regeln für das Border-Box-Modell (Abschnitt 16.7), das sanfte Scrollen (Abschnitt 5.6) und zur Vermeidung von Collapsing Margins (Abschnitt 16.6). 

Im zweiten Abschnitt des Stylesheets stehen die Regeln zur grundlegenden Gestaltung von Schrift und Text: 

Der dritte und letzte Abschnitt in basis.css enthält schließlich allgemeine Typselektoren für Bilder, address, figure und nützliche Klassen. Das sind zum Beispiel die Klassen zum visuellen Verstecken von Boxen am Bildschirm (Abschnitt 17.8).

 
Das folgende Listing zeigt das CSS, zum Teil in verkürzter Form: 

Im folgenden Kasten setzen Sie diese Änderungen um. 

Übungswebsite: Das Stylesheet »basis.css« 
1. Öffnen Sie das Stylesheet basis.css in einem Editor.
2. Fügen Sie nach dem Anfangskommentar die bisher in style.css gespeicherten CSS-Regeln aus Listing 18.13 und Listing 18.14 ein.
3. Erstellen Sie die in Listing 18.15 gezeigten CSS-Regeln für img, video und figure.
4. Verschieben Sie die in Listing 18.15 gezeigten Regeln für address und .visually- hidden von style.css in basic.css. 5. Speichern Sie das Stylesheet, und prüfen Sie die Webseiten im Browser. Es sollte sich nichts geändert haben. 

18.5.2 Das Seitenlayout und die Inhaltsbereiche: »layout.css« 

In layout.css stehen die Formatierungen für das Seitenlayout und Kopf-, Inhalts- und Fußbereich. Los geht es mit dem CSS für das Seitenlayout aus Kapitel 16, »Das Box-Modell für Block- und Inline-Boxen«: 

Danach folgt ein zweiter Abschnitt mit den Regeln für die Layoutbereiche. Diese haben im Laufe des Buches zum Teil unterschiedliche Abstände bekommen, die beim Zusammenfügen konsolidiert werden. Alle vier haben links und rechts einen Innenabstand von 1rem: 

Im folgenden Kasten fügen Sie dieses CSS in das Stylesheet ein. 

Übungswebsite: Das Stylesheet »layout.css« 
1. Öffnen Sie das Stylesheet layout.css in einem Editor.
2. Fügen Sie nach dem Anfangskommentar das CSS aus Listing 18.16 und Listing 18.17 ein. Verschieben Sie die Regeln soweit vorhanden aus style.css und passen Sie sie nach dem Verschieben falls nötig an.
3. Speichern Sie das Stylesheet, und prüfen Sie die Webseiten im Browser. Es sollte sich nichts geändert haben. 

18.5.3 Die Gestaltung der Navigation in »navi-inline.css« 

Das Stylesheet zur Gestaltung der Navigation enthält das CSS für die Elemente innerhalb der Hauptnavigation und der Meta-Navigation im Fußbereich. Das folgende Listing zeigt zunächst das CSS für die Liste und die Links in der Hauptnavigation: 

Die Regeln beschreiben die Navigation von außen nach innen: zuerst den Navigationsbereich nav, dann die Liste, die Listenelemente und schließlich die Links. 

Im zweiten Abschnitt stehen die Regeln für die Navigationsliste im Footer: 

Im dritten und letzten Abschnitt wird der aktuelle Menüpunkt mit einer einfachen Unterstreichung hervorgehoben. Diese Regel gilt für beide Navigationen und steht deshalb im CSS darunter, damit sie bei gleicher Spezifität nicht im Rahmen der Kaskade überschrieben wird: 

Im folgenden Kasten setzen Sie diese Änderungen um. 

Übungswebsite: Das Stylesheet »navi-inline.css« 
1. Öffnen Sie das Stylesheet navi-inline.css in einem Editor.
2. Fügen Sie nach dem Anfangskommentar das CSS aus Listing 18.18, Listing 18.19 und Listing 18.20 ein.
3. Speichern Sie das Stylesheet, und prüfen Sie die Webseiten im Browser. Es sollte sich nichts geändert haben. 

18.5.4 Die Gestaltung des Inhalts: »content.css« 

Die Gestaltung für die Elemente im Inhaltsbereich main werden im Stylesheet content.css gespeichert. Im ersten Abschnitt geht es um die Gestaltung der Links, die im folgenden Listing in kompakter Schreibweise wiedergegeben wird: 

Danach werden weitere Inhalte auf der Startseite und der Seite News formatiert. Mit verkürzten Regeln sieht dieser Bereich von content.css so aus wie im folgenden Listing: 

Im folgenden Kasten speichern Sie diese Regeln in content.css.

Übungswebsite: Das Stylesheet »content.css« 
1. Öffnen Sie das Stylesheet content.css in einem Editor.
2. Fügen Sie nach dem Anfangskommentar das CSS aus Listing 18.21 und Listing 18.22 ein.
3. Speichern Sie das Stylesheet, und prüfen Sie die Webseiten im Browser. Es sollte sich nichts geändert haben. 

18.5.5 Die Gestaltung der Formulare: »formulare.css« 

Zu guter Letzt wird die Gestaltung des Kontaktformulars in einem eigenen Stylesheet gespeichert. Das CSS in formulare.css sieht leicht gekürzt so aus wie im folgenden Listing: 

Im folgenden Kasten speichern Sie das CSS in formulare.css. 

Übungswebsite: Das Stylesheet »formulare.css« 
1. Öffnen Sie das Stylesheet formulare.css in einem Editor.
2. Fügen Sie nach dem Anfangskommentar das CSS aus Listing 18.23 ein.
3. Speichern Sie das Stylesheet, und prüfen Sie die Webseiten im Browser. Es sollte sich nichts geändert haben. 

18.6 CSS überprüfen mit dem CSS-Validator 

Nach einer solchen Aufräumaktion empfiehlt es sich, das CSS einmal von einem echten Kenner überprüfen zu lassen. In Abschnitt 11.2, »Das HTML überprüfen mit dem HTML- Validator«, haben Sie bereits einen Validator für HTML kennengelernt, und so etwas gibt es auch für CSS (Abbildung 18.2): 

• https://jigsaw.w3.org/css-validator/

Der Validator bietet die gleichen Optionen wie der HTML-Validator, aber Sie müssen die im zentralen Stylesheet eingebundenen Stylesheets einzeln validieren. Abbildung 18.3 zeigt den Validator mit einem grünen Balken und einem Glückwunsch.

18.7 Ein neues Modul für ein modernes Layout 

Zum Abschluss des Kapitels nutzen Sie die neue Organisation der Stylesheets und fügen ein neues Layoutmodul hinzu: 

• Die Beispielseiten haben im Moment ein klassisches Layout mit einer festen Breite, bei dem in größeren Viewports links und rechts vom Inhalt ein farbiger Hintergrund sichtbar wird. 
• In diesem Abschnitt erstellen Sie ein zusätzliches Stylesheet für ein modernes Layout, bei dem der einfarbige Hintergrund verschwindet und die einzelnen Layoutbereiche als farbige Streifen über die volle Breite der Seite gehen. 

Abbildung 18.4 zeigt dieses moderne Layout für die Startseite. 

18.7.1 Schritt 1: Das HTML anpassen – die Dopplung mit »div« 

Um dieses Layout zu realisieren, werden die Layoutbereiche mit einem zusätzlichen, inneren Element gedoppelt. Diese beiden Container haben eine strikte Aufgabenteilung: 

• Der äußere Container füllt mit seiner Hintergrundfarbe den gesamten Viewport von ganz links bis ganz rechts. 
• Der innere Container bekommt eine maximale Breite und sorgt so dafür, dass der Inhalt sich nicht von ganz links bis ganz rechts erstreckt. 

Durch diesen Trick wird es möglich, dass ein Layoutbereich als farbiger Streifen die volle Breite der Seite füllt, der Inhalt aber eine bestimmte Breite nicht überschreitet. 

Da der innere Container nur zur Gestaltung eingebaut wird und semantisch neutral ist, bietet sich als HTML-Element das in Abschnitt 7.9, »Elemente semantisch neutral gruppieren: <div>«, vorgestellte div an, das genau zu diesem Zweck existiert. 

Das folgende Listing zeigt das HTML für die vier Layoutbereiche, wobei das div eine Klasse namens inside erhält, damit man es im CSS besser selektieren kann: 

Diese Änderungen müssen für die Layoutbereiche auf allen Webseiten gemacht werden, mit Ausnahme des Inhaltsbereichs auf der Startseite: 

• Der Inhaltsbereich auf der Startseite besteht aus drei Abschnitten mit unterschiedlichen Hintergrundfarben. 
• Hier wird deshalb nicht main ge-div-doppelt, sondern die section-Elemente innerhalb von main. 

Das folgende Listing zeigt das HTML für die drei section-Abschnitte: 

Die Webseiten sehen nach diesen Änderungen noch genauso aus wie vorher, aber das Fundament für das CSS im nächsten Abschnitt ist damit gelegt. 

Im folgenden Kasten setzen Sie diese HTML-Änderungen für die Übungswebsite um. Das ist ein bisschen Arbeit, aber es lohnt sich. 

Übungswebsite: Das HTML für die Beispielseiten ändern 
1. Öffnen Sie die Webseiten der Reihe nach im Editor.
2. Fügen Sie wie in Listing 18.24 gezeigt auf allen Seiten im HTML ein zusätzliches div für die Layoutbereiche ein.
3. Auf der Startseite index.html werden die section-Elemente im Inhaltsbereich gedoppelt (siehe Listing 18.25).
4. Speichern Sie alle HTML-Dateien, und prüfen Sie sie im Browser. Es sollte sich nichts geändert haben. 

18.7.2 Schritt 2: Das Stylesheet »layout-modern.css« hinzufügen 

Wenn das HTML vorbereitet ist, geht es an die Gestaltung der Seiten per CSS. Die Regeln dazu speichern Sie in einem neuen Stylesheet mit dem Namen layout-modern.css. Das folgende Listing zeigt, dass vier Regeln genügen: 

Die CSS-Regeln machen Folgendes: 

Zunächst wird für das Stammelement html die Hintergrundfarbe auf den Standardwert transparent zurückgesetzt. 

18 Ordnung halten: Stylesheets organisieren 

• Die zweite Regel entfernt eine maximale Breite von body und setzt padding und margin auf 0
• Die Anweisungen für .inside geben den neu eingefügten div-Elementen eine maximale Breite und zentrieren sie. 
• Die letzte Regel entfernt links und rechts eventuelle Innenabstände von den Layoutbereichen, damit diese ganz bis an den Rand des Browserfensters reichen.

Das Stylesheet layout-modern.css wird im zentralen Stylesheet style.css nach layout.css importiert: 

Mit wenigen CSS-Regeln können Sie also das Layout der Seiten komplett verändern, und das setzen Sie im folgenden Kasten um. 

Übungswebsite: Das Stylesheet »layout-modern.css« einbinden 
1. Starten Sie Ihren Editor, und erstellen Sie eine neue Datei.
2. Speichern Sie die Datei als layout-modern.css im Unterordner css.
3. Erstellen Sie einen kurzen beschreibenden Kommentar, fügen Sie die CSS-Regeln aus Listing 18.26 ein, und speichern Sie die Datei.
4. Öffnen Sie das zentrale Stylesheet style.css im Editor.
5. Fügen Sie die @import-Regel für das neue Stylesheet ein (siehe Listing 18.27).
6. Speichern Sie alle Dateien, und betrachten Sie die Webseiten im Browser. 

Nach diesen Schritten hat sich das Layout verändert und sieht etwa so aus wie in Abbildung 18.4. 

Layouts wechseln auf die Schnelle 
Falls Sie das klassische Layout mit der festen Breite noch einmal sehen möchten, kommentieren Sie in style.css einfach die @import-Anweisung für layout-modern.css aus. 

18.7.3 Schritt 3: Fine-Tuning für die Infoboxen auf der Startseite 

Das moderne Layout sieht so weit gut aus, aber der Teufel steckt wie so oft im Detail, und bei CSS sind das oft die Innen- und Außenabstände. Merke: Wenn sich die Umstände ändern, muss man häufig die Abstände anpassen. Die Umstände haben sich mit dem neuen Layout definitiv geändert. Beim Testen werden Sie feststellen, dass die Infoboxen auf der Startseite in der Desktop-Ansicht links nicht bündig sind und in der mobilen Ansicht links und rechts einen recht großen Abstand haben. 

Die Lösung ist einfach und liegt in der Anpassung der Abstände: 

• Der Abschnitt mit der Klasse .infoboxen hat rundherum ein padding von 1rem, das links und rechts auf 0 gesetzt werden soll. 
• Die Artikel mit der Klasse .infobox haben rundherum einen margin von 1rem, der ebenfalls links und rechts entfernt werden soll. 

Beide Abstände werden in content.css definiert, und Sie können sie dort an Ort und Stelle ändern: 

18.7 Ein neues Modul für ein modernes 

Im Folgenden setzen Sie dieses Listing für die Übungswebsite um. 

Übungswebsite: Fine-Tuning für die Infoboxen auf der Startseite 
1. Öffnen Sie das Stylesheet content.css im Editor.
2. Ändern Sie die Abstände für .infoboxen und .infobox wie in Listing 18.28 gezeigt.
3. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser. 

Nach diesen Schritten sind die Abstände der Infoboxen sowohl in der Desktop- als auch in der mobilen Ansicht in Ordnung. 

18.8 Auf einen Blick 

Hier sind noch einmal die wichtigsten Punkte im Überblick: 

• Beginnen Sie ein Stylesheet mit einem Kommentar, in dem Sie das Stylesheet kurz beschreiben. 
• Mit Kommentaren können Sie ein Stylesheet in sinnvolle Abschnitte unterteilen. 
• Schreiben Sie die Styles so, dass Sie sie übersichtlich finden. 
• Mit @import können Sie CSS aus anderen Stylesheets importieren. 
• So lässt sich das CSS auf mehrere Stylesheets verteilen, die mit einem zentralen Style- sheet verwaltet werden. 
• Das W3C bietet auch für CSS einen Validator. Ideal zum Finden von Tipp-, Logik- und Flüchtigkeitsfehlern. 
• Mit wenigen CSS-Regeln können Sie das klassische Layout der Seite in ein modernes ohne feste Breite verwandeln. 

Einstieg in HTML und CSS von Peter Müller
Verfügbar bei rheinwerk-verlag.de

– Buch für 29,90 Euro
– E-Book 26,90 Euro
– Bundle Buch + E-Book nur 34,90 Euro

507 Seiten, 2020 broschiert
Rheinwerk Computing, ISBN 978-3-8362-7646-7

Sofort lieferbar und kostenloser Versand nach Deutschland, Österreich und in die Schweiz

rheinwerk-verlag.de