CSS kann man auf mehrere Arten in ein Html Dokument einbetten. Entweder als Anweisungen in den Body Bereich einer Html Seite, als Anweisung direkt in einem Html Tag oder eben als meine bevorzugte Variante, nämlich als externe Datei.
Der Nachteil dieser Variante liegt auf der Hand: Möchte ich ein Format, eine Angabe, eine class ändern, muss ich das in jedem Html Dokument machen. Weiters bläht es den Quelltext unnötig auf und verlängert die Ladezeiten einer Seite, da der Browser bei jedem Aufruf das CSS komplett ausliest und kontrolliert, ob es Änderungen im Stylesheet gibt.
Arbeitet man mit einem Template, das von einem CMS (Content Managment System) gesteuert wird, kann man auch auf diese Variante zurückgreifen, da man hier für eine Änderung nur im Template das CSS ändern muss. Die Ladezeiten jedoch bleiben weiterhin, und der Quelltext wird weiterhin unschön aufgebläht.
Die nächste Variante, direkt in einen Html Tag eingebettet, finde ich persönlich auch unschön, aber ab und wann kann man es sicher brauchen.
Als Beispiel nehme ich eine Tabelle her, der ich per CSS eine Weitenangabe gebe und dann dem Text eine Farbe, die Schriftfamilie, Schriftgröße plus eine Schriftstärke zuweise.
Hat man nur eine Tabelle in einem Html Dokument, mag das eine nette Lösung sein. Was aber, wenn man mehrere Tabellen hat? Soll man dann überall diese CSS Anweisung hineinschreiben?
Hier kommt nun die Stärke eines externen CSS mit classes zum Tragen.
Gehen wir davon aus, dass drei Tabellen, die unterschiedlich formatiert sein sollen, in einem oder auch mehreren Html Dokumenten vorkommen sollen. Hier bietet es sich schon an, auf CSS classes zurückzugreifen. So erspart man sich jede Menge Formatierungen direkt im Quelltext, und im Fall einer Änderung muss diese nur in der externen CSS Datei vorgenommen werden.
Im Vorfeld sollte man sich schon im Klaren darüber sein, wie etwas gestaltet werden soll, und demenstprechend gleich beim Schreiben des Html Dokuments die CSS classes vergeben.
Das würde dann z.B. so aussehen :
Wie man gut sieht, wird der Quelltext deutlich sauberer und übersichtlicher. Natürlich ist es auch möglich einzelnen Zellen classes zuzuweisen, sollte man eine Tabelle mit mehreren Zellen im Einsatz haben.
Wie sieht aber nun das externe Stylesheet aus?
Zuerst legt man eine Textdatei an, so wie man es gewohnt ist vom Betriebssystem seines Computers. Ich gehe einfach mal von einer Windows Standard Installation aus. Rechter Mausklick in dem Ordner, den man für seine Homepage erstellt hat, "Neu" -> "Textdatei". Diese nennt man z.B. style.css, von Windows wird nun die Meldung kommen, dass die Datei möglicherweise unbrauchbar wird, wenn man die Endung verändert. Das kann man getrost ignorieren und fortfahren.
Nun die Datei öffnen und die Styleanweisungen, die man benötigt, hineinschreiben. In unserem Fall müsste das Stylesheet dann so aussehen:
Was ist wichtig bei CSS?
Jede Anweisung muss mit einem Semikolon ";" abgeschlossen werden. Jeder definierte Html Tag, jede CSS class oder ID muss in geschwungen Klammern "{}" stehen. Sollte es einmal passieren, dass eine CSS Anweisung nicht ausgeführt wird, so kann man zu 99% davon ausgehen, dass irgendwo im Stylesheet ein oder mehrere Semikolons oder eine geschwungene Klammer vergessen wurden.
Auch sollte man viel Wert darauf legen, dass man sauber schreibt, eine für sich übersichtliche Struktur findet und diese konsequent durch alle seine Html und CSS Dateien durchzieht. Ich rücke z.B. CSS Anweisungen einmal mit dem Tabulator ein, so springen classes, Tags und ID´s sofort hervor.
Das sieht dann so aus :
Gehen wir nun auf die CSS Anweisungen näher ein.
Die Weite kann nicht nur mit Prozentangaben bestimmt werden, auch fixe Breiten mit Pixelangaben sind möglich.
Bettet man die CSS class in eine Zelle ein, so kann man verschiedenen Zellen unterschiedliche Farben zuweisen. Siehe weiter oben: "Einbettung mehrerer CSS classes direkt in einen Html Tag".
Auch wieder gültig, die Schriftfarbe kann man mit mehreren classes auch zellenabhängig gestalten.
Zu beachten an dieser Stelle ist, dass man nur Schriftfamilien benutzt, die bei vielen Betriebssystemen installiert sind. MS Comic Sans ist ein gutes Beispiel dafür, wie man es nicht machen sollte. Diese Schriftart ist nur Windows bekannt, Linux oder Mac erkennen diese Schrift nicht und werden den User mit der Standard Schriftart ihres Betriebssystems beglücken.
In diesem Fall ist es "bold" und macht die Schrift fett. Soll die Schrift normal sein, verwendet man das Attribut "normal".
Für Schriftformatierungen außerhalb einer class kann man die Schrift direkt für den html Tag "body" definieren, dann wird jede Schrift außerhalb einer class so formatiert, wie man es festlegt.
Im nächsten Teil möchte ich näher auf verschiedene Html Tags eingehen, bei denen ich der Meinung bin, dass diese wichtig für Html Einsteiger sein können. Vor allem für jene die keine Html Seite von grundauf selbst schreiben, sondern nur Inhalt in eine Homepage Vorlage bekommen möchten.
Natürlich und wie schon erwähnt ist das nur ein Html Grundkurs, ein Reinschnuppern in die Materie. Weitere Fragen zu Html, CSS und anderen wichtigen Themen zum Erstellen einer Homepage werden gern im Forum beantwortet.
Eine vollständige Auflistung aller Html Tags und CSS Befehle findet man z.B. auf selfhtml, einer umfangreichen deutschsprachigen Plattform. Für CSS empfehle ich zusätzlich die Internet Seiten CSS 4 You und csszengarden.com.
