Was ist CSS(Cascading Style Sheets)

Geschichte

Das Konzept Cascading Style Sheets wurde erstmals 1994 von Håkon Wium Lie vorgeschlagen. Zusammen mit Bert Bos arbeitetet Håkon Wium Lie an CSS. Nach der Präsentation von CSS durch Håkon an der Konferenz „Mosaic and the Web“ in Chicago 1994, und später mit Bos 1995 wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam. Im Dezember 1996 wurde dann die CSS Level 1 Recommendation publiziert. CSS Level 2 (CSS 2.0) wurde im Mai 1998 als Empfehlung veröffentlicht. Seit 2002 wurde dann an der überarbeiteten Version CSS Level 2 revision 1 (CSS 2.1) gearbeitet, die Arbeit wurde 2011 mit einer Empfehlung abgeschlossen. Mit CSS 2.1 wurden lediglich bei einigen Eigenschaften ein paar Werte ergänzt. Derzeit ist CSS Level 3 (CSS 3) in der Entwicklung. CSS 3 ist im Gegensatz zu den Vorgängern modular aufgebaut, das heißt einzelne Teiltechniken (beispielsweise zur Steuerung der Sprachausgabe) haben ihren eigenen Entwicklungsrhythmus und Versionsschritte.(2) Seit 2000 ist CSS Level 3 in der Entwicklung und aktuell unterstützen einige Browser bereits einige Elemente aus diesem Standard.

Was ist CSS?

Cascading Style Sheets (bedeutet in Deutschen ungefähr „gestufte Gestaltungsbögen“), kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs.(1)
Kurz gesagt, CSS mach Webseiten erst schön, wozu HTML alleine nicht in der Lage ist.

Was sind Selektoren?

Ein Selektor ist eine Bedingung, auf die ein Element zutreffen muss, auf die die nachfolgenden Werte angewendet werden sollen.

Zum Beispiel das HTML Element <strong>Text</strong>. HTML-Elemente werden in CSS nach Ihren Namen deklariert. Ein komplettes Beispiel findet sich weiter unten. Es ist auch möglich Klassen und IDs, die am HTML-Element ausgezeichnet wurden, mittels CSS anzusprechen. Mehrere Selektoren können mit Kommata zusammengefügt werden.

Was Sind Werte/Eigenschaften?

Jede Eigenschafts-, Wertedeklaration besteht aus der Bezeichnung der Eigenschaft, einem Doppelpunkt und dem Wert, den sie annehmen soll.(1) Mehrere Eigenschaften können zwischen den geschweiften Klammern deklariert werden.

Der Aufbau einer einfachen CSS-Anweisung ergibt sich daraus wie folgt:

Selektor1 {
  Eigenschaft-1: Wert-1;
  ...
  Eigenschaft-n: Wert-n;
}

Ein Beispiel

Es soll in einem HTML-Dokument der Tag strong fett und rot dargestellt werden. Dazu ist folgendes CSS notwendig:

strong {
  font-style: bold;
  color: red;
}

Etwas komplexer. (Beachte das mehrere Selektoren, mit Kommata zu einer Deklaration, zusammengefügt wurden):

h1, .meineKlasse, #meineID {
  color: lime;
  background-color: darkred;
  font-size: 32px;
  padding: 25px;
}

Die Ausgabe im Browser sieht in etwa so aus.

CSS Beispiel
CSS Beispiel

Eine Liste aller Eigenschaften, die bereits verfügbar sind gibt es in Netz. Wenn man die Verfügbarkeit einer Eigenschaft überprüfen möchte, empfiehlt sich http://caniuse.com/

Quellen

(1) Wikipedia https://de.wikipedia.org/wiki/Cascading_Style_Sheets
(2) Wikibooks https://de.wikibooks.org/wiki/Websiteentwicklung:_CSS:_Geschichte

Note: Dieser Beitrag beabsichtigt nicht die Vollständigkeit von Informationen. Er soll lediglich einen Einstieg geben und etwas Kompliziertes einfach darstellen. Wenn du dich weiter für CSS interessierst, empfehle ich dir ein Fachbuch oder die Weiten des Internets ;-). Für Fragen oder Anregungen stehe ich gerne in den Kommentaren zur Verfügung. Gefällt dir der Artikel, würde ich mich über ein Klick aufs Herz freuen.

Tagged:

Autor Christoph Schade

Ich bin der Initiator von risosstudioDE. Seit 2009 liebe ich es, mit Webtechnologien zu spielen und bin seit 2014 als selbstständiger Webdesigner und Webdeveloper in Halle Saale tätig. Immer auf der Suche nach neuen Kontakten. Folge mir auf Twitter oder Facebook

Alle Artikel des Autors

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.