CSS auf HTML-Seite anwenden
Anwendung von CSS auf HTML-Seiten
Hier werden drei Arten der Anwendung von CSS-Anweisungen beschrieben:
1. Externe CSS-Datei wird im Head der Webseite einbunden
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
Vorteil: Alle Seiten eines Webprojekts, die eine bestimmte CSS-Datei einbinden haben das gleiche Design. Alles kann an einer Stelle zentral geändert werden.
2. Mit dem <style>-Tag werden die Anweisungen im Head für Webseite direkt gemacht
<html>
<head>
<style type="text/css">
h4 { background: silver; }
</style>
</head>
<body>
...
Vorteil: Die Anweisungen gelten für alle Tags nur in dieser HTML-Datei.
3. Mit dem style-Attribut werden die Anweisungen direkt für ein HTML-Tag gemacht
<h4 style="background: silver">Inline-CSS</h4>
Vorteil: Die CSS-Anweisungen gelten nur für dieses eine Tag.
CSS-Anweisungen können überschrieben werden
Folgende CSS-Datei index.css wird editiert
/* Diese CSS-Datei wird eingebunden */
h1, h2, h3 {
color: red;
}
und in der HTML-Datei index.htm eingebunden:
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />
<style>
h2, h3 {
color: green;
}
</style>
</head>
<body>
<h1>Hauptüberschrift</h1>
<h2 style="color: blue;">Überschrift</h2>
<h3>Unterüberschrift</h3>
</body>
</html>
Ausgeben wird vom Browser:
Erläuterung:
<h1>, <h2> und <h3> werden durch die CSS-Datei rot eingefärbt. Dann werden durch das <style>-Tag im Head der HTML-Datei die color-Anweisung von <h1> und <h2> überschrieben und auf grün gesetzt. Die Schriftfarbe von <h2> wird durch das style-Attribut direkt im HTML-Element ein zweites mal überschrieben und so letztendlich blau dargestellt.