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
- Erstelle eine leere Datei und speicher diese unter index.css im selben Ordner des Files index.html ab.
- 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:
1 | body{background-color: #00002F;} |
Ändere in der index.html:
1 | <table width="965"> |
ab in
1 2 | <table width="965" align="center" class="tabelle01" cellpadding="0" cellspacing="2"> |
Füge in die index.css ein:
1 | .tabelle01{background-color:#FFFFFF;border-bottom:5px solid #C0C0C0;} |
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:
1 | <td> |
ab in
1 | <td class="navigation"> |
Füge in die index.css ein:
1 | .navigation{background-color:#000000;} |
Füge als nächstes in die index.css ein:
1 2 3 | .navigation a{color:#FFFFFF;font-weight:bold;font-family:Arial; font-size:11px;text-decoration:none;padding-left:20px; padding-right:20px;line-height:24px} |
Füge als nächstes in die index.css ein:
1 | .navigation a:hover{text-decoration:underline;} |
Ändere in der index.html den <div>-Tag:
1 | <div> |
ab in
1 | <div class="bild01"> |
Füge als nächstes in die index.css ein:
1 | .bild01 img{border:4px solid #C0C0C0;padding:3px;margin-top:40px;} |
Ändere in der index.html den <p>-Tag:
1 | <p> |
ab in
1 | <p class="text01 rand01"> |
Füge als nächstes in die index.css ein:
1 2 3 4 | .text01 {font-family: Trebuchet MS,Arial;font-size:30px; font-weight:bold;text-decoration:underline;} .rand01 {margin-left:480px;margin-top:-283px;} |
Fast geschafft! Nun noch etwas Text! Setze in der index.html einen weiteren <p>-Tag folgenderweise:
1 2 | <p class="text02 rand02">Hier kann nun ein individueller Text verfasst werden. Beachten Sie hierbei die Begrenzung der Zeilenlänge und die Ausrichtung als Blocksatz! </p> |
Ergänze die Datei index.css wiederum um:
1 2 3 4 | .text02 {font-family:Verdana;font-size:13px;;width:300px; text-align:justify} .rand02 {margin-left:480px;margin-top:20px;} |
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:
1 | class="hoehe01" |
Ergänze die Datei index.css um:
1 | .hoehe01 {height:600px;vertical-align:top;} |
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.
