CSS in HTML einbinden

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>

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>
     ...

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 „Brackets“ kann man gleichzeitig eine HTML-Datei und die zugehörige CSS-Datei bearbeiten: