Heute möchte ich Ihnen ein übersichtliches und nicht zu kompliziertes Einführungsbeispiel zu CSS geben, mit dem jeder seinen Text auf einfache Weise entsprechend formatieren kann. Ich werde versuchen, die einzelnen Teile bestmöglich zu erläutern, so daß dann jeder Leser selbst einmal sein Glück probieren und hoffentlich auch finden kann. Hier nun erst einmal das Beispiel, welches im Bereich zwischen <HEAD> und </HEAD> eingebaut wird: <style media="screen" type="text/css"><!-- a { color: darkblue; font-weight: bold; font-size: 12pt; font-family: Verdana, Helvetica, Arial; text-decoration: none } a:hover { color: red; font-weight: bold; font-size: 12pt; font-family: Verdana, Helvetica, Arial; text-decoration: none; cursor : auto; background:yellow} p { color: black; font-weight: regular; font-size: 12pt; font-family: Verdana, Helvetica, Arial; text-decoration: none } TD { color: black; font-weight: regular; font-size: 12pt; font-family: Verdana, Helvetica, Arial; text-decoration: none; } TH { color: white; font-weight: bold; font-size: 20pt; font-family: Verdana, Helvetica, Arial; text-decoration: none } H4 { color: #FFFFFF; font-weight: bold; font-size: 24pt; font-family: Verdana, Helvetica, Arial; text-decoration: none } font { color: darkgreen; font-weight: bold; font-size: 16pt; font-family: Verdana, Helvetica, Arial; text-decoration: none; } --></style> So: dieses bespielhafte CSS formatiert folgende Dinge: a ---> Link a:hover ---> Link beim Überfahren p ---> Abschnitte td ---> table-data (Tabellenfeld) th ---> table-head (Tabellenüberschrift) h4 ---> Überschrift font ---> Schrift. Somit lässt sich nahezu jede Webseite respektive deren Elemente bestens formatieren, ohne dass jetzt übermäßig viele Befehle notwendig wären. Die Schreibweise sehen Sie oben: die geschweiften Klammern beinhalten alles Details zu einem Element, die Attribute werden mit einem Doppelpunkt beendet, dann kommt jeweils die Ausgestaltung, abgegrenzt werden die Attribute mit dem Semikolon (Strichpunkt). - color (Farbe) als englische Bezeichnung oder RGB-Wert mit # (#000000 = schwarz) - font-weight (Schriftstärke) als regular (normal) oder bold (fett) - font-size (Schriftgröße) üblich in pt (Punkt) oder px (Pixel) - font-family (Schriftarten) mit Komma getrennt. Hier sollten die üblichen Schriften verwendet werden, die auf wohl jedem PC vorhanden sind. Zuerst steht die primär anzuzeigende Schrift, sollte diese nicht vorhanden sein (auf dem Zielrechner), so geht es in der definierten Reihenfolge weiter. - text-decoration (Zusätze) kann beispielsweise sein: underline (Unterstrich), overline (Überstrich), none (keine Dekoration) - cursor legt die Form des Cursors fest: auto (Hand), crosshair (Fadenkreuz) und weitere (werde ich später auch mal bringen) - background (Hintergrund) definiert farbig hinterlegte Schrift oder Teile: englisches Wort oder RGB-Wert mit # Es gibt natürlich noch weitere Details. Zu einem späteren Zeitpunkt werde ich einmal versuchen, hierzu die wichtigsten Daten aufzuzählen - also bitte ein wenig Geduld haben. Am besten, einfach mal ein/zwei Testseiten erstellen und mit den einzelnen Elementen und Attributen etwas spielen. Dann jeweils das Ergebnis betrachten und letztendlich in die eigene Gestaltung übernehmen. Sie werden viel Arbeit sparen, immer einzelne Bereiche separat zu formatieren, denn so ist bereits im Seitenkopf alles (nahezu alles) bestens und übersichtlich formatiert.
