CSS nutzen

CSS - Cascading Style Sheets

Was ist CSS?

Cascading Style Sheets sind keine eigenständige Sprache des Web. Sie stellen eine direkte Ergänzung zu HTML dar, CSS ohne HTML werden Sie also nicht antreffen.

Mit CSS definieren Sie Format-Eigenschaften von HTML-Elementen.

Dabei können Sie:

Die Vorteile von CSS liegen in der Praxis in ihrer recht universellen Einsatzfähigkeit:

Wie für HTML gibt es auch für CSS Normierungen vom W3-Konsortioum (http://www.w3.org/). Derzeit existieren zwei Versionen (CSS-Level 1 und 2).

Leider werden auch hier einzelnn CSS-Befehle von den Browsern z.T. unterschiedlich oder gar nicht interpretiert. Trotzdem stellen CSS einen unverzichtbaren Bestandteil professioneller HTML-Dateien dar.

Für mich eröffneten CSS faszinierende Möglichkeiten des Layouts. Die Arbeitserleichterung ist enorm, ohne CSS kann ich mir die Entstehung dieses Projektes kaum vorstellen.

Lassen Sie sich von den Fußangeln, die Browser manchmal bereithalten nicht beirren, testen Sie ausgiebig!


Vorbemerkung

Um die folgenden Beispiele praxisbezogen darstellen zu können werden hier (ohne nähere Erläuterungen) die folgenden Angaben verwendet.

{ color: #FF0000 } stellt den Text rot dar
{ font-style: italic } stellt Text kursiv dar

Weitere Informationen dazu finden Sie dann in den entsprechenden Abschnitten zu CSS-Angaben.

CSS wirken immer auf HTML-Tags, denen sie zugeordnet werden.
Die Angaben werden (mit Ausnahme der u.g. Schnellformatierungen) in geschweiften Klammern {} notiert. Sie können mehrere Angaben zusammenfassen.

{ color: #FF0000; font-style: italic } Text in rot und kursiv

Dann werden die CSS-Angaben durch ein Semikolon ; getrennt.


CSS im Kopf der HTML-Datei

Wenn Sie CSS-Angaben im Kopf der HTML-Datei einbinden, wirken Sie sich auf alle entsprechenden HTML-Befehle dieser Datei aus.

TextBedeutung
...
<style type="text/css">
<!--
h3 { color: #FF0000 }
p  { font-style: italic }
-->
</style>
...
alle Überschriften dritter Ordnung werden rot dargestellt;
Standardabsätze werden kursiv dargestellt

Diese Eigenschaften können sie in der Datei durch die u.g. Schnellformatierungen überschreiben/ergänzen (selektiv ändern).


Separate CSS-Datei verwenden

Sie können Ihre CSS-Angaben in einer separaten CSS-Datei notieren. Diese Datei enthält reinen Text, wird mit der Datei-Erweiterung *.css gespeichert. 

TextBedeutung
/* Das ist ein Kommentar */
h3 { color: #FF0000 }
p  { font-style: italic }
alle Überschriften dritter Ordnung sind rot;
Absätze <p> werden kursiv dargestellt

Diese Formate wirken in allen HTML-Dateien, in die Sie im Container <head> ...</head> einen Verweis auf die CSS-Datei einbinden.

TextBedeutung
...
<link rel="stylesheet"
      type="text/css"
      href="/formate.css">
...
formate.css ist hier die externe CSS-Datei im gleichen Verzeichnis (ansonsten Pfadangabe)

Notieren Sie im Kopf der Datei noch lokale CSS-Angaben, so überschreiben oder ergänzen diese die globalen Angaben. 


Schnellformatierungen

Sie können einzelnen Bereichen Ihrer Datei durch CSS Formatierungen zuweisen. Dazu verwenden Sie das Attribut style, welcher als Wert die notwendigen CSS-Angaben enthält. 

TextBedeutung
...
<h2 style="color: "#FF0000">Text</h2>
...
Diese Überschrift ist rot

Sollen zusammenhängende Bereiche der Datei formatiert werden, verwenden Sie die Container <span style="[CSS]"></span> ('Aufspannen') oder  <div style="[CSS]"></div>. div erzeugt hier einen eigenen Absatz, span nicht.

TextBedeutung
...
<span style="color: #FF0000">
  ... Quelltext ...
</span>
...
Der gesamte Text im Container ist rot.

Schnellformatierungen ergänzen oder ändern wieder lokale Angaben im Dateikopf oder Angaben einer externen CSS-Datei.

Vor allem bei Mehrfachformatierungen werden so z.T. deutliche Verkürzungen des Quelltextes erreicht.


Format-Unterklassen

Sie können sich Unterklassen von HTML-Befehlen schaffen, die Sie neben den Standard-Befehlen verwenden können.

DefinitionAufruf im Text
p.rot { color: #FF0000 } <p class="rot">Roter Text</p>
<p>Standardtext</p>

Damit haben Sie zwei Arten von Standardabsätzen zur Verfügung.

DefinitionAufruf im Text
.krsv { font-style: italic } <h3 class="krsv">Text</h3>
<p class="krsv">Text</p>

So definierte Unterklassen können Sie auf verschiedene Tags anwenden.


Verschachteln von CSS-Angaben

CSS-Angaben können verschachtelt werden. Neben den genannten Auswirkungen (externe CSS-Datei > CSS im Dateikopf > Schnellformatierungen) können Sie bei der Definition auch mehrere HTML-Befehle vor den Angaben notieren.

DefinitionBedeutung
h3, sub  { font-style: italic } Beide Befehle werden um das Format kursiv ergänzt.

Beachten Sie:

DefinitionAufruf im Text
h3 sub  { font-style: italic } Der Befehl sub wird kursiv interpretiert, wenn er in einer Überschrift 3. Ordnung steht, sonst nicht.