Cascading Style Sheets (CSS) sind ein wesentlicher Bestandteil der Webentwicklung und haben die Art und Weise revolutioniert, wie Webseiten gestaltet und strukturiert werden. Die Grundidee von CSS besteht darin, die Struktur eines Dokuments von seiner Gestaltung zu trennen. Dies ermöglicht eine klarere und effizientere Gestaltung von Webseiten.

Ursprung und Entwicklung von HTML

HTML, die Hypertext Markup Language, wurde ursprünglich entwickelt, um die Struktur von Texten im Web zu beschreiben. Dazu gehören Elemente wie Überschriften, Absätze, Listen und Bilder. Im Laufe der Zeit wurden jedoch zusätzliche HTML-Tags, wie das font-Tag, eingeführt, um auch das Erscheinungsbild dieser Elemente zu beeinflussen, z. B. durch die Festlegung von Schrifttypen, -größen und -farben sowie Hintergrundfarben und -bildern.

Webdesigner nutzten verschiedene Tricks, um Gestaltungselemente wie Ränder, Spaltensätze und Leerräume umzusetzen. Dies führte oft dazu, dass der Formatierungscode einen großen Teil des gesamten HTML-Codes ausmachte. Ein typisches Beispiel zeigt, dass die Befehle zur Formatierung oft bis zu 50 Prozent des Codes beanspruchen konnten.

Die Einführung von CSS

Mit der Einführung von CSS wurden viele der zuvor verwendeten HTML-Tags und Gestaltungs-Tricks überflüssig. HTML konnte sich wieder auf seine ursprüngliche Aufgabe konzentrieren: die Struktur eines Dokuments zu beschreiben. CSS erlaubt es, das Erscheinungsbild eines Dokuments unabhängig vom HTML-Code festzulegen.

CSS definiert Merkmale der Typografie und des Designs und ab Version 2.1 sogar das Layout eines Dokuments unabhängig von seiner Struktur. Dies erfolgt durch eine Reihe von Regeln, die dem Browser mitteilen, wie das Dokument dargestellt werden soll.

Das Konzept von CSS

Das Konzept der Cascading Style Sheets umfasst:

• Die Sprache: Mit der Sprache von CSS werden Gestaltungsregeln dem Browser mitgeteilt.
• Verknüpfung mit HTML: Die Regeln werden mit dem HTML-Code verknüpft.
• Konkrete Auswirkungen: Die Regeln haben konkrete Auswirkungen auf einzelne Strukturelemente einer Webseite.

CSS ermöglicht also eine klarere Trennung von Inhalt und Design und führt zu sauberem, wartbarem Code. Im nächsten Kapitel werden wir diese Prinzipien anhand eines einfachen Beispiels verdeutlichen.

Das Beispiel im Browser mit und ohne CSS

Einführung in CSS

Der Einsatz von CSS (Cascading Style Sheets) spielt eine entscheidende Rolle bei der Gestaltung und Präsentation von Webseiten. CSS ermöglicht es, das Aussehen und Layout von HTML-Dokumenten zu steuern, was zu einer ansprechenderen und benutzerfreundlicheren Erfahrung führt.

Die Bedeutung der <link>-Zeile

Die Zeile <link ...> im HTML-Dokument ist für die Verknüpfung zwischen der HTML-Datei und der CSS-Datei verantwortlich. Diese Verbindung ist entscheidend, da die CSS-Datei die Regeln für die Stilvorlagen enthält, die das Erscheinungsbild der Webseite definieren. Im vorherigen Kapitel wurde bereits auf die Bedeutung dieser Stilvorlagen eingegangen.

Darstellung ohne CSS

Wenn wir uns das Beispiel im Browser wie Firefox ohne diese <link>-Zeile ansehen, wirkt die HTML-Seite erwartungsgemäß schlicht und wenig ansprechend. Ohne CSS sind nur grundlegende HTML-Elemente sichtbar, die keine besonderen Stilmerkmale aufweisen. Es handelt sich um eine einfache, textbasierte Darstellung, die in ihrer Funktionalität begrenzt ist.

