Die CSS-Integration
CSS ist die Anweisung an den Browser wie dieser die Webseite oder einzelne Dateien darstellen soll.
Es gibt 3 Möglichkeiten CSS in die eigene Webseite zu integrieren, welche wir Dir in diesem Beitrag aufzeigen möchten:
- als externe und seperat gehaltene CSS-Datei verknüpft mit der HTML-Datei.
- direkt im HTML-Dateikopf (head).
- innerhalb des HTML-Körpers (body).
- Um das Design für eine Webseite zu vereinfachen wird eine "main.css" Datei mit einem beliebigen Texteditor erstellt (wir empfehlen den kostenlosen Notepad++ Editor).
Diese "main.css" enthält dann alle Styleangaben für eure Webseite und greift auf jeder Seite/Unterseite in der die "main.css" verknüpft wird.
Dies ist die Regel um eine einfache und saubere Nachbearbeitung eurer Webseite zu gewährleisten. Denn wenn ihr einmal die Überschrift der 1. Ordnung für alle Seiten ändern möchtet braucht ihr dies nur in der "main.css" tun und die Änderung findet wie oben bereits erwähnt auf allen weiteren Seiten automatisch statt.
!!!Wichtig!!!
In der Praxis sieht diese Datei dann so aus:
In dieser "main.css" Datei dürfen nur CSS-Definitionen stehen, kein HTML!
h1 {
font-family: sans-serif;
font-size: 30px;
font-style: normal;
font-weight: normal;
color: #000;
}
Das einbinden dieser CSS-Datei in HTML erfolgt dann über ein <link>Tag und sieht wie folgt aus:
<!doctype html>
<html lang= "de">
<head>
<meta charset= "utf-8>
<title> Deine erste Webseite </title>
<link href="/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Überschrift der 1. Ordnung in schwarz</h1>
</body>
</html>
Ihr habt auch die Möglichkeit verschiedene CSS-Dateien in eure Seite einzubinden, dies wäre zum Beispiel nützlich wenn Ihr die Seite für bestimmte Ausgabegeräte optimieren möchtet.
Dazu muss wie bereits oben beschrieben jede einzelne Datei per Link Tag in den HTML-head eingebunden werden mit einer zusätzlichen Anweisung für das Medium z.B.: media="screen".
Gehen wir davon aus Ihr möchtet eure Seite für den Druck optimieren, so benötigt Ihr noch eine eigene "druck.css" welche dann vom Browser im Fall des Seitendrucks an den Drucker weitergegeben wird.
Beispiel:
<!doctype html>
<html lang= "de">
<head>
<meta charset= "utf-8>
<title> Deine erste Webseite </title>
<link href="/main.css" rel="stylesheet" type="text/css" media="screen">
<link href="/main.css" rel="stylesheet" type="text/css" media="print">
</head>
<body>
<h1>Überschrift der 1. Ordnung in schwarz</h1>
</body>
</html>
Dabei sind folgende Angaben seit CSS2 möglich, werden aber nicht von jedemm Browser unterstüzt:
media="all" Standardwert, für alle Medien
media="print" zum Drucken
media="screen" für Bildschirme
media="speach" für Sprachsynthesizer
- Integration von CSS im head (Dateikopf) einer HTML Datei
Es ist möglich CSS-Angaben auch direkt in jeder einzelnen HTML-Datei zu schreiben. Dies geschieht dann mit dem Befehlt <style>..........</style>.
Beispiel:
<!doctype html>
<html lang= "de">
<head>
<meta charset= "utf-8>
<title> Deine erste Webseite </title>
<style type= "text/css">
h1 {
font-family: sans-serif;
font-size: 30px;
font-style: normal;
font-weight: normal;
color: #000;
}
</style>
</head>
<body>
<h1>Überschrift der 1. Ordnung in schwarz</h1>
</body>
</html>
- Die letze und wohl schlechteste Möglichkeit CSS in die Seite zu integrieren ist die, bei der die CSS-Anweisungen direkt mittels "style"Attribut im HTML-Körper (body) geschrieben werden.
Schlecht einfach aus einem Grund:
Denn das nachträgliche Bearbeiten einer Seite wird so zu einer endlosen Sucherei besonders für den, der die Seite nicht geschrieben hat! Also bitte nur in Notfällen und wenn es nicht anders geht einsetzen.
Beispiel:
<!doctype html>
<html lang= "de">
<head>
<meta charset= "utf-8>
<title> Deine erste Webseite </title>
</head>
<body>
<h1 style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 30px; font-style: normal; font-weight: normal; color: #000;">
Überschrift der 1. Ordnung in schwarz</h1>
</body>
</html>
