====== LU12b - Einbindung von CSS in HTML ====== Es gibt mehrere Möglichkeiten, CSS-Stilanweisungen mit einem HTML-Dokument zu verknüpfen. Genau genommen stehen Ihnen drei Möglichkeiten zur Verfügung: * internes Stylesheet (Internal Style Sheet): Sie geben die Stilanweisung gesammelt intern im Kopfbereich des HTML-Dokuments zwischen dem style-Element an. * externes Stylesheet (External Style Sheet): Sie verwenden eine externe Stylesheet-Datei und verknüpfen diese mit dem HTML-Dokument. * Inline-Style: Sie notieren die CSS-Stilangaben direkt im HTML-Element. ===== Internes Stylesheet ===== Ein internes Stylesheet wird im Kopfteil (''head'' section) des HTML-Dokuments platziert und verwendet den ''

Willkommen auf meiner Webseite!

Dies ist ein Absatz.

In diesem Beispiel wird das interne Stylesheet verwendet, um den Hintergrund des Dokuments auf hellblau, den Text in der Überschrift auf marineblau und den Text im Absatz auf rot zu setzen. ===== Externes Stylesheet ===== Externe Stylesheets werden in separaten CSS-Dateien gespeichert. Diese Methode wird bevorzugt, wenn der Stil auf viele Seiten Ihrer Website angewendet werden soll. Sie verlinken die CSS-Datei mithilfe des '''' Tags im '''' Tag Ihres HTML-Dokuments. Hier ist ein Beispiel: ''index.html''





    Beispiel für externes Stylesheet
    


    Willkommen auf meiner Webseite!
    Dies ist ein Absatz.

''style.css''


body {
    background-color: lightblue;
}
h1 {
    color: navy;
}
p {
    color: red;
}

===== Inline-Style ===== Inline-Styles werden direkt in die HTML-Tags mithilfe des ''style'' Attributs integriert. Sie werden hauptsächlich für einzelne Instanzen verwendet, in denen ein spezifischer Stil benötigt wird. Hier ist ein Beispiel:





    Willkommen auf meiner Webseite!
    Dies ist ein Absatz.

===== Wann wird welche Methode verwendet? ===== Jede Methode der CSS-Einbindung hat ihre eigenen Vor- und Nachteile und eignet sich für unterschiedliche Anwendungsfälle. Hier sind einige allgemeine Richtlinien: ==== Externes Stylesheet: ==== Externes CSS ist die bevorzugte Methode für die meisten Projekte, insbesondere für größere Websites und Anwendungen. Es ermöglicht die Wiederverwendung von CSS-Regeln auf mehreren Seiten und erleichtert das globale Ändern von Stilen, indem man Änderungen nur an einem Ort vornehmen muss. Es ist auch vorteilhaft für die Caching-Funktion des Browsers. Ein externes Stylesheet wird beim ersten Laden der Website vom Browser gecacht und muss für folgende Seitenaufrufe nicht erneut heruntergeladen werden. Verwenden Sie externes CSS, wenn: * Sie mehrere Seiten haben, die die gleichen Styles verwenden. * Sie einen klaren Trennung von Struktur (HTML) und Präsentation (CSS) möchten. ==== Internes Stylesheet: ==== Internes CSS kann nützlich sein, wenn Sie spezifische Styles haben, die nur auf einer einzigen Seite gelten. Durch das Einfügen von CSS-Regeln in den ''