Cascading Style Sheets

Begriff:
CSS, englisch Cascading Style Sheets, kann übersetzt werden mit "Verschachtelte Gestaltungsvorlagen". CSS ist eine Methode, Layout- und Designinformationen von insbesondere HTML Dokumenten in einer eigenen Sprache auszudrücken.

Aus Gründen der besseren Bewirtschaftung werden CSS Informationen in separaten .css Domumenten abgelegt. Diese Designinformationen (Layout, Schriften, Farben) sind also vom HTML Code und dessen Inhalt abgetrennt (obwohl sie, technisch gesehen, auch im Code mitgeführt werden könnten, sog. Inline-Style).

css-html

Die Trennung von CSS und HTML Code ermöglicht eine modulare und effiziente Bauweise. Ein CSS Dokument enthält ALLE möglichen Design Informationen; hingegen muss ein html Dokument nicht zwingend alle diese Informationen umsetzen.

Beispiel: Ein Stylesheet umschreibt z.B. 10 verschiedene Layoutboxen, das eine html Dokument benötigt davon aber nur die Boxen 1,2,5, ein anderes html hingegen die Boxen 1,3 und 7.

Damit der Browser weiss, welche css Informationen zu einem bestimmten html Dokument gehören, steht im Bereich dieses html Dokuments ein Link zu "seinem" Stylesheet:
 

<link rel="stylesheet" href="stylesheet.css">

Aufbau von CSS Informationen

Im CCS Dokument selber gibt es klare Strukturen und regeln. Im Wesentlichen bestehen folgende Grundelemente:

ausruf
1. Selektor
2. Deklaration, bestehend aus:

    • Eigenschaft
    • Wert

Ein Selektor legt fest, welches Element (Tag, ID oder Klasse) ausgezeichnet wird, und die Deklaration legt fest, welchen Eigenschaften, und mit welchen Werten versehen sind.
 

SELEKTOR { Eigenschaft: Wert }

Ein Beispiel: Um die Textfarbe einer Überschrift der 1. Ordnung (H1) festzulegen, benutzt man diese Regel:

H1 { color: red; }

Das Beispiel oben ist eine einfache CSS Regel. So eine Regel besteht aus zwei Hauptteilen, dem Selektor H1 und der Deklaration color: red. Die Deklaration besteht ebenfalls aus zwei Teilen, der Eigenschaft color und dem Wert red. 

Wobei nur Grundfarben als Wort wie "red" geschrieben werden können, meist benutzt man entweder hexadezimale Werte :

H1 { color:#FF0000; }

…oder rgb bzw. rgba Werte. Das a bedeutet alphkanal (= Transparenz) und ermöglicht es, die Deckkraft einer farbe zu bestimmen:

H1 { color:rgba(255,0,0,1.0); }

a Wert 0= transparent
a Wert 1 oder 1.0 = deckend
Beliebige Kommastellen dazwischen möglich, zB. 0.3333 für ein Drittel deckend.

Die Eigenschaft 'color' ist nur eine von vielen Eigenschaften, mit denen man das Aussehen des HTML Dokumentes beeinflussen kann.

Hier ist eine Übersicht aller CSS Eigenschaften auf dem CSS-Wiki.


3 Arten von Selektoren:
HTML-Tags, Id's, Klassen

HTML-Tags
Diese sind die ältesten Formatierungsmittel im Web, es gab sie bereits lange vor CSS. HTML-Tags haben weder Punkt noch Slash vor der Tag-bezeichnung, zB.

<a> Link
<p> Paragraph
<h1> Grosse Titelauszeichnung (gibts runter bis h6)
<hr> Waagrechte Linie ("horizontal ruler")

…und viele mehr. Tags sind standardisierte Begriffe. Jeder Browser kennt sie und kann sie anwenden, ohne dass ihm zu diesen Tags CSS Informationen geliefert werden. So macht er aus H1 Text einen Titel in zB. 32 px Grösse, fett, mit grossem folgenden Zeilenabstand. Das Blöde ist, jeder Browser interpretiert diese HTML-Tags anders. Ein anderer macht 28px für H1, ein dritter vielleicht 40px draus. Deshalb ist es dringend zu empfehlen, auch diese gängigen Tags im eigenen CSS genau zu definieren, um das Design browserübergreifend konstant zu halten.

Übersicht aller HTML-Tags hier bei W3Schools.

Id's
Haupteigenschaft: Eine Id kann pro Dokument nur 1x vergeben werden. Sie ist im CSS geschrieben mit einem Slash als Präfix, zB.

#container
#fotogalerie
#miniboxuntenlinks

Im HTML wird eine Id so eingesetzt:

<div id="container">…..</div>

Id-namen werden vom Autor frei vergeben. Leer- und Sonderzeichen sind nicht erlaubt. Eine Id ist hierarchisch über der Klasse eingestuft, ihre Eigenschafte können die Eigenschaften vonn Klassen überstimmen. Mehr dazu hier.

Klassen (classes)
Klassen sind hierarchisch untergeordnete, flexible Designregeln, die pro Dokument beliebig oft verwendet werden können. Geschrieben werden sie mit einem Punkt als Präfix:

.hintergrundBeige
.hintergrundGrau
.fussnotentextKlein

Im HTML können sie jedem Tag beliebig angefügt werden, zB.

<div id="container" class="hintergrundBeige">…..</div>
<p class="fussnotentextKlein"> … </p>

Gruppieren der Styles

Um Styles Sheets möglichst klein zu halten, kann man Selektoren in Gruppen zusammenfassen, indem man sie mit mit Kommata vor der Deklaration trennt:

H1, H2, H3, H4, H5, H6 {
font-family: 'Roboto Condensed';
font-weight: bold;
}

Die Grössen spezifiziert man dann einzeln:

H1 {font-size: 40px;}
H2 {font-size: 32px; }

usw.

Ähnlich kann man auch beliebig viel Eigenschaften für einen Selektorzusammenfassen:

#container {
background-color: #f3f3f3;
margin: 0;
padding: 20px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height:18px;
}

Mehr dazu hier: http://www.peterkropff.de/site/css/syntax.htm

Vererbung von Stilen

Ein ausgezeichnetes Element übernimmt ("erbt") immer die Eigenschaften seines übergeordneten Elemes, es sei denn, es werden ihm explizit neue Eigenschaften zugewiesen. Man kann zum beispiel mit dem Selektor "body" pauschal festlegen, dass lee enthaltenen Text in der schrift Arial erscheinen sollen. Zusätzlcih kann man aber untergeordnete Klassen erzeugen, dass z.B. Titel und Untertitel mit Georgia ausgezeichnet werden sollen. Es ist wichtig, die Vererbungsmechanismen zu verstehen, die "kaskadierenden" Stilvorlagen.

Mehr dazu hier: http://www.peterkropff.de/site/css/vererbung.htm

Online mit HTML und CSS experimentieren.