Mittels CSS lassen sich relativ einfach schöne Effekte für eine Homepage zaubern. Vielen professionellen Anwendern erleichtert CSS die tagtägliche Arbeit um ein Vielfaches. CSS bietet eine Vielzahl von Möglichkeiten. Es bleibt jedem Webmaster selbst überlassen, ob er die CSS Befehle direkt in den Header einer Webseite schreibt, oder ob er diese in einer externen ASCII-Datei auslagert.
Eingebetteter CSS-Quelltext im Head-Tag:
Die integrierte Pseudo-Formatierung per CSS kann direkt in den Quelltext einer Webseite im Head-Bereich integriert werden.
Diese Variante ist eher schlecht zu warten, da der Quelltext in jede HTML-Seite des betreffenden Webs zu integrieren ist. Da jede zusätzliche Zeile an Quelltext gerade bei größeren Webseiten und Portalen zu einer Fülle an Folgekosten führt, ist diese Variante demnach nicht für derartige Seiten zu empfehlen.
<style type=“text/css“>
a:link { font-weight:bold; font-size: 10px; color:#FDC100; text-decoration:none }
a:visited { font-weight:bold; font-size: 10px; color:#FDC100; text-decoration:none }
a:hover { font-weight:bold; font-size: 10px; color:#FDC100; text-decoration:none }
</style>
Ausgelagerte CSS-Formatierung in einer ASCII-Datei / Textdatei:
Die Formatierung per CSS [Cascading Style Sheets] kann auch durch wirkliche „Sheets“ in einer ASCII-Datei erfolgen. Im Head-Bereich jeder einzelnen HTML-Seite muss dann folgendes stehen:
<link rel=“stylesheet“ href=“style.css“>
Wie die CSS-Datei im Endeffekt benannt wird, ist egal – was zählt ist nur die Tatsache, dass der richtige Dateiname der CSS-Datei im Head-Bereich angegeben wird, da ansonsten die CSS-Datei nicht aufgerufen werden kann. Außerdem muss eine ASCII-Datei erzeugt werden, die z.B. mit Inhalten [CSS-Tags] gefüllt wird. Der Inhalt dieser Textdatei könnte dann beispielsweise so aussehen:
a:link { color: #00288E; font-family: verdana, arial, helvetica; font-size: 10px; text-decoration: none}
a:visited { color: #00288E; font-family: verdana, arial, helvetica; font-size: 10px; text-decoration: none }
a:hover { color: #00288E; font-family: verdana, arial, helvetica; font-size: 10px; text-decoration: none }
Selbstverständlich sind auch noch weitere Untergliederungen der CSS-Formatierungen in Überschriften etc. möglich – Sie können diese in der externen Datei zu jeder Zeit [auch nach der Veröffentlichung der Seite] bearbeiten und die gewünschten Effekte erzielen.
Hinweis zur Kompatibilität der Schreibweise von Cascading Style Sheets
Damit möglichst viele unterschiedliche Browser die Formatierung per CSS erkennen, ist es am Besten, wenn der gesamte CSS-Text in Kleinbuchstaben verfasst wird und vor allem Kommata und Semicola wie in den obigen Beispielen exakt gesetzt werden. Ebenfalls ist es von großem Vorteil, wenn man nicht nur eine Schriftart als Formatierungs-Schriftart wählt, sondern einige der gängigsten Schriftarten um eine möglichst hohe Kompatibilität zu anderen Computern zu gewährleisten.