Folgen Sie den Anweisungen auf dieser Seite und prüfen Sie etappenbezogen die Fortschritte. Versuchen Sie auch hier wieder zu verstehen was welcher Befehl bewirkt. Probieren Sie auch einzelne CSS-Styles und Attribute zu ändern oder zu löschen.

Vorbereitung

  1. Erstelle eine leere Datei und speicher diese unter index.css im selben Ordner des Files index.html ab.
  2. Füge in der index.htm in den <head>-Bereich folgende Zeile ein:
    <link href=“index.css“ rel=“stylesheet“ type=“text/css“>

Dies bewirkt, dass die Datei index.html nun auf die Datei index.css zugreifen kann. In letzterer stehen alle CSS-Style-Anweisungen. Diese Auslagerung verschafft Ihnen einen besseren Überblick und teilt den Quellcode in erfassbare Teile auf.

Anpassung mittels CSS

Füge in die index.css ein:

Ändere in der index.html:

ab in

Füge in die index.css ein:

Erklärung

In der index.php weisen Sie per class-Attribut der gesamten Tabelle die Klasse tabelle01 zu. Diese ist in der index.css definiert und wird auf die Tabelle übertragen.

Vergessen Sie nicht in der CSS-Datei bei jeder Klasse einen PUNKT vor den Namen der Klasse zu setzen. Dieser muss bei der Benutzung von class=““ IMMER vorgeschaltet werden. Lassen Sie den Punkt weg, wird die Klasse nicht interpretiert. Durch das Weglassen des Punktes bei TAG-Elementen (body, img, a, p, etc.) gelten die Änderungen für ALLE dieser TAG-Elemente in der index.css. Bezogen auf das obige Beispiel „body{background-color: #00002F;}“ bedeutet dies, das in Klammer stehende Definitionen für den GESAMTEN Body-Bereich gelten. Wie dies genau zu verstehen ist, finden Sie in den Tutorials von HTML-World und der Referenz CSS4you.

Ändere in der index.html den <td> über den Links:

ab in

Füge in die index.css ein:

Füge als nächstes in die index.css ein:

Füge als nächstes in die index.css ein:

Ändere in der index.html den <div>-Tag:

ab in

Füge als nächstes in die index.css ein:

Ändere in der index.html den <p>-Tag:

ab in

Füge als nächstes in die index.css ein:

 

Fast geschafft! Nun noch etwas Text! Setze in der index.html einen weiteren <p>-Tag folgenderweise:

Ergänze die Datei index.css wiederum um:

 

Zu guter Letzt definieren wir eine Mindesthöhe für den Hauptteil der Tabelle, um den optischen Makel auszugleichen. Weise dem letzten <tr>-Tag folgendes Klasse hinzu:

Ergänze die Datei index.css um:

Schlussbemerkung

Nun haben wir Ihnen schrittweise gezeigt wie Sie mit CSS Ihre Website selbst designen können. Zugegeben es ist noch nicht der Hit, aber erklärtes Ziel war und ist die Grundlagenvermittlung sowie eine erste Hilfestellung zu geben. Zu Beginn erfordert dies noch etwas Übung. Mit der Zeit werden Sie schneller und das Handling besser. Dann sind Sie nicht mehr auf Content-Management-Systeme oder dergleichen angewiesen und können Ihre Seiten frei und kreativ gestalten. Wenn Sie Übungsbeispiele benötigen, lassen Sie sich von anderen Websites den Quellcode anzeigen und analysieren Sie diesen. So lernen Sie zusätzlich weitere Kniffe und Möglichkeiten.