Gestaltung mit CSS (MMDE21)

Der Block “Erstellung von Webseiten, Gestaltung mit CSS” behandelt umfassend die Grundlagen und Techniken zur Gestaltung von Webseiten mit Hilfe von CSS (Cascading Style Sheets). Es beginnt mit einer Einführung in die grundlegenden Konzepte der Struktur und Gestaltung von Webseiten, wobei besonders auf die Trennung von Inhalt und Design eingegangen wird.

Der Block erklärt eindeutig, das die Anwendung von CSS in einem HTML-Dokument unerlässlich ist, und zeigt die Unterschiede zwischen einer Webseite mit und ohne CSS. Hierbei werden auch die eingebauten Stilvorlagen von Browsern erläutert, die jedoch ein sauberes und gut durchdachtes eigenes Konzept nicht ersetzen können. Die CSS-Syntax* wird detailliert erklärt, inklusive der Kommentare, Typografie im Webdesign, flexibler Maßeinheiten und der grundlegenden Regeln. Es wird beschrieben, wie Farben in CSS mithilfe des RGB-Farbmodells definiert werden.

Ein wichtiger Teil befasst sich mit der Verknüpfung von CSS und HTML. Dies beinhaltet externe, interne und Inline-Stylesheets. Weiterhin werden die verschiedenen Selektoren vorgestellt, wie Typselektoren, Universalselektoren, Klassen, ID-Selektoren, Kombinatoren, Attributselektoren, Pseudoklassen und Pseudoelemente.

Es wird erklärt was die Konzepte der Kaskade und Vererbung innerhalb von CSS, die Hierarchie der Stylesheets und die Spezifität von CSS-Regeln sind. Es wird erläutert, wie Stylesheets miteinander interagieren und wie spezifische Regeln festgelegt werden können, um die gewünschte Formatierung zu erreichen.

Schließlich wird das Box-Modell als Grundlage für CSS-basiertes Layout beschrieben, sowie die HTML-Erweiterungen mit den Elementen div und span, die für die flexible Gestaltung von Webseiten notwendig sind.

Zusammenfassend bietet dieser Teil eine umfassende Anleitung zur Nutzung von CSS für die Gestaltung und Strukturierung von Webseiten, ergänzt durch zahlreiche Beispiele und Übungen zur Selbstüberprüfung, um das Gelernte zu festigen.

Der Inhalt zu diesem Thema, in kurzen Worten beschrieben.

Datum: KW 22 + 23 – 2024

Dieser Blogbeitrag bezieht sich auf das Fernstudium Medieninformatik (interner Link ↪ zu der Übersicht Vita/Medieninformatik ILS), das ich von Mai 2023 bis Mai 2025 verfolgt habe.

* Die CSS-Syntax” ist die korrekte deutsche Bezeichnung für “CSS-Syntax”. Es handelt sich um ein zusammengesetztes Nomen, das aus den Wörtern “CSS” und “Syntax” gebildet wird. “CSS” ist die Abkürzung für “Cascading Style Sheets”, eine Sprache zur Gestaltung von Webseiten. “Syntax” bezieht sich auf die Regeln und die Struktur einer Sprache.

** Kleiner Zusatz zu diesem Artikel: Ich schrieb schon an anderer Stelle, dass mein phpBB-Projekt zu nicht geringen Teilen auch als Lern- und Übungsaufgabe für mein Fernstudium der Medieninformatik gehört. Der Bereich “CSS” ist hier ein guter Anlass, dies noch einmal explizit zu erwähnen. Denn auch in dem phpBB Projekt gibt es unter anderem Anpassungen die via CSS geregelt werden. Der Boardstyle ist selbstverständlich von Haus aus via CSS festgelegt, also kein Kunststück meinerseits. Jedoch sind die Anpassungen am phpBB-Board schnell zu einer kleinen (inzwischen fast erledigten) Mammutaufgabe geworden. Um Anpassungen am Boardstyle vornehmen und zentral steuern zu können, habe ich eine “custom.css”-Datei angelegt. Hier stehen alle meine Änderungen bezüglich der Designattribute drin. In der Portalansicht sind jedoch noch einige Anpassungen “inline” angelegt. Das bedeutet, die Attribute werden in den HTML-Blöcken selbst angegeben. Dies ist ein Punkt, den ich im Laufe der kommenden Woche auch noch ändern und anpassen werde. In Zukunft werden Angaben zu der angepassten Schriftgröße, Farbe und Art also nicht mehr in den Portalblöcken selbst geregelt, sondern zentral über die “custom.css” gesteuert. (Hier kommt übrigens unter anderem auch der Punkt mit der “Vererbung von Elternelementen” zum Tragen. Das jedoch an dieser Stelle genauer zu erklären, würde den Rahmen sprengen.) So eine “custom.css” macht Änderungen also viel einfacher (es muss eine Schriftart oder -größe nur einmal zentral geändert werden, statt in jedem der ca. 14 Blöcke einzeln) und sorgt nebenbei noch für einen schönen schlanken (suchmaschinenfreundlichen) HTML-Code. Zum Abschluss noch eine kleine Zusatzinfo: Die CSS-Angaben, die “inline” angelegt werden, sind einem externen CSS immer übergeordnet. Man muss also (theoretisch aus verschiedenen Gründen) in dem Moment, in dem man eine solche Umstellung macht, das Inline-CSS entfernen. Das hat also nicht nur Gründe des schlanken und suchmaschinenfreundlichen HTML-Codes. Jedoch gibt es eine Ausnahme: Wenn man in einer externen CSS-Datei die CSS-Regeln mit “!important” definiert, wären sie dem Inline-CSS übergeordnet. Allerdings kommt diese Variante, allein schon der Suchmaschinenfreundlichkeit sowie der eigenen Übersichtlichkeit wegen, kaum vor.