Für dieses Tutorial wird die Verwendung eines einfachen Texteditors empfohlen, z.B. Notepad (unter Windows) , TextEdit (Mac) oder KEdit (KDE). Wenn Sie sich mit den Grundlagen vertraut gemacht haben können Sie auch gern zu richtigen HTML/CSS Editoren wechseln (welche in der Regel die Arbeit vereinfachen). Z.B. Style Master, Dreamweaver oder GoLive. Aber bei Ihrem ersten CSS Gehversuch sollten Sie sich nicht von den vielen Features eines solchen Editors ablenken lassen. Verwenden Sie bitte keinen Dokumenteneditor wie Microsoft Word oder OpenOffice. Diese Programme erzeugen oftmals im Quelltext Zusatzzeichen welche in HTML oder CSS nichts zu suchen haben. Wir benötigen ganz einfache Textdateien für unseren Quelltext. --

Erstellt am 5 April 2004
von mir höchst persönlich.

Sie müssen das Ganze nicht unbedingt abtippen, kopieren Sie einfach den obigen Text in Ihren Texteditor. (Achten Sie bei der Verwendung von TextEdit auf dem Mac bitte darauf dass dieser auch wirklich einfachen Text produziert. Sie können dies in den Programmoptionen festlegen.) Alert! Advanced: Die erste Zeile im Quelltext gibt dem Browser zu verstehen welche HTML Version verwendet werden soll. In diesem Fall handelt es sich um HTML Version 4.01. Worte zwischen einem < und > werden als Tags bezeichnet. Wie Sie sehen können wird das Dokument von den zwei Tags und eingegrenzt. Der Bereich zwischen und wird für alle möglichen Arten von Informationen genutzt welche nicht auf dem -- Wählen Sie nun "Speichern unter..." im Datei Menu Ihres Editors und speichern Sie die Datei unter dem Namen "mypage.html" z.B. auf Ihrem Desktop ab. Bitte schliessen Sie den Editor noch nicht, wir werden ihn noch benötigen. (Achten Sie bitte darauf dass Ihr Editor der Datei nicht noch eine zusätzliche Endung .txt anhängt - die Datei muss unbedingt die Endung .html besitzen) Als nächstes öffnen Sie mypage.html in einem beliebigen Browser. Entweder doppelklicken Sie dafür mit der Maus auf den Dateinamen im z.B. Dateimanager um den Standardbrowser zu öffnen - oder Sie wählen im Browser die Option "Datei öffnen...". Eine dritte Möglichkeit ist es -- Sie den Browser geöffnet) Wir werden damit beginnen CSS Style Sheets direkt in der HTML Seite einzubetten. Später werden wir den CSS Quelltext in eine separate Datei auslagern. Separate CSS Dateien machen dann Sinn wenn Sie den gleichen CSS Quelltext in mehreren Einzelseiten immer wieder verwenden möchten. Sie müssen dann das Ganze nicht immer wieder aufs Neue schreiben. Aber jetzt werden wir ersteinmal alles in eine Datei packen. Wir beginnen mit dem Hinzufügen eines jedoch nicht mit - nur alles zwischen Beiden wird benötigt. Ihre CSS Datei sollte jetzt in etwa so aussehen: body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } -- [etc.] Dies wird dem Browser mitteilen dass er die Style Sheets aus der Datei "mystyle.css" laden soll. Er wird diese - da kein Verzeichnis weiter angegeben wurde - im gleichen Pfad wie mypage.html suchen. Wenn Sie die HTML Datei abspeichern und die Seite neu laden sollten Sie keinen Unterschied feststellen. Es werden ja die gleichen Style Sheets verwendet, nur dass sie nun aus einer externen Quelle eingelesen wurden. Das Endresultat