Zuerst geht es mal um Grundlegendes zu CSS = Cascading Style Sheets. Style Sheets sind vergleichbar mit einer Formatvorlage bei der Textverarbeitung. Man kann sich viel Arbeit ersparen, da eine Formatierung aus vielen Befehlen bestehen kann, die man mit wenig Aufwand festlegt. Dabei ist CSS weit leistungsfähiger als übliche HTML-Tags (= Befehle). CSS-Tags werden somit als Ergänzung von HTML verwendet. Ältere Browserversionen sind übrigens keine Gefahr, sie kümmern sich nicht um Cascading Style Sheets. Was lässt sich nun mit StyleSheets festlegen? a.. Schrift, Schriftgröße und Schriftfarbe b.. Textauszeichnungen (kursiv/ fett/ unterstrichen) c.. Textausrichtung (links/ rechts/ zentriert/ geblockt) d.. Wort- und Zeilenabstand e.. Formatierung der Hyperlinks (Farben/ Unterstreichung/ Hover) f.. Eingabefelder von Formularen lassen sich anpassen g.. Mauszeiger mit neuen Formen sind möglich h.. Rahmen können gestaltet werden i.. Hintergrundfarbe oder Hintergrundbild sind definierbar j.. Randabstände können festgelegt werden k.. Positionierungen - relativ und absolut - beliebiger Objekte. Hier mehrere Möglichkeiten, CSS-Befehle einzusetzen: 1. Direkt im Seiten-Quellcode, wo sich die Befehle dann nur an bestimmten Stellen einer Seite auswirken: <H4 style="color : green">Die Überschrift</H4><p style="color : gold">gesamter Text</p> 2. Größere Bereiche können mit dem <span>-Befehl (Spanne/Bereich) definiert werden: <span style="line-height : 150%">gesamter Text</span> 3. Die komplette HTML-Seite kann formatiert werden. Die CSS-Anweisungen sind dabei im Dateikopf (HEAD-Bereich) untergebracht: <html><head><title>Titel der Seite</title><style type="text/css"><!-- P { text-align : justify ; color : green; font-weight : bold; font-size : 125% ;}//--></style></head><body> </body></html> 4. Die Formatvorlagen können in eine externe Datei auslagert werden (style.css). So kann die Vorlage auf alle Seiten eines Webprojektes wirken. Änderungen lassen sich rasend schnell für alle Seiten des Projektes durchführen. Die externe Datei wird im Textformat gespeichert und enthält die Style-Anweisungen im Klartext. Damit die Anweisungen wirken, muss jede HTML-Seite des Projektes das Style Sheet auch laden können. Dies erreicht man mit einer Befehlszeile im Dateikopf (HEAD): <link rel="stylesheet" href="style.css" type="text/css">
