Hauptmenü

Untermenü

CSS - Kaskadierung - Einführung

1. Ein Wort zuvor

Da ich bei langjährigen Recherchen zu diesem Thema immer wieder auf widersprüchliche, verwirrende oder unpräzise Erläuterungen gestoßen bin, habe ich mich entschlossen, einen wie ich finde, verständlichen und praxistauglichen Weg zu gehen. Daher weise ich euch vorab darauf hin, dass die Terminologie meinem Gehirn entsprungen ist und nichts mit den tatsächlichen Bezeichnungen zu tun hat. Auch die Aufteilung in die drei elementaren Prinzipien hat mit der eigentlichen Form der Kaskadierung nichts zu tun. Insofern ist auch der Titel irreführend. Aber da gilt das alte Zitat:

"Hier stehe ich. Ich kann nicht anders" [Quelle: Martin Luther, Reichstag zu Worms, 1521]

2. Der Aufbau einer HTML-Datei

Sehen wir uns mal den typischen Aufbau eines HTML-Dokuments an (die olle Doctype-Definition soll uns hier nicht jucken). Kleiner Tipp an alle Damen und Herren, die mit Klickibunti arbeiten. So muss ein Quellcode aussehen, dann klappt es auch mit dem Programmierer.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Mein Titel</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
  </head>
  <body>
    <h1>Hier kommt eine Überschrift</h1>
    <p>Es folgt ein Absatz mit ein wenig Text</p>
    <table>
      <tr>
        <td>Text Spalte 1</td>
        <td>Text Spalte 2</td>
        <td>Text Spalte 3</td>
      </tr>
    </table>
    <!--Hier folgt noch eine Liste-->
    <ul>
      <li>Krä</li>
      <li>Bla</li>
      <li>Schwall</li>
      <li>Blubb</li>
      <li>Blubber</li>
    </ul>
  </body>
</html>

Es ist eine klare Struktur zu erkennen. Es gibt Eltern- und Kind-Elemente (in Wirklichkeit nennt sich das DOM = Document Object Model), aber dazu komme ich später unter dem entsprechenden Punkt, da es hier noch nicht von echtem Belang ist. Also <body> ist das Eltern-Element von <h1>, <p>, <table> und <ul>. <table> ist das Eltern-Element von den Kind-Elementen <tr> und <td>, <ul> ist das Eltern-Element von den Kind-Elementen <li>.

Man kann sich so ein HTML-Dokument also als eine Art von Stammbaum vorstellen, nur dass er geschlechtsneutral ist. So, mit diesem Wissen können wir uns jetzt an die Prinzipien heranwagen, die auch ein wenig mit Abstammungslehre zu tun haben.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt