CSS-Klassen

Aufgabenstellung

Wie bereits oben angeführt haben wir uns mir Cascading Stylesheets beschäftigt. CSS ist nicht wie HTML dazu da einer Website eine logische Struktur zu geben, sondern ist für das Design zuständig. CSS umfasst also die Formatierung, wie z.B. Schriftart, Kursivschrift oder Farben.

Zu besagten CSS-Klassen haben wir einen Arbeitsauftrag erhalten, um die erlernten Kenntnisse in der Praxis zu üben. Dazu sollten wir eine Klasse mit hellblauem Hintergrund für jede zweite Zeile einer 5-zeiligen Tabelle erstellen, sowie eine eigene Klasse für Tabellenüberschriften und für Div-Tags ( trennt Inhalte in HTML ab).

Erlernte Kompetenzen

Durch diese Lernsituation wurden folgende Kompetenzen gefördert:

• Grundlagenwissen zu CSS und dessen Zweck
• Erstellung und Einbindung von CSS-Klassen im HTML-Dokument
• Gestaltung von Tabellen und strukturellen Elementen mithilfe von CSS
• Technisches Verständnis für die Trennung von Struktur (HTML) und Design (CSS)
• Anwendung des Klassenkonzepts in der Praxis

Das Ergebnis

Dazu habe ich die CSS-Klassen im head-Bereich der HTML-Datei definiert. Für die Tabellenüberschrift (.ueberschrift) habe ich eine größere, weiße Schrift auf schwarzem Hintergrund gewählt. Die div-Elemente erhielten eine eigene Gestaltung mit hellblauem Hintergrund, einer Breite von 250 px und einer Schriftgröße von 16 px. Bei der Tabelle habe ich die Klasse .tabelle mit einem hellblauen Hintergrund verwendet und manuell einzelnen Zeilen zugewiesen.

CSS-Klassen erkennt man daran, dass sie mit einem Punkt (.) beginnen – z. B. .text oder .ueberschrift. Diese Klassen habe ich im HTML-Body gezielt an die passenden Elemente gebunden.

Ein Auszug aus dem erstellten Code ist im beigefügten Screenshot zu sehen.

Box-Modell

Aufgabenstellung

Im Rahmen einer weiteren Unterrichtsstunde haben wir gelernt, wie man das CSS-Boxmodell verwendet. Auch zu diesem Thema erhielten wir eine Aufgabe: Es sollten zwei Boxen erstellt werden – eine für einen Fließtext und eine für die Adressdaten im Fußbereich der Website.

Erlernte Kompetenzen

Durch diese Übung wurden folgende Kompetenzen gefördert:

• Verständnis für das CSS-Boxmodell
• Umgang mit margin, border, padding, width und height
• Erstellung und Zuweisung von CSS-Klassen im HTML
• Technisches Verständnis von Inhalt, Rahmen, Innen- und Außenabstand

Das Ergebnis

Ich habe für beide Boxen jeweils eine eigene CSS-Klasse erstellt und diese im Style-Bereich definiert. Die Box für den Fließtext (Klasse .text) hat z. B. einen Außenabstand (margin) von 30 px, eine gestrichelte Umrandung (border-style: dashed) mit einer Rahmenbreite (border-width) von 3 px sowie einen hellblauen Hintergrund. Auch padding, width und height habe ich festgelegt. Zusätzlich habe ich ein Bild einer RedBull Dose eingefügt und über „Style“ eine feste Breite von 400 px sowie einen Abstand (margin) definiert. Das Bild wurde ganz oben auf der Seite eingebaut, um es optisch ansprechend darzustellen. Für den Fußbereich mit meiner Adresse habe ich die Klasse .footer erstellt. Diese Box ist etwas kleiner, hat aber dieselbe Rahmenart sowie einen hellgrauen Hintergrund.

Anschließend habe ich die Klassen im „Body“ zugewiesen und damit die Gestaltung abgeschlossen.

Fazit

Durch diese Übung habe ich das Prinzip des Boxmodells besser verstanden. Ich weiß jetzt, wie man den Inhalt in HTML durch CSS visuell voneinander abgrenzt und wie die Abstände nach innen und außen sowie der Rahmen wirken. Das war eine hilfreiche Vorbereitung für zukünftige Webprojekte.