CSS Tutorial

[+] | [-]

Teil 1

Es gibt drei gängige Methoden, CSS in ein XHTML-Dokument zu Integrieren:

1.: Einbindung per Style-Attribut
Die Einbindung per Style-Attribut wird von allen modernen Browsern unterstützt,
ist aber nicht sehr empfehlenswert.
Im Style-Attribut muss CSS-Code stehen, das Style-Attribut kann für fast alle
XHTML-Elemente angegeben werden.
Beispiel:
<p>Dies ist ein Absatz</p>
<p style="color: red;">Dies ist ein Absatz mit roter Schrift</p>

2.: Einbindung per Style-Element
Die Einbindung per Style-Element ist eine übersichtlichere Lösung der einbindung
per Style-Attribut, ist aber auch nicht die beste Lösung.
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testdokument</title>
    <style type="text/css">
      p {
	/* Dies ist ein CSS-Kommentar */
        text-align: center;
        color: green;
      }
    </style>
  </head>
  <body>
  <p>Dieser Text wird mittig und grün dargestellt.</p>
  </body>
</html>

3.: Eigenes Stylesheet und einbindung per Link-Element
Dies ist die beste Lösung, da so ein Stylesheet auch sehr leicht für mehrere
Seiten der Website übernommen werden kann, und das Layout viel besser
vom Inhalt getrennt werden kann. 
Beispiel:
<link rel="stylesheet" media="screen" href="name-der-css-datei.css" type="text/css" />





Der CSS-Code muss dann in der Datei name-der-css-datei.css stehen.