Wie Sie CSS optimal einsetzen

von ein 1. Juni 2021 mit Keine Kommentare

Cascading Style Sheets

CSS steht für Cascading Style Sheets!
Damit können Sie unter anderem die Schriftgrössen, Schriftfarben, Schriftauszeichnungen, Zeilenabstände, Bildschirmhintergründe etc. in eine externe Datei auslagern. Diese eine Datei kann das Design einer ganzen Website beeinflussen.

Informationen gemäss Stand vom 15.7.2023

CSSBild: Joseph Mucira auf Pixabay.com

Vorteile durch den Einsatz von CSS

  • Schlank und rank
    Die HTML-Seiten werden wesentlich schlanker. Kurze Ladezeiten und schnellerer Seitenaufbau sind Lohn für die Umstellung auf CSS.
  • Tabellen ade
    Mit CSS verfügen Webdesigner u.a. über eine Spalten­ver­arbeitung. Damit kommen Webseiten ohne Tabellen aus. Komplizierte Tabellen­kon­struk­tionen mit den entsprechenden Pro­blemen und Ein­schrän­kungen ent­fallen.
  • Trennung des Inhalts vom Layout
    Mit CSS ist es relativ einfach, das Layout vom Inhalt zu trennen. Re­designs werden somit schneller durch­ge­führt.
  • Viele Formatiermöglichkeiten
    CSS bietet Formatieroptionen, die weit über die Mög­lich­kei­ten von der Text­beschrei­bungs­sprache HTML hinaus­gehen. So zum Beispiel Block­satz, va­riable Zeilen­abstände, etc.
  • Pixelgenau arbeiten
    So ist es mit CSS möglich, Objekte pixelgenau zu po­si­tionieren. CSS bildet zu­sam­men mit der Pro­grammier­sprache Javascript die Grundlage für Dynamic HTML (DHTML).
  • Designwechsel durch CSS-Datei-Aus­tausch
    Ein kompletter Webauftritt lässt sich optisch mit wenigen Klicks und Ein­trägen verändern.
  • Optimiert für Drucker
    Für die Bildschirmausgabe respektive für die Drucker­ausgabe lassen sich unter­schied­liche Einstel­lungen vor­nehmen. Der Ausdruck kann so opti­miert werden, dass die Seiten­na­vi­ga­tion nicht mitgedruckt wird.
  • Optimiert für verschiedene Ausgabegeräte
    Mit CSS kann man ein responsives Webdesign erstellen. Diese dyna­mi­schen Layouts passen sich an die ver­füg­ba­re Bild­schirm­auf­lösung an. So er­fordert ein 24″-Bildschirm ganz andere Einstel­lungen als ein Smart­phone.

Worauf zu achten ist

So werden die CSS-Dateien in die Webseiten eingebaut. Folgender Hinweis kommt in den HEADER einer Webseite:

<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>

Zusätzlich kann eine Datei einge­bettet werden, die definiert, wie eine Webseite ausgedruckt wird:

<link rel='stylesheet' type='text/css' media='print' href='print.css'>
  • Unterschiedliche Interpretation des Codes
    Unterschiedliche Browser reagieren unterschiedlich beim Einsatz von CSS. Verwenden Sie nur Befehle, die in allen Browsern brauchbare respektive ähnliche Resultate erzeugen.
  • CSS-Validator
    Die Qualität eines CSS-Codes kann mit einem Validator wie jigsaw.w3.org/css-validator/ getestet werden.

Bitte klicken, ähnliche Themen

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Seit 1995 hat Walter B. Walser Erfahrung mit dem Internet. Im Jahr 2001 gründete er das Magazin kundennutzen.ch, das sich auf praktisches Online-Marketing und Online-Tools konzentriert. Als Agenturleiter hat er Unternehmern geholfen, die Effektivität ihrer Website um 100% zu steigern. Darüber hinaus beriet Walser kleine Unternehmen bei ihrem Internetauftritt und spezialisierte sich auf die Pflege und Optimierung von Websites. Zu seinen Interessen gehören Umweltschutz und Geopolitik.