CSS in HTML einbinden

Es gibt drei Möglichkeiten, CSS in HTML einzubinden:

1. Inline-Formatierung:
Einzelne Bereiche einer Seite sollen mit CSS formatiert werden.

Beispiel:
Eine Überschrift soll in roter Farbe dargestellt werden.

<h1 style="color: red;">Diese Überschrift ist rot.</h1>

2. Interne Formatierung
Im Kopf-Bereich einer Seite sollen die Formatierungen einer Seite festgelegt werden.

Beispiel:
Jede Überschrift einer Seite soll in roter Farbe dargestellt werden.

   <head>
     <title>Seite mit roten Überschriften</title>
     <style>
	 h1 {color: red;}
     </style>
   </head>
   <body>
     <h1>Diese Überschrift ist rot.</h1>
     ...

3. Externe Formatierung
Mehrere Seiten einer Homepage sollen im gleichen Stil formatiert werden.

Beispiel:
Jede Überschrift der gesamten Homepage soll in roter Farbe dargestellt werden.

  • Einbinden der CSS-Datei in die HTML-Datei. 
    <head>
 ...
 <link rel="stylesheet" href="format.css">
</head>
  • Aufbau der CSS-Datei:
    In unserem Beispiel besteht die CSS-Datei aus folgendem Befehl:

    h1 {color:red;}

    Beachte:

    • In der CSS-Datei werden keine spitzen, sondern geschweifte Klammern verwendet.
    • Die CSS-Datei muss in folgender Form abgespeichert werden: format.css

Alle der Arten der Formatierung können kombiniert werden.

Tipp:

Im Editor „VS Code“ kann man gleichzeitig eine HTML-Datei (links) und die zugehörige CSS-Datei (rechts) bearbeiten:

Hilfreich ist die Unterstützung der Farbauswahl  in „VS Code“. Das Tool erscheint, wenn man den Mauspfeil auf „red“


Weiter