Im Laufe dieser Reihe wurde ja bereits mehrfach auf die Stylesheets hingewiesen. Diese Stylesheets ermöglichen die strikte Trennung von Layout und Design. HTML-Elemente sind dank CSS ausschließlich für die logische bzw. semantische Beschreibung des Web-Dokuments zuständig.
Erfahrungsgemäß ist es anfangs hilfreich, wenn man weiß, wie ein Stylesheet eigentlich aussieht. Seht euch dazu ein erstes Beispiel an.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Durch die gezeigte Syntax werden zwei Dinge festgelegt:
• Es wird die Schriftfamilie bestimmt.
• Die Schriftgröße wird definiert.
An dieser Stelle soll es zunächst ganz allgemein um die verwendete Syntax gehen. Jede CSS-Anweisung besteht grundsätzlich aus zwei Teilen – einem Selektor und der CSS-Deklaration. Über den Selektor legt man das Element fest, das formatiert werden soll. Wie diese Formatierung letztendlich aussieht, bestimmt die CSS-Deklaration. Der Selektor steht dabei immer links, die CSS-Deklaration rechts in geschweiften Klammern.
Die eigentliche CSS-Deklaration setzt sich wiederum aus zwei Elementen zusammen, nämlich der Eigenschaft und dem Wert. Getrennt werden Eigenschaft und Wert durch einen Doppelpunkt. Hinter dem Wert folgt ein Semikolon.
Selektor {
Eigenschaft: Wert;
}
Stylesheets einbinden
Es gibt ganz unterschiedliche Möglichkeiten, Stylesheets in Webseiten einzubinden. Zunächst einmal könnt ihr Stilanweisungen direkt einem HTML-Tag zuweisen. Ein Beispiel:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
In diesem Beispiel wird die Überschrift in blauer Farbe angezeigt.
Ihr könnt einem HTML-Tag auch gleich mehrere Stilanweisungen hinzufügen.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Notiert diese dann einfach hintereinander, jeweils durch ein Semikolon voneinander getrennt.
Prinzipiell sind diese sogenannten Inline-Styles nur sinnvoll, wenn einzelne Bereiche innerhalb einer Seite individuell formatiert werden sollen. Normalerweise solltet ihr diese Art der direkten Formatierung allerdings vermeiden, da der HTML-Code dadurch zu unübersichtlich wird.
Zentrale Definition im head-Bereich
Ihr könnt innerhalb des Kopfbereichs der HTML-Datei ein zentrales Stylesheet definieren. Darin werden alle Stile definiert, die für diese Datei gelten sollen.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Eine solche Definition hat im Gegensatz zur Inline-Variante natürlich auch noch den Vorteil, dass sich Änderungen sehr schnell durchführen lassen.
CSS-Anweisungen auslagern
Die sicherlich praktischste Variante der CSS-Definition ist die Auslagerung der Stile in eine externe Datei. Dadurch können beliebig viele HTML-Dateien auf dieselbe CSS-Datei zugreifen. Somit wird eine einheitliche Formatierung aller zum Web-Projekt gehörenden Dateien ganz einfach möglich. Spätere Änderungen, die sich auf alle Seiten auswirken sollen, lassen sich dadurch unproblematisch realisieren.
<link rel="stylesheet" type="text/css" href="css/styles.css">
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternativ zur gezeigten link-Variante lassen sich Stylesheets auch importieren. Auch hier befinden sich die CSS-Anweisungen in einer externen Datei. Verwendet wird dafür die folgende Syntax:
<style type="text/css">
@import url("css/styles.css");
</style>
Medienspezifische Stylesheets
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
<style type="text/css">
@media screen, projection {
/* Formate für Bildschirm */
}
@media print {
/* Formate für den Druck */
}
</style>
