Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


CSS-Einbau

Verknüpfen

Das Stylesheet «styles.css» wird im HTML-Head mit dem Element <link> verknüpft. Die gleiche Datei kann so für mehrere Dokumente bzw. alle Seiten einer Webite verwendet werden. Der Dateiname ist frei wählbar, darf aber wie üblich keine Sonder- und Leerzeichen enthalten.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <link href="styles.css" rel="stylesheet">
    <title>Seitentitel</title>
</head>
<body>

</body>
</html>

Direkt im HTML-Head notieren

Die CSS-Eigenschaften können mit dem HTML-Element <stlye> direkt innerhalb des Heads angegeben werden, gelten dann aber nur für die jeweilige Seite. Diese Methode ist wirklich nur dann sinnvoll, wenn es sich um ein einseitiges und sehr simpel gestaltetes Projekt handelt. Ich empfehle grundsätzlich das CSS wie oben ausuzlagern. Ausnahmen gibts immer: Tumblr-Templates beispielsweise enthalten ihre Styles auf diese Art.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8" />
    <title>Seitentitel</title>
    <style type="text/css">
        body { background-color:red; margin:0px; }
        p    { font-weight:bold; } 
    </style>
</head>
<body>

</body>
</html>

Per Style-Attribut

Für kleinere Angaben oder Abweichungen zum Stylesheet kann es sinnvoll sein, CSS-Angaben direkt im Style-Attribut des HTML-Elements zu setzen. Aber aufgepasst: Die CSS-Angaben im Style-Attribut sind immer stärker, als die im externen Stylesheet oder im Head. Wäre in den folgenden Beispiel für die ID «Fuss» im Stylesheet eine andere Breite definiert, würde diese vom Style-Attribut überschrieben.

<div id="Fuss" style="width:100px;">Text</div>

Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.