Aus dem Kurs: Grundkurs Webtechniken 1: HTML

Jeder Browser hat ein Browser-Stylesheet – Tutorial zu HTML

Aus dem Kurs: Grundkurs Webtechniken 1: HTML

Gratismonat starten Für Ihr Team erwerben

Jeder Browser hat ein Browser-Stylesheet

“

CSS, kurz für Cascading Style Sheets, ist eine Sprache, die speziell zur Gestaltung von HTML-Elementen erfunden wurde. Und bevor Sie Ihr erstes Style Sheet erstellen, es mit der HTML-Datei verbinden und dann diese mit den ersten CSS-Regeln gestalten, geht es jetzt um das sogenannte Browser Style Sheet. Hier im Übungsordner ist die Übungsdatei index.html und ich öffne diese zur Abwechslung mal im Chrome, mache das ins Vollbild und klicke hier mit rechts auf die Seite. Wo genau spielt keine Rolle und klicke auf den Befehl Untersuchen. Dann gehen hier rechts außen die Entwicklertools des Chrome auf. Auch diese kann man hier an einer anderen Stelle platzieren. Aber ich lasse sie hier mal stehen. Und in diesem Entwicklertool kann man jetzt die einzelnen Elemente markieren. Ich klicke mal auf Body und dann sieht man links schon, Body geht nicht von ganz oben bis ganz unten und hat einen kleinen Abstand drumherum. Und ganz unten sieht man im Bereich CSS, dass diese Gestaltung von einem sogenannten User-Agent Stylesheet kommt. User-Agent ist die technische Bezeichnung für Browser. Das heißt, dieser Browser hat ein Stylesheet, das eine grundlegende Gestaltung mit auf den Weg gibt. Das Browser-Stylesheet hat die Aufgabe, dass man die Elemente auf den Webseiten ohne weitere Gestaltung zumindest lesen kann. Ich klicke jetzt hier mal auf das p und da wird links der Absatz hervorgehoben. Auch der hat einen Abstand oben und unten. Und dann sieht man hier schon Margin 16 Pixel steht hier und oben links sieht man, dass dieser Margin jetzt hervorgehoben ist. Das heißt also, hier unten gibt es ein Modell, das ist das sogenannte Boxmodell, wo die Gestaltung dieses Absatzes sofort sichtbar gemacht wird. Und aus dem User Stylesheet gibt es wirklich nur grundlegende Gestaltung. Display block bedeutet, dass der Absatz die gesamte Breite blockt, also von ganz links bis ganz rechts geht. Und diese Margineinstellungen, die werden Sie in Teil 2 des Kurses zu CSS genauer kennenlernen. Aber so ein Absatz hat von Haus aus schon mal oben und unten etwas Abstand und dieser Abstand heißt Margin. Das Browser-Stylesheet sorgt also dafür, dass HTML-Elemente ohne weitere Gestaltung im Browserfenster lesbar sind. Von uns selbst definierte CSS-Regeln überschreiben dieses Browser-Stylesheet. Das ist das Cascading in Cascading Style Sheets oder zumindest die erste Stufe dieser Kaskade. Aber für alle Elemente und Eigenschaften, die Sie nicht selbst gestalten, gelten weiterhin die Vorgaben vom Browser.

Inhalt