100% unverbindliche Anfrage

Bitte wählen Sie:

CSS Begriffserklärung und Definition

cssDie Abkürzung CSS steht für den englischen Begriff „Cascading Style Sheets„. Übersetzt definieren Cascading Style Sheets sogenannte kaskadierende (stufenförmig bzw. hintereinander angelegte) Stilvorlagen im Bereich des Webdesign. CSS ist eine durch das W3 Consortium deklarierte Sprache und ergänzt sich zum herkömmlichen HTML. Als Stylesheet-Sprache stellt sie heute den Standard bei der Darstellung von Websites dar.

Zweck und Nutzen von CSS

Der Grundgedanke, der hinter der Entwicklung von CSS stand und auch noch heute steht, ist der, die inhaltliche Struktur einer Webseite von der grafischen abzutrennen und so weitestgehend unabhängig voneinander zu gestalten. Folglich sollte HTML künftig nur noch eine rein Content-bezogene und funktionale Sprache sein, während Optik und Layout via CSS realisiert und definiert werden sollten. Da beide Sprachen unabhängig voneinander auf das spätere Produkt wirken, und das CSS sogar in einer separaten Datei abgelegt, gepflegt und aufgerufen werden kann, ergeben sich zahlreiche Vorteile für den Webdesigner oder Webmaster.

Der vermutlich größte Nutzen ist dabei der, dass ein Stylesheet-Dokument in seiner zentralen Eigenschaft auf alle mit ihm verbundenen Seiten und Unterseiten wirkt, also auch jede (nachträgliche) Veränderung an ihr sich unmittelbar auf alle diese angebundenen Seiten auswirkt. Das ist in besonderem Maße für sehr umfangreiche Webprojekte sinnvoll, die aus zahlreichen Seiten und Unterseiten bestehen und/oder sich regelmässig um solche erweitern.

In der Praxis bedeutet dies eine enorme Zeitersparnis im Bereich der Pflege und Anpassung an bspw. Bedürfnisse des Besuchers oder Betreibers, an Veränderungen im Bereich der Usability, Barrierefreiheit oder neue Darstellungsmethoden und -techniken in Form moderner Ausgabegeräte.

Die Trennung von HTML und CSS im Detail

HTML, XML sowie die dynamische Skriptsprache PHP stellen die inhaltliche Struktur eines Dokuments dar. Der Content wird dabei wie bisher auch direkt in die HTML-Datei geschrieben oder inkludiert/aus externen Quellen eingelesen. Aktionen (Actions), wie beispielsweise interne und externe Links, das Senden und Empfangen von nutzerdefinierten Inhalten wie Formularfelder, die Zuordnung von Ländercodes und alle weiteren für die Funktionalität einer Webseite relevanten Codes werden auch weiterhin via HTML und Co. direkt im Dokument deklariert und ausgeführt.

CSS definiert indes die Erscheinungsform dieser strukturellen und funktionalen Elemente, also die Art und Weise, wie der Besucher sie optisch wahrnimmt. Das geschieht beispielsweise über Farben, Formen und Schriftarten sowie -größen. Sie können direkt in das HTML-Dokument geschrieben und dort auch definiert werden, das externe Stylesheet hat sich allerdings bewährt und wird vorzugsweise verwendet. Angaben zu den optischen und darzustellenden Parametern werden in dieser *.css-Datei hinterlegt und durch einen Befehl im Kopf des HTML-Dokuments eingepflegt.

Unterschiedliche CSS-Dateien für unterschiedliche Darstellungen (bspw. getrennt in Fonts, Layouts und/oder auch geräteabhängige oder browserabhängige unterschiedliche Parameter) machen die Dokumentenpflege noch einfacher. Hierfür werden innerhalb des Stylesheet Klassen und Ids benannt, entweder frei oder anhand ihrer HTML-Tags, und mit den verschiedensten Parametern versehen und in sich als Codeblock geschlossen. Der Aufruf des Klasse oder ID geschieht dann unmittelbar im HTML- oder PHP Dokument über den Befehl „id=“ bzw. „class=“ sowie dem vergebenen Namen für den Block.

So funktioniert CSS

Innerhalb eines ID- oder Klassenblocks, geöffnet und geschlossen mit geschwungenen Klammern „{}“, werden sämtliche Angaben zur Gestaltung vorgenommen. Dazu zählen Schriftart und -größe sowie Farbe, Umrandungen und deren Breite/Farbe, Hintergrundfarben- oder Bilder sowie deren Eigenschaften, aber primär auch Positionsangaben sowie Größenverhältnisse ganz allgemein.

Gibt man einer ID oder Klasse Werte zur Höhe und Breite (height, weight) sowie Positionsangaben (top, left, center, bottom, meist in Verbindung mit Koordinaten in Pixel oder pt), positioniert und deklariert man ein Objekt bereits durch das Stylesheet. Sie können sie sich auch automatisch an Medientypen wie Bildschirme und deren Eigenschaften anpassen (sog. Media Queries). Fügt man im HTML-Dokument der ID oder Klasse nun bspw. ein Bild zu, oder umgekehrt, gibt einem Bild eine Klasse/ID, dann richtet es sich nach diesen definierten Werten. Eine Veränderung dieser Werte im Stylesheet (bspw. das Neupositionieren von top auf bottom) wirkt sich somit unmittelbar aus, das Bild erscheint nun auf allen Seiten, die dieses Bild in Verbindung mit der Klasse/ID beinhalten, unten statt oben.

Das Gleiche funktioniert auch mit beispielsweise Texten. Hier kann die ID/Klasse sowohl auf Absätze bezogen sein (der p-Tag) oder aber frei definiert, dann verhält es sich wie ein Textfeld (vergleichbar mit Textfeldern in Officeanwendungen, die frei positioniert und skaliert werden können). Positionierung und Skalierung werden wiederum über den jeweiligen Block im Stylesheet angegeben und können eingeschränkt auch dynamisch sein, wie z.B. durch Angaben zu min-height (Mindesthöhe) oder max-width (Maximalbreite).

CSS löst die Tabelle ab

Ein weiterer entscheidender Vorteil von CSS ist der, dass seitdem komplett auf Tabellen für das Webseitenlayout verzichtet werden kann. Die Angaben zu Höhe und Breite eines Blocks definieren rechteckige bzw. quadratische Felder, denen Inhalte zugewiesen werden können und die sich, sofern korrekt definiert, auch auf diese Felder beschränken. Zudem können diese Felder (Container genannt) überlappend dargestellt werden. Vererbungsattribute innerhalb von CSS erzielen, dass wiederkehrende Werte nicht ständig neu definiert werden müssen, sondern sich aus sogenannten Elternelementen automatisch ableiten und übernommen werden.

Außerdem können eine Vielzahl von Werten zur Positionierung unmittelbar abhängig vom vorherigen oder Elternelement definiert werden. So lassen sich auch inhaltsabhängige Lösungen erzielen, die das Erscheinungs- und Darstellungsbild maßgeblich mit beeinflussen können – die starre Tabelle fällt weg und wird durch eine flexiblere Alternative durch die Container ersetzt.

Innerhalb eines Containers (DIV) ist es wiederum möglich, ebenfalls HTML, PHP oder auch ganze Skripte auszuführen, die sich dann ebenfalls nach den CSS-Parametern richten, sofern vorgesehen. Die Verschachtlung erfolgt dabei innerhalb des HTML-Dokuments logisch und chronisch. So kann einem DIV-Container eine Klasse zugewiesen, innerhalb des Containers ein Link geschrieben und einer Klasse zugeordnet und der Link wiederum um ein Bild ergänzt und ebenfalls via CSS mit Parametern versehen werden.

Ebenfalls ist es möglich, Angaben zum „Title„, alternative Bildunterschriften bei fehlerhafter Darstellung etc. zu deklarieren. Diese können sich untereinander ergänzen, aufeinander aufbauen, gegenseitig aufheben oder auch nach Priorität geordnet werden.

Browserweichen, CSS-Hacks und Spielereien

Dank des im Jahre 2000 eingeführten neuen und bis heute aktuellen CSS3 sind Darstellungsformen möglich, die früher nur über Skripte (bspw. Javascript) möglich waren. So sind einfache Animationen bei einem Mouse-Over durch entsprechend komplexe CSS-Definitionen realisierbar, Schatteneffekte, abgerundete Ecken der ansonsten quadratischen/rechteckigen Container und einige andere. Die Ladezeit verkürzt sich so enorm und die Darstellung bleibt stets gleich.

Allerdings gibt es eine Ausnahme: Geräte- und browserabhängige Interpretationsschwierigkeiten. So interpretiert bspw. nicht jeder Browser jeden Befehl identisch – das bekannteste Beispiel hierfür sind Unterschiede in der Darstellung zwischen Mozilla Firefox und dem Internet Explorer. Hierfür werden – um einheitliche Darstellungen zu realisieren – sogenannte Hacks verwendet. Sie sind keine anerkannten deklarierten Selektoren/Werte/Parameter, sondern nutzen die Schwäche des Browsers aus, die meist dahingehend funktioniert, ein Element anzuzeigen oder nicht.

Da CSS es ermöglicht, ein Layout dynamischer als mit HTML anzulegen, sind auch Unterschiede im Ausgabegerät und dessen Auflösung leichter zu realisieren – das Layout passt sich entweder selbst an, oder kann durch einen Code (Weiche) entsprechend dem Browser und/oder Ausgabemedium auf ein alternatives, angepasstes Stylesheet-Dokument verwiesen werden. Mittels CSS ist auch Barrierefreiheit einfacher umzusetzen. Durch das Attribut „media“ können Ausgabegeräte für Blindenschrift oder auch Screenreader definiert und zugeordnet werden.



Zurück zur Hauptseite: c

Sie haben Fragen?

Kostenlose, unverbindliche Erstberatung:

Anrufer aus Deutschland:
Tel. 0771 - 1589439
Internationale Beratung:
Tel. +49771 - 1589439
Anfrage per Email:
buero@seo-analyse.com

» zum Anfrage-Formular

Onpage Optimierung

Suchmaschinenoptimierung im Quelltext

Wir schaffen für Ihre Webseite oder Ihren Shop eine optimale Onpage-Basis für weiterführende Optimierungsmaßnahmen.

Offpage Optimierung

Offpage Suchmaschinenoptimierung

Natürlicher Linkaufbau gemäß den Regeln der Suchmaschinen - wir bieten ihn!

SEO Beratung

SEO Beratung

Unsere Spezialisten beraten Sie gerne hinsichtlich Ihrer akuten oder strategischen Fragen.

Ranking Monitoring

Ranking Optimierung

Bei uns Standard: qualifiziertes Monitoring Ihrer Google Platzierungen.

Suchmaschinenoptimierung für Google

Google Suchmaschinenoptimierung

Wir kombinieren Google Optimierung mit ganzheitlicher Suchmaschinenoptimierung.

SEO Strategie

SEO Strategie

Praxisbewährte Strategien, die auf Zahlen und Fakten basieren.

SEO Tools

SEO Tools

Immer im Bild: professionelle SEO Tools informieren Sie über den Status Quo.