Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

Ort der CSS-Formatierung

Die CSS-Formatierung kann an drei verschiedenen Orten geschehen:

  1. In-line
  2. In-document
  3. Extern


In-line

In-line bedeutet, dass die CSS-Formatierung beim HTML-Element selbst geschieht. Dazu wird beim HTML-Element das style Attribut verwendet. Unten siehst du, wie ein Anchor Tag (Link) formatiert werden kann.

<a href="http://kuf.ch" style="background-color: #09f; color: #ff0; font-size: 20px" >Link</a>
Link


In-document

Bei der In-document Methode wird die CSS-Formatierung im head-Teil des html-Dokuments vorgenommen.


<!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <title>Titel der Seite</title>
  <style type="text/css">
    p {
      background-color: #88f;
      color: #222;
      font-weight: bold;
      padding: 20px;
    }
  </style>

</head>

Dieser Paragraph wurde mit der In-document Methode formatiert.


Extern

Es ist auch möglich, alle CSS-Formatierungen in einer externen CSS-Datei zu speichern. Diese Datei hat die Endung .css. Damit die in dieser externen Datei gespeicherten Formatierungen auf die Seite angewendet werden, muss im head-Teil eine Verlinkung zu dieser Datei erfolgen. Wie das aussehen kann, siehst du unten im ersten Code-Beispiel. Die Syntax der CSS-Formatierungen in der externen Datei ist gleich, wie bei der In-document Methode. Das 2. Code-Beispiel zeigt dies.

Die externe Methode ist immer dann angebracht, wenn Formatierungen für mehrere Seiten erfolgen sollen. Damit ist ein einheitliches Design mit relativ geringem Arbeitsaufwand möglich.


<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
  <title>Ort der CSS-Formatierung</title>
  <link rel="stylesheet" href="master.css">
</head>


h1 {
  background-color: blue;
  color: white;
  font-size: 20px;
  text-align: center;
}

a {
  font-size: 18px;
  text-decoration: none;
}

p {
  background-color: grey;
  padding: 10px;
}