CSS (Cascading Style Sheets) in HTML einbinden

Es gibt mehrere Möglichkeiten - zum Erlernen sind die ersten 2 Verfahren geschickt. Dort sind die CSS-Anweisungen direkt in der HTML-Datei eingebunden. Für die Entwicklung von Websites empfiehlt sich dann die 3. Variante. Dort werden die CSS-Anweisungen in einer externen Datei hinterlegt und diese Datei wird dann in jede HTML-Seite eingebunden.

Variante 1: Befehl direkt im Quellcode

Direkt im Quellcode wirkt der Befehl nur an dieser bestimmten Stelle der Seite, so dass man abweichende Designs verwenden kann.

Beispiel:

<h1 style="letter-spacing:30px;">Überschrift</h1>

Alle Buchstaben bis zum Ende von </h1> werden jeweils mit einem Abstand von 30 zwischen den Buchstaben dargestellt.

Natürlich können die Befehle auch kombiniert werden.

Zusätzlich zur Buchstabenbreite kommt jetzt noch eine andere Farbe hinzu:

<h1 style="letter-spacing:30px; color:red;">Überschrift</h1>

Hier ist natürlich die Frage berechtigt, warum nicht gleich mit den gewohnten HTML Befehlen? Die Logik der Sache wird klar, wenn man diese Formatdefinitionen auslagert (siehe Variante 3 unten). Dadurch kann dann z. B. eine Einstellung erstellt werden, die dann für alle <h1> gelten, ohne dass speziell noch in den HTML-TAG eingegriffen werden muss.

Variante 2: Am Anfang der HTML-Datei

Im Kopfbereich der HTML-Datei werden die CSS-Eigenschaften definiert. Diese wirken dann auf das ganze HTML-Dokument.

<head>
<style type="text/css">
<!--
h1 {
    color:red;
    letter-spacing:30px;
} 
-->
</style>  

</head>  
<body> 

<h1>jetzt HTML lernen mit CSS</h1>
</body>

Variante 3: Auslagern von CSS-Befehlen

Zum Auslagern werden 2 Dinge benötigt. Als erstes eine neue Datei, ich nenne diese design.css (kann aber auch beliebig anders heißen) und als zweites einen Verweis darauf in der HTML-Datei, die diese ausgelagerte Datei nutzen soll.

Verweis in der HTML-Datei:
Dieser Verweis sollte im head-Bereich eingegeben werden.

<link href="design.css" type="text/css" rel="stylesheet" />

So, nun erstellen wir eine neue Datei mit dem Namen "design.css".

Inhalt:

h1 {
    color:red;
    letter-spacing:30px;
 }

Unbedingt auf Leerzeichen achten, und als Klammern kommen hier die geschweiften zum Zuge!! So, Datei abspeichern und im HTML Editor zurück zur ursprünglichen Internetseite.

vorheriges Kapitel: Aufbau CSS Befehle
nächstes Kapitel: CSS einsetzen
Aufbau CSS BefehleSeitenanfangCSS einsetzen
eBook HTML-Seminar.de
del.icio.usMister Wong         Aufbau CSS BefehleSeitenanfangCSS einsetzen
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 20.1.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de