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.
Im
• eine Überschrift
• ein Textabsatz
Über CSS werden diese beiden Elemente formatiert. Dazu wird im
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.
In diesem Beispiel wird die Überschrift in blauer Farbe angezeigt.
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.
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
Eine solche Definition hat im Gegensatz zur Inline-Variante natürlich auch noch den Vorteil, dass sich Änderungen sehr schnell durchführen lassen.
Im Dateikopf der HTML-Datei wird das
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.
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:
Innerhalb der Klammern gibt man den Pfad zur zu importierenden CSS-Datei an. Bei
Stellt sich natürlich die Frage, ob man nun
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
•
•
•
•
•
•
•
•
•
•
Neben der gezeigten HTML-Syntax über das link-Element gibt auch noch spezielle CSS-Varianten. Dabei wird
Innerhalb des
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 dasmedia
-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. Weitere Teile
- Tutorial: HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.
- Tutorial: HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute
- Tutorial: HTML & CSS für Einsteiger (Teil 04): Texte strukturieren
- Tutorial: HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen
- Tutorial: HTML & CSS für Einsteiger (Teil 06): Listen
- Tutorial: HTML & CSS für Einsteiger (Teil 07): Tabellen (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 08): Tabellen (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 13): Formulare (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 14): Formulare (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 15): Formulare (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 16): Formulare (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 17): Formulare (5)
- Tutorial: HTML & CSS für Einsteiger (Teil 18): Semantik fürs Web (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 19): Semantik fürs Web (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 24): iFrames
- HTML & CSS für Einsteiger (Teil 25): Das ist CSS
- Tutorial: HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 28): So klappt der Zugriff mit den Selektoren (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 31): Farben und Hintergründe
- Tutorial: HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder
- Tutorial: HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren
- Tutorial: HTML & CSS für Einsteiger (Teil 34): Rahmen
- Tutorial: HTML & CSS für Einsteiger (Teil 35): Listen und Counter
- Tutorial: HTML & CSS für Einsteiger (Teil 36): Das Boxmodell
- Tutorial: HTML & CSS für Einsteiger (Teil 37): Elemente positionieren
- Tutorial: HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float
- Tutorial: HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten
- Tutorial: HTML & CSS für Einsteiger (Teil 40): Zwei- und dreispaltige Layouts
- Tutorial: HTML & CSS für Einsteiger (Teil 41): Das Layout entwickeln
- Tutorial: HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen
- Tutorial: HTML & CSS für Einsteiger (Teil 43): Das Grundgerüst erstellen
- Tutorial: HTML & CSS für Einsteiger (Teil 44): Den Inhaltsbereich gestalten
- Tutorial: HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 46): Das Kontaktformular (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

Passend zum Inhalt empfehlen wir:
Grundlagen-Tutorial HTML, CSS und JavaScript
Hat mir sehr viel gebracht das Tut! :)
Vielen Dank für das Video!
LG Zaina
Super! Vielen herzlichen Dank :)
vielen Dank
MfG
VIelen Dank für das Tutorial.
Ein weiteres gutes Tutorial - Danke
Vielen Dank für den nächsten Teil.
Vielen Dank für den 25. Teil.
Herzlichen Dank für das Tutorial.
Vielen Dank für die. Verschriftlichung!
Schade das du bei font-size nur auf Prozent angehst und nicht auch noch auf px, rem, em
Danke sehr, wieder mal sehr interessant.
Wieder sehr interessant. Vielen Dank.
Vielen Dank für das interessante Video.
Vielen Dank für das Video.
Herzlichen Dank für das Video.