Die folgenden CSS Grundlagen helfen Euch anhand von Beispielen die CSS Definition und Formatierungen zu verstehen. Damit bekommt Ihr einen ersten Einblick in Webdesign und Layout mit CSS.
CSS bedeutet ausgeschrieben Cascading Style Sheets und ist eine Gestaltungs- und Formatierungssprache vor allem für Internetseiten und ist Standard bei heutigem Webdesign und Layout. Mit Hilfe von CSS können nicht nur einfache Texte und Inhalte einer Webseite dargestellz und formatiert werden, sondern auch interaktive Elemente wie Navigationen aufgebaut werden.
CSS wird von allen gängigen Browsern unterstützt, allerdings mit Einschränken bei der Darstellung des Layouts. Daher ist es sehr zu empfehlen, mit CSS gestaltete Internetseiten auf den gängigen Browsern in unterschiedlichen Versionen zu testen. Nur so kann sichergestellt werden, dass das Design nirgendwo falsch dargestellt ist.
Internetseiten werden mit Hilfe der Seitenbeschreibungssprache HTML geschrieben. Hierbei wird die Formatierung des Inhaltes einer Seite in sogenannten HTML Tags definiert. In der Regel besitzen diese ein einleitendes und ein abschließendes Tag. Tags werden durch spitze Klammern notiert.
Mit Hilfe von CSS können die in HTML vorgegeben Formatierungen geändert und erweitert werden. Hierzu kann die CSS Formatierungen für die HTML Tags direkt innerhalb der HTML Datei festgelegt werden. Alle Elemente der HTML Seite, die von den definierten Tags umschlossen sind, werden gemäß der CSS Formatierung dargestellt.
Der elegantere und sinnvollere Weg beim Webdesign ist die CSS Formatierung in einer externen Datei zu definieren und diese Datei (also das eigentlich Layout) bei den entsprechenden HTML Seiten einzubinden. Dies hat den Vorteil, dass das Design, das Layout und alle Formatierungen nur einmal definiert werden mÜssen und Überall wiederverwendet werden können. In der Regel werden derartige externe CSS Dateien mit der Endung .css gespeichert.
Alle Elemente der HTML Seite innerhalb der entsprechenden TAGs werden nun gemäß der CSS Formatierung in der externen Datei dargestellt.
In CSS ist es möglich, gleiche Formatierungen für mehrere Tags in einer Angabe zu definieren. Im folgenden Beispiel werden alle Überschriften schwarz umrahmt und zentriert dargestellt. Dennoch ist es auch noch möglich bestimmte Eigenschaften für einzelne Tags seperat festzulegen, in unserem Beispiel die Farbe.
CSS bietet die Möglichkeit Elemente eines Tags, das bestimmte Eigenschaften hat, gesondert zu formatieren (Fachausdruck: Contextual Selectors). Im folgenden Beispiel sollen alle kursiven Teile einer h1 blau dargestellt werden.
Hinweis: Dies gilt neben i für kursiv für alle weiteren HTML Definitionen wie z.B. b, u,...