w3docs logo
Wie können Sie CSS hinzufügen?
Quiz Starten - "CSS Grundlagen"

CSS hinzufügen: Inline, Intern, Extern und Importierte Stylesheets

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die zur Beschreibung des Aussehens und der Formatierung von Dokumenten in einer Markup-Sprache verwendet wird. Man kann CSS auf viele verschiedene Arten in HTML hinzufügen. Gemäß der Quizfrage gibt es vier Hauptmethoden, um CSS hinzuzufügen: Inline, Intern, Extern und Importierte Stylesheets.

Inline-Styling

Beim Inline-Styling werden die CSS-Regeln direkt in das HTML-Element eingefügt. Jedes HTML-Element kann ein style-Attribut haben, das CSS-Code enthält. Hier ist ein Beispiel:

<!DOCTYPE html>
<html>
<body>
<p style="color:blue">Dies ist ein blauer Absatz.</p>
</body>
</html>

Internes Stylesheet

Ein internes Stylesheet wird im head-Bereich der HTML-Seite platziert. Dabei wird das <style>-Tag verwendet, welches die CSS-Regeln enthält. Sehen Sie sich das folgende Beispiel an:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>

Externes Stylesheet

Externe Stylesheets sind .css Dateien, die auf der HTML-Seite verlinkt sind. Diese Methode ist besonders nützlich, wenn man CSS über viele verschiedene HTML-Seiten hinweg anwenden möchte. So sieht der Code dafür aus:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>

Importierte Stylesheets

Mit der Methode der importierten Stylesheets kann man ein externes Stylesheet in ein anderes Stylesheet importieren. Dies wird häufig verwendet, um die Modularität zu fördern und Code-Wiederholungen zu reduzieren:

@import url('styles.css');

Jede dieser Methoden hat ihre Anwendungsfälle und kann je nach Situation die beste Wahl sein. Sie können sogar alle vier in einer einzigen Webseite verwenden, wenn es nötig ist. Es ist jedoch empfehlenswert, den meiste CSS Code in externen Dateien zu halten, um die Wartbarkeit zu verbessern und Wiederholungen zu vermeiden.

Related Questions

Finden Sie das nützlich?