Wie Sie CSS op­ti­mal ein­set­zen

Cascading Style Sheets

CSS steht für Cascading Style Sheets!
Damit können Sie unter ande­rem die Schrift­grössen, Schrift­farben, Schrift­aus­zeich­nun­gen, Zeilen­abstände, Bild­schirm­hinter­gründe etc. in eine ex­ter­ne Datei auslagern. Diese eine Datei kann das Design ei­ner ganzen Web­site beein­flus­sen.

Informationen gemäss Stand vom 11.3.2023

Bild: 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 res­pek­ti­ve 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 Aus­gabe­ge­rä­te
  Mit CSS kann man ein res­pon­sives 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 Websei­ten 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 rea­gieren un­terschiedlich beim Einsatz von CSS. Verwenden Sie nur Befehle, die in allen Browsern brauchbare respek­tive ähn­liche Resultate erzeugen.
• CSS-Validator
  Die Qualität eines CSS-Codes kann mit einem Validator wie jigsaw.w3.org/css-validator/ getestet werden.
• CSSDesk
  Hierbei handelt es sich um ein Online-Tool, genauer gesagt ein Sandkasten. Testen Sie auf die Schnelle live HTML und CSS-Regeln.
  cssdesk.com

Autor: Walter B. Walser, kundennutzen.ch