Was genau ist CSS?

Die Abkürzung CSS steht für Cascading Stylesheets. Wie man dem Wort „Stylesheets“ entnehmen kann, ist CSS für den Style, also das Aussehen einer Homepage zuständig.


Bei moderner Web Programmierung achtet man auf die möglichst strikte Trennung von Form und Inhalt. Der Inhalt einer Homepage wird durch HTML strukturiert. Dies geschieht, indem verschiedene Inhaltsarten mit ihnen zugewiesenen Tags versehen werden. So heißt beispielsweise der Tag für eine Hauptüberschrift in HTML <h1>. In einem HTML 5 Dokument würde man also eine Hauptüberschrift mit <h1>Meine Überschrift</h1> kennzeichnen. Dadurch wissen Suchmaschinen wie Google und Browser wie der Internet Explorer, dass es sich um eine Hauptüberschrift und nicht etwa um Fließtext handelt.


Das Aussehen einer Homepage wird über CSS gesteuert. Wenn wir bei dem Inhaltstyp Hauptüberschrift bleiben, dann lässt sich zum Beispiel über den CSS Code h1 {font-size: 20px;} die Schriftgröße aller Hauptüberschriften der Homepage auf 20 Pixel festlegen. Schließlich werden über CSS alle Dinge wie Größen, Abstände oder Farben gesteuert. Für die Ausgabe am Monitor kann also per CSS die Schriftgröße, der Abstand und die Schriftstärke für Überschriften und Fließtext individuell eingestellt werden.


CSS und Responsives Design

Die Grundlage für die Erstellung von CSS Dateien sind dementsprechend HTML Dokumente, mit denen sie verknüpft sind. Und über diese CSS Dateien wird auch das responsive Verhalten einer Homepage gesteuert. Hierzu wird unter anderem über den CSS Code @media screen and (max-width: 320px) gesteuert, wie die Darstellung und Anordnung der einzelnen Elemente auf einem Display, das maximal 320 Pixel breit ist, aussehen soll. Über beispielsweise @media screen and (max-width: 320px) {h1 {font-size: 8px;}} lässt sich also die Schriftgröße von Hauptüberschriften für die Darstellung auf einem maximal 320 Pixel breitem Display auf 8 Pixel festlegen. So lassen sich mit unterschiedlichen Pixel-Werten unterschiedliche Design-Vorgaben für die gängigsten Displaybreiten machen. Die CSS Datei, die für das responsive Verhalten der Homepage zuständig ist, enthält dann mehrere solcher @media screen-Einträge, und der je nach Displaygröße zutreffende wird ausgeführt.


Homepage-Baukästen und Responsives Design

Während sich Menschen, die sich ihre Homepage von Hand selbst programmieren, mit HTML, CSS und den Aspekten Responsiven Designs im Detail beschäftigen müssen, ist dies für Nutzer eines Homepage-Baukastens nicht erforderlich. Homepage-Baukästen verwenden sogenannte Templates, manchmal auch Themes genannt. Dies sind Design Vorlagen, die bereits vorprogrammiert sind, jedoch im Baukasten an die eigenen Wünsche und Bedürfnisse angepasst und individualisiert werden können. Diese Templates wurden bereits unter der Berücksichtigung von Responsivem Design programmiert. Seitens des Nutzers ist hier überhaupt kein Eingreifen notwendig.


Im Baukasten selbst gibt es immer die Möglichkeit für eine Vorschau. Mit dieser kann man vor der eigentlichen Veröffentlichung der Homepage, also bevor die Änderungen für alle Internet-Nutzer sichtbar werden sehen, wie sich die Änderungen auf das Design auswirken. Die Vorschau bietet neben der Monitor-Darstellung auch stets eine Vorschau auf einem Smartphone-Display.


People Avatars Black 17 Erstellt von:
„Homepage-Ratgeber.de“-Redaktion
Homepage Experten
Erstellt am:
Zuletzt aktualisiert am: