CSS Einführung – Warum eigentlich CSS?

Cascading Style Sheets wurden 1994 vom norwegischen Wissenschaftler Håkon Wium Lie zum ersten Mal als „Internet-Sprache“ vorgeschlagen. Der Norweger arbeitete mit dem niederländischen Wissenschaftler Bert Bos zusammen, der zu diesem Zeitpunkt noch eine eigene Stylesheet-Sprache benutze und einen Browser Namens „Argo“ konzipierte. Gemeinsam entwickelten sie CSS. Mittlerweile ist das CSS bereits in der dritten Entwicklungsstufe (CSS3).

Doch warum sollte man CSS nutzen, wenn eine Reihe von anderen Web-Sprachen existieren, wie: HTML, XHTML oder XML? Welche Vorteile bringt CSS mit sich und wie lässt sich am besten damit arbeiten?

Cascading Style Sheets, oder kurz CSS, ist eine Stylesheet-Sprache, also praktisch eine Art Formatvorlage für strukturierte Dokumente, es wird in der Regel zusammen mit HTML oder XML benutzt. CSS dient dementsprechend quasi als Code, der festlegt wie ein bestimmter Teil oder Inhalt in beispielsweise einem HTML-Dokument aussehen soll.

Die CSS besteht aus so genannten Blocks, die auch als Regelmenge bezeichnet werden, jene beinhalten eine spezielle Anweisung. In der Regel besteht eine solche Anweisung aus 2 Teilen, zum einen aus dem Selektor und zum anderen aus den Eigenschaften. Der Selektor steht dabei immer vor einer geschweiften Klammer und markiert so den Abschnitt, auf den die Anweisung angewendet werden soll.

Das Herz einer jeden CSS-Regelmenge liegt dann selbstverständlich zwischen den geschweiften Klammern, hier befinden sich die Eigenschaften des ausgewählten Abschnitts. Eigenschaften werden in der Schreibweise stets mit einem Doppelpunkt abgeschlossen, nach dem Doppelpunkt folgt dann ihr jeweiliger Wert (also z.B.: # Beispiel{color:green;}).

Dennoch! Alteingesessene Computerliebhaber werden jetzt den Finger heben, haben sie doch bisher auch mit üblichen Font-Tags Tabellen und Schrift stets stilvoll in einen Kontext gebracht. Doch CSS eröffnet ihnen bis dato ungeahnte Möglichkeiten in der perfektionierten Gestaltung und gerade für jene Leute mit bereits vorhandener HTML Erfahrung bietet sich das nach einer Weile recht einfach verständliche CSS geradezu an.

Doch auch Laien können dank der immer wieder kehrenden Grundstruktur des Systems schnell von den Vorzugen des Cascading Style Sheets überzeugt werden. Spezielle Vorzüge verdeutlichen dies in der Folge, so beinhaltet der HTML-Code dank des Einsatzes von CSS später ausschließlich strukturrelevante Teile, da sämtliche Formatierungsangaben idealerweise in externe Dateien ausgelagert werden. Außerdem unterstützt CSS sehr viele verschiedene Medientypen. Per CSS wird Webdesign nicht nur für den Bildschirm ermöglicht.

Auch die Sprachausgabe von Webpages zu bestimmen ist so schon lange keine Zukunftstheorie mehr. Jene werden als aurale Stylesheets bezeichnet. Print-Stylesheets ermöglichen es die Druckausgabe einer Homepage differenziert zu ihrer Bildschirmausgabe zu gestalten. Sogar Blinden oder stark Sehbeschädigten kann durch CSS geholfen werden, so ist eine Ausgabe auf einer so genannten Braille Zeile, also einem Ausgabegerät für Blinde, mit simpelsten Mitteln möglich.

Um die Stylesheets in verschiedene Medienformate einzubinden, gibt es das Attribut media, in diesem Attribut werden die Parameter notiert die für die dieses Stylesheet gelten soll.

Das besonders praktische: Dies alles ist realisierbar, ohne sich mit unzähligen verschiedenen Versionen des Dokumentes herumzuschlagen. Aus einer Datei ist so alles möglich. Hinzu kommt neben dem Fakt der Arbeitsvereinfachung auch der Aspekt der Layoutoptimierung.

CSS macht individuelle Formen- und Farbstile rund um die Website, dank der großen typografischen Eigenschaften, die das Programm aufweist. Die eintönigen und veralteten HTML-Codes stellen keinen Vergleich zur jetzt möglichen Variabilität der Eingriffsmöglichkeiten dar. Fallende Schatten oder spezielle Wort- und Buchstabenabstände sind nur zwei Beispiele der typografischen Verbesserungsmöglichkeiten.
Doch CSS ermöglicht auch komplette Designeveränderungen und dies in atemberaubend schneller Geschwindigkeit, da die Layout- und Stylingeigenschaften komplett im Stylesheet liegen.

Schließlich reicht hier bereits eine kleine Änderung im Wert einer Eigenschaft, um bereits große Teile der Seite optisch zu verändern. Die mit CSS entworfenen Webseiten verbrauchen deutlich weniger Traffic, weil die Dateien wesentlich kleiner ausfallen und somit die Serverhardware weniger beansprucht wird, vor allem für Seitenbetreiber mit großen Besucherzahlen ist es vom großen Vorteil und kostensparend. Die Seiten lassen sich auch gut über eine Modemverbindung aufbauen, was für User mit „lahmen“ Netzwerk sehr erfreulich ist. Eine höhere Platzierung bei den Suchmaschinensuche lässt sich ebenso leichter erzielen, die Strukturierung des HTML-Codes sorgt für Optimierung des Suchmaschinenrankings.

Auch für kleinere Geräte mit Internet-Zugang, wie Mobiltelefone oder PDA’s ist Umstellung auf CSS ein positiver Nebeneffekt. Leider sind mit CSS programmierte Seiten anfälliger für ältere Web-Browser und werden oft nur teilweise dargestellt. Für Menschen mit künstlerischen Ambitionen bietet CSS nahezu grenzenlose Spielräume – Web-Artisten oder Grafikdesigner werden auf ein optimales Werkzeug stoßen und auf ihre Kosten kommen.

Cascading Style Sheets sind heutzutage Standards im World Wide Web – das Normierungs- und Standardgremium W3C hat viel dazu beigetragen, dass CSS große Anerkennung genießt. CSS ermöglicht schnelleres Surfen im Internet, macht die Gestaltung der Webseiten umfangreicher und übersichtlicher.

Doch wenn Sie diese moderne Stylesheet-Sprache nutzen, bedeutet dies nicht automatisch, dass Ihre Seite durchdesignt daherkommt, sondern auch hier ist aufwendige Arbeit gefragt und natürlich auch das Können gut strukturierte schlanke Seiten zu bauen. Doch auch dies erlernt sich mit ein bisschen Geduld sehr schnell. Zusammen mit HTML und XML wird CSS zu einem unschlagbaren Instrument, welches in richtigen Händen wahre Wunder bewirkt.

Auf gehts! Hier finden Sie ein umfassendes CSS Tutorial. Es steht auch als praktisches PDF zum download bereit.

Kategorie: Webdesign

Tags:

RSSComments (0)

Trackback URL

Kommentar schreiben




Kommentare mit Foto bitte mittels Gravatar.