Darstellung mit CSS

Fügen wir nun die <link>-Zeile hinzu, um die CSS-Datei zu verknüpfen, und betrachten wir das Dokument erneut im Browser. Der Unterschied ist sofort erkennbar:

• Layout: Die Anordnung der Elemente ist durchdachter und strukturierter.
• Farben und Schriftarten: Diese sind nun definiert und tragen zur ästhetischen Gestaltung bei.
• Visuelle Merkmale: Rahmen, Abstände und andere dekorative Elemente heben sich ab.

Diese eine Zeile bewirkt also einen beträchtlichen Unterschied im Erscheinungsbild der Webseite. Obwohl die Seite vielleicht nicht perfekt oder besonders elegant gestaltet ist, veranschaulicht sie dennoch deutlich, wie CSS das Gesamtbild und die Nutzbarkeit einer Webseite verbessern kann. Durch bestimmte auffällige Merkmale wird der Unterschied im Vergleich zur einfachen HTML-Darstellung ohne CSS hervorgehoben.

Fazit

CSS ist ein mächtiges Werkzeug zur Gestaltung von Webseiten, das über die bloße Darstellung von Inhalten hinausgeht. Es ermöglicht eine ansprechende visuelle Gestaltung und sorgt dafür, dass Webseiten ansprechender und zugänglicher werden. Der Vergleich zeigt, wie wichtig CSS für die moderne Webentwicklung ist.

Externe Style Sheets

Ein externes Style Sheet ist ein mächtiges Werkzeug zur Gestaltung von Webseiten. Durch die Trennung von Inhalt und Design ermöglicht es eine effiziente und konsistente Anpassung des Erscheinungsbildes auf einer oder mehreren Webseiten. In professionellen Websites wird praktisch ausschließlich mit externen Style Sheets gearbeitet. Im Folgenden werden die wesentlichen Aspekte und Vorteile dieser Methode erläutert.

Vorteile externer Style Sheets

Externe Style Sheets bieten mehrere Vorteile gegenüber internen oder Inline-Styles:

• Wiederverwendbarkeit: Ein einziges Style Sheet kann auf mehreren HTML-Seiten verwendet werden, was den Pflegeaufwand erheblich reduziert.
• Konsistenz: Durch die zentrale Steuerung des Layouts wird sichergestellt, dass alle Seiten einer Website ein einheitliches Erscheinungsbild haben.
• Effizienz: Änderungen am Design müssen nur an einer Stelle vorgenommen werden, was den Arbeitsaufwand bei Designänderungen minimiert.
• Sauberer HTML-Code: Der HTML-Code bleibt übersichtlich und gut lesbar, da er nicht mit Gestaltungsanweisungen überfrachtet ist.

Inhalt eines externen Style Sheets

Ein typisches externes Style Sheet, wie zum Beispiel style1.css, enthält eine Liste von HTML-Tags, die auf der Webseite verwendet werden. Zu jedem Tag gibt es eine Gestaltungsregel, die beschreibt, wie der Browser dieses Tag darstellen soll. Diese Regeln decken Aspekte wie Schriftart, -größe, -schnitt, -farbe und Hintergrundfarbe ab.

Eingebaute Stilvorlagen der Browser

Alle gängigen Browser verfügen über eingebaute Stilvorlagen, die festlegen, wie HTML-Tags standardmäßig dargestellt werden. Diese Standards basieren auf allgemeinen Vereinbarungen unter Browser-Entwicklern und verwenden zum Beispiel die Schriftart Times New Roman und eine Schriftgröße von 16 Punkt für normale Absätze.

Anpassung der Darstellung

Wenn die Standardeinstellungen der Browser nicht den eigenen Vorstellungen entsprechen, können diese durch CSS-Regeln im externen Style Sheet überschrieben werden. So lässt sich für jedes HTML-Tag festlegen, wie es im Browser dargestellt werden soll.

