CSS-Lehrbuch – Lektion 1 – CSS-Stile einbinden

26/05/2025, by Ivan

Ich werde nicht erklären, wozu CSS gut ist. Wenn Sie dieses Lehrbuch geöffnet haben, möchten Sie es lernen. Von meiner Seite aus nur so viel: Die Möglichkeiten von CSS sind sehr umfangreich und erlauben das Layouten von Designs jeder Komplexität. Die Nutzung von CSS bedeutet jedoch, dass Sie auf die Verwendung verschiedener Attribute wie size, color, bgcolor, align und andere verzichten müssen, die CSS „stören“ würden.

Es gibt mindestens drei Möglichkeiten, CSS in Ihre HTML-Datei einzubinden. Lassen Sie uns die einfachste zuerst betrachten, dann die zweite und richtige Methode.

CSS innerhalb eines Tags

CSS kann über das Attribut style eingebunden werden:

<div style="width: 200px; height: 100px;">
  Block
</div>

So legen wir einen Block mit den Maßen 200 x 100 Pixel fest. Schauen wir uns an, wie CSS geschrieben wird. Zuerst schreiben wir das Attribut style="". Danach schreiben wir die CSS-Stile innerhalb der Anführungszeichen.

style="parameter:w ert;parameter:wert;parameter:wert"

Wir schreiben die Stile so: zuerst der Parameter (width, height usw.), dann ein Doppelpunkt und der Wert des Parameters. Jeder Parameter wird durch ein Semikolon getrennt.

Kommen wir zur zweiten Möglichkeit, CSS zu schreiben.

CSS am Anfang des HTML-Dokuments

Dafür verwenden wir das Tag <style></style>, in dem wir CSS-Code schreiben.

<html>
 <head>
  <title>CSS-Lehrbuch</title>
  <style type="text/css">
  hier schreiben wir CSS-Code
  </style>
 </head>
 <body>
  <p>Lernen Sie CSS mit drupalbook.org</p>
 </body>
</html>

Das style-Tag schreiben wir im <head></head>-Bereich nach dem <title>-Tag. Schreiben wir ein Beispiel-CSS:

<html>
 <head>
  <title>CSS-Lehrbuch</title>
  <style type="text/css">
   body{
     background: #eeeeee; /* Seitenhintergrund */     
     font-size: 14px;     /* Schriftgröße */
   }
   p{
     color: #ff0000; /* Textfarbe */
   }
  </style>
 </head>
 <body>
  <p>Lernen Sie CSS mit drupalbook.org</p>
  <p>2. Zeile: Lernen Sie CSS mit drupalbook.org</p>
 </body>
</html>

Schauen wir uns an, wie CSS für Tags geschrieben wird. Wenn wir den Tag-Namen in CSS schreiben, dann gelten die CSS-Eigenschaften für alle diese Tags. Zum Beispiel bedeutet p, dass folgende Eigenschaften für alle Absätze gelten.

Beim Schreiben von CSS-Code geben wir zuerst den Tag an, für den die CSS-Stile gelten sollen, dann schreiben wir die CSS-Stile in geschweiften Klammern. CSS-Stile werden wie im style-Attribut geschrieben:

parameter:wert;parameter:wert;parameter:wert

Parameter, Doppelpunkt, Wert, Semikolon, und dann wieder Parameter, Doppelpunkt, Wert, Semikolon usw. Nach dem letzten Stil kann man das Semikolon weglassen, besser ist es aber, es zu setzen.

Wir haben CSS auf zwei Arten eingefügt, jetzt schauen wir uns die dritte, optimale Methode an.

CSS in einer separaten Datei

Dies ist die beste Methode, die es erlaubt, CSS vollständig vom HTML-Code zu trennen. Manchmal möchte man CSS direkt in den HTML-Code einfügen, aber man sollte sich in solchen Fällen zurückhalten und CSS in eine separate Datei auslagern. Warum?

Das Hauptprinzip von CSS ist die Trennung von Text und dessen Gestaltung. HTML dient dazu, den Text zu strukturieren, CSS sorgt dafür, dass dieser Text harmonisch aussieht. HTML gibt nur den Text aus, CSS definiert Größen, Farben, Formen, Rahmen und Abstände.

Das war erstens. Zweitens wird der Code bei gemischtem HTML und CSS unübersichtlich und unhandlich. Drittens werden CSS-Dateien vom Browser zwischengespeichert, wenn CSS ausgelagert ist, muss es nur einmal geladen werden. Die Seite lädt dann schneller. Ich denke, Sie verstehen jetzt, worauf ich hinauswill.

CSS sollte möglichst in separate Dateien ausgelagert werden! Darauf möchte ich hinaus. Jetzt erstellen wir eine separate CSS-Datei. Dafür gibt es das Tag <link>:

<html>
 <head>
  <title>CSS-Lehrbuch</title>
  <link type="text/css" rel="stylesheet" media="all" href="styles.css" />
 </head>
 <body>
  <p>Lernen Sie CSS mit drupalbook.org</p>
  <p>2. Zeile: Lernen Sie CSS mit drupalbook.org</p>
 </body>
</html>

Das <link>-Tag hat folgende Attribute:

type="text/css" – damit geben wir an, dass es sich um CSS handelt,

rel="stylesheet" – das gibt an, dass die Datei eine CSS-Datei ist,

media="all" – diese CSS-Datei wird für alle Geräte geladen, mit denen die Webseite betrachtet wird,

href="styles.css" – der Pfad zur CSS-Datei, hier ein relativer Pfad.

Wir haben nun verstanden, wie man eine CSS-Datei einbindet. Erstellen Sie jetzt die Datei styles.css im selben Verzeichnis wie die HTML-Datei.

Öffnen Sie nun die Datei styles.css und fügen Sie folgende CSS-Stile ein:

body{
  background: #eeeeee; /* Seitenhintergrund */
  font-size: 14px;     /* Schriftgröße */
}
p{
  color: #ff0000; /* Textfarbe */
}

Speichern Sie die Datei und öffnen Sie Ihre HTML-Datei im Browser. Jetzt ist CSS korrekt über eine separate Datei eingebunden. Im nächsten Kapitel beginnen wir ausführlich zu erklären, wie man Stile in separaten Dateien schreibt.

Extra Block Types (EBT) - Neue Erfahrung im Layout Builder❗

❗Extra Absatztypen (EPT) - Erfahrung mit neuen Absätzen

CSS-Lehrbuch – Lektion 1 – CSS-Stile einbinden

CSS innerhalb eines Tags

CSS am Anfang des HTML-Dokuments

CSS in einer separaten Datei