3.2 Einbinden von CSS-Regeln

Es gibt verschiedene Wege CSS-Regeln in ein HTML-Dokument einzubinden.

  • Variante 1

    Die CSS-Regel wird direkt im style-Attribut des entsprechenden HTML-Elements eingetragen.

    HTML
    <body style="background-color: #DDF9CC; font-family: Arial, sans-serif;">
        ...
    </body>
    Abb. 3-3: Startseite index.html (Variante 1)

    Diese Variante bietet sich an, wenn die CSS-Regel nur für dieses eine Element gelten soll.

  • Variante 2

    Im head-Element wird ein style-Element eingefügt, das die CSS-Regeln enthält.

    HTML
    <head>
        <style>
            body {
                background-color: #DDF9CC;
                font-family: Arial, sans-serif;
            }

            ...
        </style>
    </head>
    Abb. 3-4: Startseite index.html (Variante 2)

    Diese Variante bietet sich an, wenn durch den Selektor der CSS-Regel mehrere Elemente im HTML-Dokument ausgewählt und entsprechend formatiert werden sollen. Die CSS-Regel muss so in dem HTML-Dokument nur einmal hinterlegt werden und nicht bei jedem betroffenem Element.

  • Variante 3

    Im head-Element wird ein link-Element eingefügt, das auf eine externe CSS-Datei verweist, die die CSS-Regeln enthält.

    HTML
    <head>
        ...
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    Abb. 3-5: Startseite index.html (Variante 3)

    Die CSS-Regeln werden in eine externe CSS-Datei ausgelagert.

    CSS
    body {
        background-color: #DDF9CC;
        font-family: Arial, sans-serif;
    }

    ...
    Abb. 3-6: CSS-Datei style.css (Variante 3)

    Diese Variante bietet sich an, wenn der Webauftritt aus mehreren Webseiten besteht und die CSS-Regel nicht nur für Elemente in einer bestimmten Webseite gelten soll. Die CSS-Regel muss so nur einmal in der ausgelagerten CSS-Datei hinterlegt werden und nicht in jedem betroffenem HTML-Dokument.