Navigation überspringen

Einbindung in html

Dezentrale Einbettung

CSS kann dezentral mittels html-tag im head-Bereich eingebunden werden:

<!DOCTYPE html>
<html>
    <head>
        <title>css</title>
        <style>
            body{
                background-color: #FF0000;
            }
        </style>
    </head>
    <body>
        Hello World!
    </body>
</html>

Zentrale Einbindung

CSS kann zentral als Datei eingebunden werden. Dafür wird im head-Bereich eine link-Information erzeugt.

Hinweis:

Die Pfadangabe in href="..." sollte in relativer Adressierung erfolgen, damit das Web-Projekt möglichst flexible verschoben werden kann.

Im folgenden Beispiel befindet sich die style.css in einem Ordner höher "styleOrdner":

index.php

<!DOCTYPE html>
<html>
    <head>
        <title>css</title>
        <link rel="stylesheet" type="text/css" href="./styleOrdner/style.css"
    </head>
    <body>
        Hello World!
    </body>
</html>

style.css

p{
    font-family: serif;
    font-size: 12pt;
    padding: 5px 12px 4px 25px;
}

Erläuterung:

Innerhalb der style.css wird der html-Bereich p (paragraph) mit den folgenden Attributen manipuliert:

  • font-family:serif; = das bedeutet, dass der Browser seine default-Schriftart für serif-Schrift wählen soll.
  • font-size:12pt; die ausgewählte Schriftart soll in der Größe 12 Punkt dargestellt werden
  • der paragraph-Bereich soll folgende Innenabstände haben:
    • oben: 5px
    • rechts: 12px
    • unten: 4px
    • links: 25px
    • Alternative Schreibweise: padding-top:5px; padding-right:12px; ...