Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Connecting CSS to HTML | Einstieg in CSS
CSS-Grundlagen

bookConnecting CSS to HTML

Swipe um das Menü anzuzeigen

Wie CSS zu HTML hinzugefügt wird

Es gibt drei Möglichkeiten, CSS auf ein HTML-Dokument anzuwenden:

  1. Inline-Stile;
  2. Eingebettete Stylesheets;
  3. Externe Stylesheets.

Jede Methode funktioniert unterschiedlich und wird in verschiedenen Situationen verwendet.

Inline-Stile

Inline-Stile werden direkt innerhalb eines HTML-Elements mit dem Attribut style geschrieben.
Beispiel:

index.html

index.html

copy

Dieser Stil gilt nur für dieses spezifische Element.

Inline-Styles sind schnell anwendbar, jedoch nicht wiederverwendbar und schwer zu verwalten in größeren Projekten.

Eingebettetes Stylesheet

Ein eingebettetes Stylesheet wird innerhalb von <style>-Tags im <head>-Bereich eines HTML-Dokuments geschrieben.
Beispiel:

index.html

index.html

copy

Diese Methode wendet Stile auf die gesamte Seite an, jedoch nur innerhalb dieser einzelnen HTML-Datei.

Nützlich für kleine oder eigenständige Seiten.

Externes Stylesheet

Externes CSS speichert Stile in einer separaten .css-Datei und verbindet diese über das <link>-Tag mit HTML.
Beispiel:

index.html

index.html

styles.css

styles.css

copy

Mit dieser Methode können Styles auf mehreren Seiten wiederverwendet werden.

Sie ist die bevorzugte und skalierbarste Vorgehensweise für reale Projekte.

Note
Zusammenfassung

Inline-Styles: Direkt auf Elemente angewendet, aber nicht wiederverwendbar.

Eingebettetes Stylesheet: Im <head> platziert, wirkt sich nur auf eine Seite aus.

Externes Stylesheet: In einer separaten .css-Datei gespeichert, wiederverwendbar und für die meisten Projekte empfohlen.

In diesem Kurs werden wir hauptsächlich externe Stylesheets verwenden.

question mark

Welche Möglichkeiten gibt es, um Styles zum HTML-Dokument hinzuzufügen?

Select all correct answers

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Abschnitt 1. Kapitel 2
some-alt