Zusammenfassung

• Ein externes Style Sheet wird durch den link-Befehl mit der HTML-Datei verknüpft.
• Das wichtigste Attribut dieses Befehls ist href, das den relativen Pfad zum externen Style Sheet enthält.
• CSS-Dateien haben die Endung .css.
• Browser verfügen über „eingebaute Stilvorlagen“, die durch CSS-Regeln angepasst werden können.
• Ein HTML-Dokument kann durch ein Style Sheet ein vollkommen anderes Erscheinungsbild im Browser erhalten.

Durch den Einsatz von externen Style Sheets wird die Verwaltung von Webdesigns effizienter und flexibler, was besonders bei größeren Projekten von unschätzbarem Wert ist.

Regeln: Die CSS-Syntax

CSS (Cascading Style Sheets) ist eine Sprache, die verwendet wird, um das Aussehen und das Layout von Webseiten zu gestalten. Die Syntax von CSS mag auf den ersten Blick komplex erscheinen, ist jedoch recht einfach zu verstehen, wenn man die grundlegende Struktur kennt.

Struktur einer CSS-Regel

Eine CSS-Regel besteht aus zwei Hauptbestandteilen: dem Selektor und der Deklaration.

Selektor

Der Selektor ist der Teil der Regel, der bestimmt, auf welche HTML-Elemente die Regel angewendet wird. In unserem Beispiel ist h1 der Selektor:

h1 {font-family: Helvetica;}

Der Selektor signalisiert dem Browser, dass die Standard-Stilvorlage für dieses spezifische HTML-Tag nicht mehr gilt. Stattdessen soll die Darstellung gemäß der angegebenen Deklaration erfolgen.

Deklaration

Die Deklaration befindet sich zwischen den geschweiften Klammern {} und besteht aus einer oder mehreren CSS-Eigenschaften und ihren zugehörigen Werten. Eine einzelne Deklaration hat folgende Struktur:

• Eigenschaft: Dies ist der Aspekt des HTML-Elements, den Sie ändern möchten, z.B. font-family.
• Wert: Dies ist der neue Wert, den Sie der Eigenschaft zuweisen, z.B. Helvetica.

In einer Regel können mehrere Deklarationen enthalten sein, die durch ein Semikolon ; getrennt werden:

h1 { font-family: Helvetica; font-weight: bold; }

Auch wenn es erlaubt ist, das abschließende Semikolon nach der letzten Deklaration wegzulassen, ist es eine gute Praxis, es immer zu verwenden, um Konsistenz zu gewährleisten.

Formatierung und Lesbarkeit

Wie im HTML-Code spielen Leerzeichen und Zeilenumbrüche im CSS-Code keine Rolle. Es ist jedoch üblich, den CSS-Code so zu formatieren, dass er übersichtlich und leicht lesbar ist. Zum Beispiel:

h1 { font-family: Helvetica; font-weight: bold; }

Diese Form der Formatierung verbessert die Lesbarkeit und wird oft in der Fachliteratur verwendet.

CSS-Eigenschaften und -Werte

Es gibt viele verschiedene CSS-Eigenschaften und die dazugehörigen Werte. Es ist nicht notwendig, alle auswendig zu kennen. Es ist jedoch hilfreich, mit den grundlegenden Eigenschaften vertraut zu sein. Für weitere Informationen und eine umfassende Liste von CSS-Eigenschaften können Sie die CSS-Kurzreferenz des Online-Kompendiums SELFHTML nutzen:

http://de.selfhtml.org/navigation/css.htm

Durch Übung und Erfahrung werden Sie sich mit der CSS-Syntax vertraut machen und lernen, wie Sie sie effektiv einsetzen können, um ansprechende und funktionale Webseiten zu erstellen.

CSS-Kommentare

