Beispiel 1 : CSS in der Praxis - Einführung

Mit CSS zu arbeiten, ist eigentlich eine sehr gute Methode, um auch zu einem späteren Zeitpunkt Werte global zu verändern, ohne den gesamten Code durchsuchen zu müssen. CSS vereinfacht das Gestalten auch von großen Websites und ist losgelöst vom Inhalt, daher kann sich zum Beispiel innerhalb eines Teams die eine Gruppe um den Content kümmern und die andere um das Design einer Homepage. Wenn es hier also um die Darstellung von Texten und die Formatierung geht, bietet sich auf jeden Fall CSS als starkes Werkzeug an. Natürlich gibt es auch Nachteile wie die unterschiedliche Browserdarstellung oder einige Beschränkungen bei der Programmierung – im Großen und Ganzen bieten sich aber mit CSS so vielfältige Möglichkeiten der Gestaltung, dass ein Blick darauf durchaus lohnt.
Das Wichtigste bei einer Website ist meistens der Text, hier sind neben dem Inhalt auch die gute Lesbarkeit und Kenntlichmachung von Überschriften, Hervorhebungen durch Fettdruck oder Unterstrich, Absätze und Gliederungen wie zum Beispiel eine Liste mit Punkten bzw. das Einbinden einer Grafik gute Merkmale. Die Seite soll interessant, gut lesbar und nicht so überladen wirken. So ist beim unten genannten Beispiel sportwettensystem.com alles einfach zu finden durch die Aufteilung innerhalb der Seite und die Verlinkungen zwischen den verschiedenen Systemen. Wenn man jetzt als Muster die 3 aus 6 Systemwette näher betrachtet, fallen die unterschiedlichen Textgrößen der Überschriften auf.

Das wird erreicht u.a. beispielsweise mit CSS und der Anweisung h1 in Eckklammern – zwischen <h1> und </h1> werden die unterschiedlichen Attribute zusammengefasst und zugeordnet. So kann unabhängig vom Inhalt in immer gleicher Weise eine Seite strukturiert werden mit denselben Werten und einem einheitlichen Bild auch auf weiterführenden Verlinkungen innerhalb eines ganzen Projekts. Die Überschriften helfen bei der Unterteilung des Inhalts und sollen eine Orientierung geben zur Relevanz des Textes darunter. Hat man bei der Überschrift mit „font-size“ die Größe oder auch mit „color“ die Farbe, geht man über zu dem eigentlichen Inhalt und arbeitet hier ebenfalls mit CSS. So sind auf https://sportwetten-system.com auch einige Textstellen mit Fettdruck versehen, die mit der Formatierung „font-weight“ verändert werden kann. Das Gleiche kann mit den Befehlen für kursive Schrift oder unterstrichene Wörter geschehen, indem man an den entsprechenden Stellen die Attribute für eine bestimmte Auswahl zuteilt. Im Beispiel der 3 aus 6 Systemwette wird mit unterschiedlichen Textgrößen und dem Hervorheben durch Fettschrift gearbeitet. So lenkt sich die Aufmerksamkeit des Lesers auf den Inhalt, die Überschriften treten durch die helle Farbe etwas zurück und untergliedern trotzdem die gesamte Seite im Thema. Die Farbe kann sowohl bei der Schrift an sich eine Rolle spielen als auch im Hintergrund, bezogen auf die gesamte Seite oder nur auf eine einzelne Zeile bzw. zum Zwecke der Hervorhebung ähnlich einem Marker. Hier wird „background-color“ verwendet, um Schrift und der Fläche dahinter einen angenehmen Einklang zu geben oder auch um auf anderen Unterseiten optisch eine andere Thematik zu beleuchten.

Auf der Beispielseite sportwettensystem.com erhalten die Tabellenköpfe einen anderen farblichen Hintergrund und der Text für die 3 aus 6 Systemwette wird durch farblich hervorgehobene Balken besser lesbar und übersichtlicher.
Hier kann man also gut erkennen, welche Auswirkungen eine CSS-basierte Website hat und wie man sie gestaltet. Die Website sportwettensystem.com beschäftigt sich allgemein mit den Themen Quoten, Buchmacher, Einzelwetten und eben Wettkombinationen in verschiedenen Konstellationen mit den entsprechenden Auswirkungen auf den Gewinn abhängig vom Einsatz. Hierzu werden die gängigsten Wettsysteme einzeln vorgestellt und dokumentiert, was im Allgemeinen zu beachten ist und welche Kosten pro Reihe und Gesamt entstehen. Denn neben der klassischen Einzelwette werden von den Buchmachern zahlreiche übliche, aber auch manchmal exotische Wettsysteme zur Auswahl gestellt. Damit vor der Abgabe das Risiko besser eingeschätzt werden kann, ob sich der Einsatz im Verhältnis zum Risiko und dem erwarteten Gewinn lohnt, stehen neben den Tippreihen die Gesamtquote und im Kontext ergibt sich ein Zusammenhang zu den Spielen. Wenn sich eine Website wie sportwettensystem.com mit den einzelnen Wettarten beschäftigt, dann sollte sie strukturiert und aufeinander aufbauend angelegt sein. So ist gewährleistet, dass sich sowohl Einsteiger mit wenig vorhandenem Wissen in diesem Bereich als auch Experten zum Zwecke des Nachschlagens und zur Fortbildung auf einer Homepage zum Thema Sportwetten wohlfühlen. Auf der Hauptseite und im linken Bereich sind unterteilt die Verlinkungen zu den diversen Wettarten oder Wettsystemen, die sich dann aufgerufen komplett mit Erklärung und Beispiel entfalten können. Dazu ist es wichtig, dass alles schnell gefunden werden kann und man in der Beschreibung ein Muster zur Orientierung mit existierenden Vereinen und Quoten vorzufinden ist. So lässt es sich besser nachvollziehen und liest sich leichter für alle.

Für die bessere Übersicht empfiehlt es sich mit nicht zu aufdringlichen Textformatierungen zu arbeiten, also sicherlich kann die Schrift in fett gedruckt werden bzw. unterstrichen oder in kursiv. Auch Überschriften und Unterthemen setzen sich gut mit einer anderen Größe oder einer Schattierung ab, vermieden wurde hier bei sportwettensystem.com bewusst auf Veränderungen in Schriftart und bunte Farben. Mit hellem Hintergrund liest es sich auch besser und die Seite ist bewusst auch so aufgebaut, dass sie sich leicht navigieren lässt und ein insgesamt guter Gesamteindruck hängenbleibt.