Tutorial HTML & CSS für Einsteiger (Teil 25): Das ist CSS

HTML & CSS für Einsteiger (Teil 25): Das ist CSS

HTML ist für die Strukturierung der Inhalte da. Sobald es ans Designen der Seite geht, kommen die Cascading Stylesheets (CSS) ins Spiel. Denn erst die Kombination aus CSS und HTML ermöglicht es, aus einer schnöden HTML-Struktur ansprechende Webseiten zu machen. Grund genug also, einen genaueren Blick auf CSS zu werfen.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!

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>

Im Browser sieht das Dokument so aus:

Im body-Bereich der HTML-Datei wurden zwei Elemente definiert:

• eine Überschrift
• ein Textabsatz

Über CSS werden diese beiden Elemente formatiert. Dazu wird im head-Bereich ein Stylesheet-Bereich mittels style definiert. Innerhalb dieses Bereichs erfolgt die Formatierung der Elemente.

Hier noch einmal die Definition für die Überschrift h1:

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>

Der Vorteil dieser Variante: Im Gegensatz zu der Inline-Variante können die definierten Formate mehrfach im Dokument verwendet werden. Im vorherigen Beispiel wurde die CSS-Klasse text definiert. (Ausführliche Informationen zu den Selektoren wie der hier verwendeten Klasse folgen dann im nächsten Tutorial). Diese Klasse kann man nun beliebig oft im Dokument einsetzen.

<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">

Im Dateikopf der HTML-Datei wird das link-Element definiert. Innerhalb von link gibt man zunächst die Attribut-Wert-Kombination rel="stylesheet" an. Danach folgt type="text/css". Dem href-Attribut weist man die betreffende CSS-Datei zu. Achtet hier – ähnlich wie das beim Einbinden von Bildern der Fall ist – auf die richtige Pfadangabe. Im aktuellen Beispiel gehe ich davon aus, dass sich die CSS-Datei styles.css im Verzeichnis css befindet, das wiederum auf derselben Ebene wie die eigentliche HTML-Datei liegt.

Bei der referenzierten CSS-Datei handelt es sich um eine normale Textdatei, die das Suffix css hat. In der externen CSS-Datei werden die entsprechenden CSS-Anweisungen definiert.

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>

Innerhalb der Klammern gibt man den Pfad zur zu importierenden CSS-Datei an. Bei @import handelt es sich übrigens um CSS-Syntax. Daher kann die @import-Anweisung auch innerhalb von CSS-Dateien verwendet werden. Dadurch wird es möglich, aus einem Stylesheet heraus andere Stylesheets aufzurufen, was eine bessere Ordnung der Stylesheets ermöglicht.

Stellt sich natürlich die Frage, ob man nun link oder @import verwenden sollte. Prinzipiell bevorzuge ich link, da diese Variante einfach schneller, die Performance der Seite also besser ist.

Medienspezifische Stylesheets

Man kann Stylesheets für ganz unterschiedliche Medien wie beispielsweise Drucker oder den Bildschirm definieren. Verwendet wird dafür das media-Attribut. Dabei kann man ein Stylesheet auch mehreren durch Kommata getrennten Medien zuweisen.

<link rel="stylesheet" media="screen" href="css/styles.css">
<link rel="stylesheet" media="print " href="css/druck.css">

In diesem Fall wurden zwei Stylesheets aufgerufen, eines für den Bildschirm, das andere für den Fall, dass die Seite gedruckt wird. Die CSS-Datei druck.css wird also dann geladen, wenn die Druckfunktion des Browsers aufgerufen wird. Insgesamt stehen die folgenden media-Werte zur Verfügung:

• all – Gilt für alle Ausgabemedien.
• aural – Die CSS-Datei wird für Sprachausgabesystem verwendet.
• braille – Die CSS-Datei ist für Braille-Drucker mit taktilem Feedback gedacht, die die sogenannte „Blindenschrift“ erzeugen können.
• embossed – Hierdurch werden Braille-Seitendrucker angesprochen.
• handheld – Für Handheld-Geräte vorgesehen.
• print – Die CSS-Datei gilt für den Ausdruck auf Papier. Browser sollten automatisch auf diese Datei zurückgreifen, wenn die Druckfunktion aufgerufen wird.
• projection – Diese Variante ist für projizierte Präsentationen vorgesehen.
• screen – Für die Bildschirmanzeige gedacht.
• tty – Die CSS-Datei gilt für Medien, die ein festes Zeichenraster verwenden. Das können beispielsweise Fernschreiber und Terminals sein.
• tv – Hierüber werden TV-ähnliche Geräte angesprochen. Dabei wird davon ausgegangen, dass die Geräte eine geringe Auflösung haben und nur begrenzt scrollbar sind.

Neben der gezeigten HTML-Syntax über das link-Element gibt auch noch spezielle CSS-Varianten. Dabei wird @import oder @media verwendet.

<style type="text/css">
   @media screen, projection {
     /* Formate für Bildschirm */
   }
   @media print {
     /* Formate für den Druck */
   }
</style>

Innerhalb des style-Elements definiert man über @media einen Bereich für Formatdefinitionen, die für ein bestimmtes Ausgabemedium gedacht sind. Dabei muss hinter @media, durch Leerzeichen getrennt, einer der bereits beschriebenen Medientypen angegeben werden. Mehrere Medientypen sind durch Kommata voneinander getrennt zu notieren.