Es gibt drei Möglichkeiten, css in die html-Seite einzubinden
- style im <head> – Bereich
- style bei jedem Element
- externes css-File.
Bei den verschiedenen Formatierungsbefehlen gibt es keinen Unterschied, jedoch die Implementierung ist unterschiedlich!
1. Will man Elemente der Seite mittels css formatieren, kann man diese im head-Bereich einfügen, z.B. so:
<meta name="description" content="Free Web tutorial">
<meta name="keywords" content="HTML,CSS,">
<meta name="author" content="Stefan Jeschek">
<meta charset="UTF-8">
<title>html & css Vokabelheft</title>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
width: 900px;
margin: 10px auto;
padding: 0px;
border: 1px solid #999;
border-radius: 8px;
}
</style>
</head>
2. Man kann die Formatierung auch bei jedem Element direkt eingeben mittels style, das muss man dann aber bei jedem Element machen, eine sehr aufwendige Möglichkeit, z.B. so:
<head>
<meta name="description" content="Free Web tutorial">
<meta name="keywords" content="HTML,CSS,">
<meta name="author" content="Stefan Jeschek">
<meta charset="UTF-8">
<title>html & css Vokabelheft</title>
</head>
<body style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; width: 900px;
margin:10px auto; padding: 0px; border: 1px solid #999; border-radius: 8px;">
</body>
3. Die eleganteste und schnellste Möglichkeit ist das Erstellen eines externen Stylesheets - css-Datei -, in der die Formatierungen aufgelistet sind. Diese muss mit den entsprechenden html-Seiten verlinkt werden, z.B. so:
<head>
<meta name="description" content="Free Web tutorial">
<meta name="keywords" content="HTML,CSS,">
<meta name="author" content="Stefan Jeschek">
<meta charset="UTF-8">
<title>html & css Vokabelheft</title>
<link href="/vokabel.css" rel="stylesheet" type="text/css" />
</head>