Möglichkeiten der Einbindung

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:

 

<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>
<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>