Erinnern Sie sich noch an die Kommentare im HTML-Code? Damals habe ich Ihnen erklärt, wie wichtig es ist, den Quellcode mit Kommentaren zu ergänzen, damit man ihn auch nach längerer Zeit wieder versteht. Genau so verhält es sich bei Style Sheets. Kommentare in CSS werden mithilfe des aus HTML bekannten Slash „/“ zusammen mit einem Stern gebildet:

/* Das ist ein CSS-Kommentar */

Der Kommentar wird abgeschlossen mit einem Stern und einem Slash in umgekehrter Reihenfolge. Im Laufe dieses Studienheftes werden Sie sehen, wie groß und komplex Style-Sheet-Dateien werden können. Deshalb sollten Sie immer daran denken, Ihren CSS-Code mit Kommentaren zu strukturieren. Wie bei HTML können Sie den CSS-Code durch Zeilenumbrüche und Leerzeichen strukturieren, um ihn übersichtlicher zu machen.

Typografie im Webdesign

Der User – das „unbekannte Wesen“

body {font-family: Geneva, Arial, sans-serif;}

Zum Verständnis dieser Deklaration müssen Sie sich folgende Tatsache vor Augen führen: Sie wissen nichts über die Besucherin oder den Besucher der Webseite, die Sie gerade designen. Sie wissen insbesondere nicht:

1. Welches Betriebssystem sie/er einsetzt (Windows, Mac, Linux),
2. Welche Schriften auf dem entsprechenden Rechner installiert sind,
3. Welchen Browser sie/er verwendet,
4. Welche Größe des Browserfensters sie/er bevorzugt (maximiert im Querformat oder vielleicht im Hochformat),
5. Welche Bildschirmauflösung sie/er eingestellt hat.

Für die Auswahl der Schriften ist der zweite Punkt entscheidend. Ich habe trotzdem alles zusammengestellt, was Sie über Ihre(n) Besucher/-in nicht wissen. Es ist wichtig, sich diese Einschränkungen bewusst zu machen, wenn man sich mit Webdesign befasst, und ich werde Sie im Laufe dieses Studienheftes sicher noch einmal an diese Liste erinnern.

Bedeutung der Schriftenliste

Was bedeutet nun die Schriftenliste Geneva, Arial, sans-serif in dem Beispiel? Es ist eine Anweisung an den Browser des Users, die in wörtlicher Rede so lauten würde: Verwende zuerst die Schriftart Geneva, wenn sie verfügbar ist. Falls nicht, benutze Arial. Und wenn auch diese nicht verfügbar ist, verwende eine allgemeine serifenlose Schriftart (sans-serif).

Typografie im Print- und Webdesign

Typografie ist die Lehre vom richtigen Umgang mit Text und Schriften. Im Printbereich spielt Typografie eine bedeutende Rolle, denn das Drucken von Text ist eine uralte kulturelle Errungenschaft. Grafikdesigner im Printbereich geben sich viel Mühe bei der Auswahl geeigneter Schriften, von denen heutzutage Tausende zur Verfügung stehen.

Im Webdesign sieht es leider nicht so gut aus, wie man es sich als anspruchsvoller Grafiker wünschen würde. Das liegt daran, dass man als Webdesigner nur diejenigen Schriften einsetzen darf, die auch auf dem Rechner des Besuchers der Webseite installiert sind. Deshalb verwendet man meistens CSS-Regeln für die Schriftauswahl, die eine Liste von Schriftarten angeben, um die beste verfügbare Option zu nutzen.

Einführung in CSS-Klassen und Pseudoklassen

Cascading Style Sheets (CSS) sind ein leistungsfähiges Werkzeug, um das Aussehen und Layout von HTML-Dokumenten zu gestalten. In diesem Artikel werden wir uns mit Klassen und Pseudoklassen in CSS beschäftigen, um Ihnen zu zeigen, wie Sie Ihre Webseiten flexibler und interaktiver gestalten können.

