CSS mit Adi Prinz

CSS-Basic / Erste Schritte

CSS (Cascading Style Sheets) ist eine Gestaltungs- und Formatierungssprache vor allem für Internetseiten und ist Standard bei heutigem Webdesign. CSS wird vom World Wide Web Consortium (W3C) ständig weiterentwickelt. Die aktuell letzte CSS-Version ist CSS3. Für die Verwendung von CSS müssen sie keine Dokumenttypdeklaration definieren.

Was muss ich wissen?

Sie sollten gute HTML5-Kenntnisse haben, bevor sie sich mit CSS und im Speziellen mit CSS3 beschäftigen. Ein guter Umgang mit einem Textverarbeitungsprogramm (z.B. MSWord) ist sicher kein Nachteil!

Wohin schreibe ich CSS?

Im Prinzip gibt es drei Möglichkeiten zum notieren von CSS-Code.

Im HTML-Tag mit dem Attribut style
Im head-Element mit dem style-Tag
In einer externen CSS-Datei

Jedes HTML-Element stellt das Universalattribut style zur Verfügung. In der Wertzuweisung können sie dem Element spezifische Anweisungen geben. Die Anweisung ist nur für dieses Element gültig.

<p style="color:red">

Im HTML-head gibt es das style-Element. Darin können sie CSS Anweisungen schreiben. Die Anweisungen sind für jedes notierte Element im Dokument gültig.

<style>
  h1 { color: green; }
  h2 { color: blue; }
  p { color: red; font-size:1.0em; }
</style>

Seit HTML5 dürfen style-Elemente auch innerhalb des body-Elementes notieren werden. Dazu muss man das Attribut scoped hinzufügen. Diese Regeln gelten nur für das Elternelement und seine Kindelemente.

<style scoped>
  h1 { color: green; }
  h2 { color: blue; }
  p { color: red; font-size:1.0em; }
</style>

Sie können ihre CSS-Anweisungen auch in einer externen Datei (ein sogenanntes Stylesheet) schreiben. Dafür verwenden sie denselben Editor wie auch für HTML-Dateien. Sie müssen nur das Stylesheet mit der Endung .css speichern (z.B. style.css). Mit dem link-Tag im Head des HTML-Dokuments binden sie diese CSS-Datei ein. Die Anweisungen im Stylesheet sind für jedes notierte Element im Dokument gültig.

<link rel="stylesheet" href="Stylesheets/style.css">

Sie können auch mehrere Stylesheets in ihr HTML-Dokument einbinden.

Auch für CSS gibt es natürlich WYSIWYG und CMS-Anwendungen (Dreamweaver, Joomla, Typo3). Diese Themen werden in diesem Script nicht behandelt!

Die Syntax von CSS

Wenn sie Stylesheet-Angaben schreiben dann beachten sie folgende Syntax: Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Der Deklarationsblock wird in einem geschweiften Klammernpaar geschrieben.

Selektor {Deklarationsblock}

Diese Regel gilt für CSS-Anweisungen in einem externen Stylesheet bzw. im HTML-head. CSS im HTML-Element benötigt keinen Selektor und das geschweiften Klammernpaar fällt auch weg.

Der Selektor

Der CSS Selektor steht vor dem Deklarationsblock und gibt an auf welches HTML-Element der Deklarationsblock angewendet werden soll. Dabei gibt es eine Vielzahl an Selektoren, voresrst werde ich mich auf die wichtigsten beschränken.

Typselektoren

Mit Typselektoren sprechen sie ein oder mehrere HTML-Elemente direkt an. Wenn sie mehrere Elemente selektieren, trennen sie diese mit einem Komma.

h1, h2, h3 {Deklarationsblock}

Klassenselektoren

Mit Klassenselektoren sprechen sie ein oder mehrere HTML-Elemente mit deren Klasse an. Sie müssen vor dem Klassennamen einen Punkt setzen.

.myclass {Deklarationsblock}

ID-Selektoren

Mit ID-Selektoren sprechen sie ein HTML-Element mit der ID an. Sie müssen vor dem ID-Namen ein Rautensymbol setzen.

#myID {Deklarationsblock}

Nachfahrenselektoren

Die Gültigkeit für die folgende Regel lautet übersetzt ungefähr so: Wende die Regel an, für jedes p-Element, welches in einem div-Element notiert ist.

div p {Deklarationsblock}

Ich habe hier zwei Links für komplette Referenzen von Selektoren.

http://wiki.selfhtml.org/wiki/CSS/Selektoren
http://www.w3schools.com/cssref/css_selectors.asp

Deklarationsblock

Ein Deklarationsblock beinhaltet eine oder mehrere Eigenschaft/Wert-Paare (Anweisungen). Beenden sie jede Anweisung mit einem Semikolon.

Selektor {Eigenschaft:Wert; Eigenschaft:Wert; Eigenschaft:Wert;}

Jedes HTML-Element stellt das Universalattribut style zur Verfügung. In der Wertzuweisung können sie dem Element spezifische Anweisungen geben. Die Anweisung ist nur für dieses Element gültig. Selbstverständlich brauche sie dafür keinen Selector und keine geschweiften Klammern. Das Semikolon am Ende kann ebenfalls entfallen, es sei denn sie schreiben mehrere Anweisung. In diesem Fall müssen sie Anweisungen mit einem Semikolon trennen.

<p style="color: blue">
<p style="color: blue; font-size:1.0em">

Im HTML-head gibt es das style-Element. Darin können sie CSS Anweisungen schreiben. Die Anweisungen sind für jedes notierte Element im Dokument gültig.

<style>
  h1 { color: green; }
  h2 { color: blue; }
  p { color: red; font-size: 1.0em; }
</style>

Seit HTML5 dürfen style-Elemente auch innerhalb des body-Elementes vorkommen. Sie müssen das Attribut scoped einfügen. Die Anweisungen gelten nur für das Elternelement und seine Nachfahren.

<div>
<style scoped>
  h1 { color: green; }
  h2 { color: blue; }
  p { color: red; font-size: 1.0em; }
</style>

<h1>Überschrift1</h1>
<h2>Überschrift2</h2>
<p>Das ist ein Absatz</p>
</div>

<link rel="stylesheet" href="Stylesheets/style.css">

Die Syntax im externen Stylesheet ist ident mit der Syntax von CSS im style-Element. Das style-Tag selber dürfen sie natürlich nicht schreiben. Die Schreibweise in diesem Beispiel dient nur der besseren Lesbarkeit.

h1 { 
  color: green; 
  }
h2 { 
  color: blue; 
  }
p { 
  color:red; 
  font-size: 1.0em; 
  }