Grundlagen
Die folgenden CSS Grundlagen helfen Euch anhand von Beispielen die CSS Definition und Formatierungen zu verstehen. Durch dieses Tutorial bekommt Ihr den 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 formatiert werden, sondern auch interaktive Elemente wie eine Navigation oder ein Menü aufgebaut werden. CSS wird von allen gängigen Browsern unterstützt, allerdings mit Einschränken bei der Darstellung des Layouts. Obwohl CSS Level 2 (CSS2) bereits 1998 vom W3C (World Wide Web Consortium) verabschiedet wurde, wird es teilweise von Firefox, Microsoft Internet Explorer oder Opera unterschiedlich interpretiert. Daher ist es sehr zu empfehlen, mit CSS festaltete Internetseiten auf den gängigen Browsern in unterschiedlichen Versionen zu testen. Nur so kann sichergestellt werden, dass das Design und Layout für alle Nutzer identisch ist.
Was ist ein Tag?
Der Ausgabe einer Internetseite ist in HTML geschrieben. Hierbei wird die Formatierung des Inhaltes einer Seite in sogenannten HTML Tags definiert, wobei hier in der Regel ein einleitendes und ein abschließendes Tag definiert sind. Tags werden durch spitze Klammern notiert.Beispiel - Defintion einer Überschrift durch ein Tag
<h1>Header - Überschrift</h1>
Formatierung eines Tags anpassen
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. Diese Definition im Header der HTML Datei erfolgen. Alle Elemente der HTML Seite, die von den definierten Tags umschlossen sind, werden gemäß der CSS Formatierung dargestellt.Beispiel - CSS Definition innerhalb der HTML Definition
<head>
[...]
<style type="text/css">
h1 { border: 1px solid black; text-align: center; }
</style>
[...]
</head>
[...]
<style type="text/css">
h1 { border: 1px solid black; text-align: center; }
</style>
[...]
</head>
CSS Formatierung in einer externen Datei
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.
Beispiel - CSS Definition in einer externen Datei
h1 {
border: 1px solid black;
text-align: center;
}
Das Einbinden der CSS Datei, in diesem Beispiel styles.css, erfolgt innerhalb des head Bereichs.
border: 1px solid black;
text-align: center;
}
Beispiel - Einbinden einer externen CSS Definition
<head>
[...]
<link rel="STYLESHEET" type="text/CSS" href="styles.CSS">
[...]
</head>
Alle Elemente der HTML Seite innerhalb der entsprechenden TAGs werden nun gemäß der CSS Formatierung in der externen Datei dargestellt.
[...]
<link rel="STYLESHEET" type="text/CSS" href="styles.CSS">
[...]
</head>
Formatierung mehrere Tags
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.
Beispiel - Definition mehrerer Tags in CSS
h1, h2, h3, h4, h5, h6 {
border: 1px solid black;
text-align: center;
}
h1, h2 {
color: blue;
}
border: 1px solid black;
text-align: center;
}
h1, h2 {
color: blue;
}
Bestimmte Eigenschaften einzelner Tags definieren
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.
Beispiel - Definition in CSS
h1 i { color: blue; }
Hinweis: Dies ist neben i für kursiv für alle weiteren HTML Definitionen wie z.B. b, u,...
