Wie informieren Sie den Browser, dass Sie einen Styling-Abschnitt mit einem internen Stylesheet erstellen?

Einen Styling-Abschnitt mit einem internen Stylesheet im Browser erstellen

Einen Styling-Abschnitt mit einem internen Stylesheet erstellen Sie, indem Sie im HTML-Kode das <style>-Element verwenden und CSS-Regeln in das Element eingeben. Die korrekte Syntax ist <style type="text/css"></style>. Dieser Code teilt dem Browser mit, dass der eingekapselte Code als CSS formatiert ist und dementsprechend interpretiert werden sollte.

Ein praktisches Anwendungsbeispiel könnte folgendermaßen aussehen:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    body {background-color: powderblue;}
    h1   {color: blue;}
    p    {color: red;}
 </style>
</head>
<body>

<h1>Hallo Welt!</h1>
<p>Pass auf die Farben auf!</p>

</body>
</html>

In diesem Beispiel ändert das interne Stylesheet die Hintergrundfarbe des gesamten Körpers (body) in "PowderBlue", setzt die Farbe des h1-Elements auf Blau und die des p-Elements auf Rot.

Allerdings ist zu beachten, dass diese Method der CSS-Benutzung hauptsächlich dann Verwendung findet, wenn man nur wenige Klassen / ID's stylen möchte. Bei größeren Projekten wo u.U. hunderte von Klassen / ID's gestylt werden müssen, ist eine externe CSS-Datei empfehlenswert. Dies hat den Vorteil, dass der HTML-Code schlank bleibt und das CSS in einer separaten Datei besser strukturiert werden kann.

Von der Verwendung der Syntax <style type="css"></style> oder <class type="css"></class> wird klarerweise abgeraten, da diese nicht korrekt oder überhaupt nicht vom Browser interpretiert werden können. Somit haben diese keinerlei Effekt auf das Styling der Webseite. Ein gültiger HTML-Code, insbesondere in Bezug auf CSS-Regeln, ist essenziell um eine korrekte Darstellung in verschiedenen Browsern zu gewährleisten.

Einen Styling-Abschnitt mit einem internen Stylesheet im Browser erstellen

Related Questions