CSS - Cascading Style Sheets,
statt Spaghetti-Code

CSS ist ein Standard zur Beschreibung/Festlegung der Layout-Eigenschaften einer Webseite und dient - als Formatsprache dazu, die Darstellung der verschiedenen Elemente in Form zu bringen. Der große Vorteil von CSS Formatanweisungen ist, dass Definitionen für jedes Element einer Website in einer zentralen Datei abgelegt und bei Bedarf immer wieder abgerufen werden kann. CSS Deklarationen können sogar auf untergeordnete Elemente weiter vererbt werden, was zusätzliche Anweisungen unnötig macht. Das spart natürlich Unmengen an Code, ist W3C konform und auch Suchmaschinen können dank CSS viel schneller herausfiltern, welche wertvollen Inhalte sich tatsächlich auf einer Seite befinden.

Beim Aufruf einer Internetseite müssen blitzartig, sämtliche Informationen vom Browser gelesen und verarbeitet werden, was Zeit und Rechenleistung kostet. Es spielt dabei keine Rolle ob es sich um Text, Code, Formatanweisungen, Bilder, Multimedia-Anwendungen oder Skripte handelt. Erst wenn alle Informationen vorhanden und verarbeitet sind, kann der Browser die Seite richtig darstellen. CSS Formatanweisungen einzusetzen liegt also auf der Hand, möchte man die Ressourcen klug nutzen und den Quelltext nicht unnötig aufblähen. Je weniger unnötige Informationen verarbeitet werden müssen, umso mehr Ressourcen stehen für die eigentlichen Inhalte einer Website zur Verfügung.

Im Webdesign kommt der Formatierung der Seiten Inhalte (Bilder und Texte) dabei eine besondere Bedeutung zu, welche viele Webmaster mit ihren "Wysiwyg-Editoren" leider schlicht ignorieren. Anstelle von CSS Formatierungen werden, sei es aus Unkenntnis oder Gewohnheit, die Quell-Codes mit sogenannten Spaghetti-Elementen aufgebläht, nicht selten um ein vielfaches. Damit machen sie jegliche Optimierung des Webdesigners wieder zunichte.

Was macht CSS mit dem Text?

Die kurze Antwort wäre: Alles was Sie wollen, nur einfacher und schneller.

Sie verwenden Überschriften der Auszeichnung „h1 - h6“ und geben dazu die jeweilige Schriftart, Schriftfarbe, Schriftgröße, den Schriftstil usw. an. Dies tun Sie natürlich auch für Fließtext, Absätze, Fett-Schrift, Kursiv-Schrift, geordnete- und ungeordnete Listen, Links und bei der Ausrichtung und dem Abstand von Elementen zueinander, wie beispielsweise für Bilder, Absätze und Container. Ohne CSS Formatierung müssen Sie diese Angaben immer und immer wieder machen, für jedes der einzelnen Elemente.

Mit CSS legen Sie solche Formatanweisungen nur ein einziges Mal fest und müssen dem Browser dann nur noch mitteilen, was davon, er wo anwenden soll.

Praxis-Beispiel CSS:

Sie wollen Ihre News hervorheben, diese sollen auf jeder Seite dunkelrot, fett, zentriert, in Schriftgröße 1.1em und mit einem Abstand nach oben und unten von 1.5em versehen werden. Dazu noch in Kapitälchen und der Schriftart Georgia angezeigt werden, zusätzlich - als Alternative bieten Sie Arial und sans-serif an. Mit ein Paar CSS Formatanweisungen ist das ganz schnell und Seitenübergreifend erledigt. Dazu erstellen wir mal hier die Klasse "new":

 
.new { 
color: #600;
font-family: Georgia,Arial,sans-serif;
font-size: 1.1em;
font-weight: bold;
font-variant: small-caps;
text-align: center;
margin: 1.5em 0;
}
 

Fortan brauchen wir nur noch dem gewünschten Text (hier ein Absatz) die Klasse "new" zuweisen und das geht so:

 <p class="new">Hier kommt Ihr News-Text...</p>
 

Und schon wird der Text wie von Geisterhand, entsprechend unserer Angaben formatiert. Nie wieder müssen Sie umständlich und zeitraubend dafür eine Farbe, Schriftart, Abstand oder sonst was auswählen oder festlegen, kein Spaghetti-Code - (class="new") übernimmt das für Sie.

Hier kommt Ihr News-Text, mit CSS formatiert
und vielen nützlichen Informationen.

CSS ist Pflichtprogramm für Webdesigner

CSS, sollte und wird in gutem Webdesign für alle Elemente einer Website verwendet. Das spart Arbeitszeit und Quell-Code, die Seite wird schneller geladen und entspricht auch der Forderung nach einer Trennung von Inhalt und Design, wie von W3C vorgesehen. Wenn Sie sich näher damit beschäftigen wollen, empfehle ich ihnen die CSS-Referenz von W3Schools, den Link dazu finden Sie auf der Startseite - unter Empfehlungen. Und unter diesem Link - CSS-Validator - können Sie Ihre Cascading Style Sheets auf Fehler überprüfen.

Wie bei allen Dingen sollte man aber Aufwand und Nutzen immer im Verhältnis zueinander sehen, und sich nicht blind auf Analysen schlauer Seitenbewertungen stützen. Die Bewertungen oder Einstufungen bestimmter SEO-Dienste, was Spaghetti-Code ist und was nicht, kann man getrost als Unsinn bezeichnen. Was diese als Spaghetti-Elemente deklarieren, kann - in ganz bestimmten Fällen - durchaus auch mal sinnvoll sein. Beispielsweise, wenn dadurch viel an Quell-Code gespart wird oder wenn ein JavaScript mit einer CSS-Klasse nichts anfangen kann.

Was hätte man denn gewonnen, wenn man das Script umschreibt und eine zusätzliche CSS-Anweisung dazu, damit den Quell-Code aber mehr aufbläht als mit einem kleinen HTML-Tag? Nichts!

Wenn man z. B. nur einen einzigen Begriff, auf einer bestimmten Einzelseite formatieren will, wäre es unsinnig dafür extra eine CSS Klasse zu erstellen und mit Anweisungen zu füllen, da diese dann nie mehr gebraucht wird. Damit würde man mehr Code produzieren als mit einem kleinen Spaghetti-Schnipsel im Text.