CSS-Klassen

Was sind CSS-Klassen?

CSS-Klassen ermöglichen es, spezifische Stile auf eine Gruppe von HTML-Elementen anzuwenden. Sie bieten eine Möglichkeit, das Erscheinungsbild von Elementen zu variieren, ohne den HTML-Code zu verändern. Klassen werden durch einen Punkt gefolgt von einem Klassennamen definiert.

Anwendung von CSS-Klassen

Angenommen, Sie möchten in einem HTML-Dokument unterschiedliche Stile für verschiedene Absätze verwenden. Hier ein Beispiel:

• Standarddefinition für Absätze:
• p {font-size: 12pt; color: red;}
• Definition von Klassen für unterschiedliche Absatztypen:
• p.typ1 {color: blue; font-family: Courier;} p.typ2 {color: red; font-family: Arial;}

In Ihrem HTML-Code können Sie diese Klassen wie folgt zuweisen:

<p class="typ1">Dieser Absatz ist blau und in Courier geschrieben.</p> <p class="typ2">Dieser Absatz ist rot und in Arial geschrieben.</p>

Klassen ohne Selektor

Sie können auch Klassen ohne spezifischen Selektor definieren, was bedeutet, dass die Klasse auf jedes HTML-Element angewendet werden kann. Dies erhöht die Flexibilität Ihrer CSS-Stile.

• Beispiel für eine solche Klasse:
• .blautext {color: blue;}

Diese Klasse kann dann in verschiedenen HTML-Tags verwendet werden:

<h3 class="blautext">Hier ist eine blaue Überschrift</h3> <p class="blautext">Und jetzt kommt noch ein blauer Absatz</p>

Pseudoklassen

Pseudoklassen bieten zusätzliche Möglichkeiten zur Stilisierung von HTML-Elementen, die sich nicht direkt über HTML-Tags ausdrücken lassen. Sie werden durch einen Doppelpunkt gefolgt von einem Schlüsselwort definiert.

Pseudoklassen für Links

Pseudoklassen sind besonders nützlich für die Gestaltung von Links. Hier sind einige wichtige Pseudoklassen für Links:

• a:link: Für Verweise zu noch nicht besuchten Seiten.
• a:visited: Für Verweise zu bereits besuchten Seiten.
• a:focus: Für Verweise, die den Fokus erhalten, z.B. durch Tastaturbedienung.
• a:hover: Für Verweise, die mit der Maus berührt werden.
• a:active: Für gerade angeklickte Verweise.

Wichtig: Die Reihenfolge der Pseudoklassen ist entscheidend, um die gewünschte Funktionsweise sicherzustellen. Halten Sie sich an die Reihenfolge: link, visited, hover, active.

Fazit

CSS-Klassen und Pseudoklassen sind mächtige Werkzeuge, um das Styling von Webseiten zu verfeinern und dynamische Effekte zu erzielen. Durch das kluge Zusammenspiel dieser Techniken können Sie ansprechende und benutzerfreundliche Webseiten gestalten. Experimentieren Sie mit verschiedenen Stilen und Effekten, um Ihre eigenen kreativen Lösungen zu entwickeln.

CSS und Pseudoklassen: Ein Überblick

CSS (Cascading Style Sheets) ist ein wesentlicher Bestandteil moderner Webentwicklung. Es bietet eine Vielzahl von Möglichkeiten, um das Aussehen und Verhalten von HTML-Elementen zu steuern. Ein besonders wichtiges Konzept in CSS ist die Verwendung von Pseudoklassen, um spezifische Zustände von Elementen zu gestalten.

Beispiel: Gestaltung von Links

Angenommen, Sie möchten, dass Ihre noch nicht besuchten Links in rot und ohne die übliche Unterstreichung dargestellt werden. Wenn man sie mit der Maus berührt, sollen sie blau und unterstrichen erscheinen. Die dazu notwendigen CSS-Regeln könnten wie folgt aussehen:

• a:link {color:red; text-decoration:none;}
  Diese Regel sorgt dafür, dass unbesuchte Links rot und nicht unterstrichen sind.
• a:hover {color:blue; text-decoration:underline;}
  Diese Regel ändert die Farbe eines Links zu blau und unterstreicht ihn, wenn die Maus darüber schwebt.

In fast allen modernen Websites wird von der Gestaltung der Links durch diese Pseudoklassen intensiver Gebrauch gemacht. Mithilfe entsprechender Regeln können so Effekte erreicht werden, für die man früher noch viele Grafiken und eine Menge JavaScript-Programmierung brauchte.

Zusammenfassung

• Klassen ermöglichen die unterschiedliche Formatierung von Selektoren gleichen Typs.
• Mit Klassen können z. B. verschiedene Absatztypen in einem HTML-Dokument gestaltet werden.
• Die Referenz auf CSS-Klassen erfolgt im HTML-Code mithilfe des Attributs class.
• Es sind auch Klassen ohne Selektor möglich, die noch größere Flexibilität bieten.
• Pseudoklassen ermöglichen die Formatierung verschiedener Zustände von Links.

Durch den geschickten Einsatz von CSS-Klassen und Pseudoklassen lässt sich die Gestaltung von Websites stark vereinfachen und die Benutzererfahrung verbessern. Dies ist ein wesentlicher Vorteil in der modernen Webentwicklung, da es effizientere und flexiblere Gestaltungsmöglichkeiten bietet.

Verknüpfung mit HTML

Beim Erstellen von professionellen Websites ist die effizienteste Methode zur Formatierung die Verwendung von CSS, insbesondere durch externe Style Sheets. Diese Technik ist entscheidend, da sie erlaubt, ein einziges Set von Formatierungsregeln auf mehrere HTML-Dokumente anzuwenden.

Externe Style Sheets

In Kapitel 3 haben wir bereits die Verwendung von externen Style Sheets kennengelernt. Um ein solches Style Sheet einzusetzen, sollten folgende Voraussetzungen erfüllt sein:

• Die Style-Sheet-Datei muss als Textdatei mit der Extension .css gespeichert werden.
• Die Verknüpfung muss im <head>-Bereich der HTML-Datei definiert werden:
• <link rel="stylesheet" href="/pfad/name.css" type="text/css">

Vorteile der externen Style Sheets

Externe Style Sheets bieten die Möglichkeit, mehrere HTML-Dokumente mit nur einem einzigen Satz von CSS-Regeln zu formatieren. Dies bedeutet, dass durch das Einfügen der <link ...>-Zeile mit dem korrekten Pfad zur CSS-Datei in alle HTML-Dokumente, alle Webseiten einheitlich gestaltet werden können. Dadurch wird die Änderung von Formatierungsdetails an einer zentralen Stelle extrem vereinfacht und kann blitzschnell durchgeführt werden, selbst wenn Hunderte von HTML-Seiten betroffen sind.

Unterschied zwischen HTML und XHTML

Es ist wichtig, die Syntaxunterschiede zwischen HTML und XHTML zu beachten. In XHTML muss die Zeile mit der Verknüpfung zum externen Style Sheet folgendermaßen geschrieben werden:

<link rel="stylesheet" href="/pfad/name.css" type="text/css" />

Der zusätzliche Schrägstrich am Ende vor der schließenden Klammer ist erforderlich, um die strengen Syntaxregeln von XHTML einzuhalten. Dieser Schrägstrich sorgt dafür, dass das link-Tag intern geschlossen wird. Beim Arbeiten mit bestehenden Web-Projekten, die nach der XHTML-Spezifikation erstellt wurden, ist diese Schreibweise typisch und sollte beachtet werden.

Die Verwendung von externen Style Sheets ist eine bewährte Praxis in der Webentwicklung und erleichtert die Verwaltung und Aktualisierung von Webseiten enorm.