Wie Sie CSS optimal einsetzen

mit Keine Kommentare

Cascading Style Sheets

Informationen gemäss Stand vom 1.6.2021

CSS steht für Cascading Style Sheets!
Damit können Sie unter anderem die Schrift­grössen, Schrift­­farben, Schrift­aus­zeich­nun­gen, Zeilen­­abstände, Bild­schirm­­hinter­gründe etc. in eine externe Datei auslagern. Diese eine Datei kann das Design einer ganzen Website beein­­flussen.

CSS

Bild von Joseph Mucira auf Pixabay

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 Spaltenverarbeitung. Damit kommen Webseiten ohne Tabellen aus. Komplizierte Tabellenkonstruktionen mit den entsprechenden Problemen und Einschränkungen entfallen.
  • Trennung des Inhalts vom Layout
    Mit CSS ist es relativ einfach, das Layout vom Inhalt zu trennen. Redesigns werden somit schneller durch­ge­führt.
  • Viele Formatiermöglichkeiten
    CSS bietet Formatieroptionen, die weit über die Möglichkeiten von der Textbeschrei­bungssprache HTML hinaus­gehen. So zum Beispiel Blocksatz, variable Zeilen­abstände, etc.
  • Pixelgenau arbeiten
    So ist es mit CSS möglich, Objekte pixelgenau zu positionieren. CSS bildet zusammen mit der Programmier­sprache Javascript die Grundlage für Dynamic HTML (DHTML).
  • Designwechsel durch CSS-Datei-Austausch
    Ein kompletter Webauftritt lässt sich optisch mit wenigen Klicks und Einträgen verändern.
  • Optimiert für Drucker
    Für die Bildschirmausgabe resp. für die Druckerausgabe lassen sich unter­schied­liche Einstel­lungen vor­nehmen. Der Ausdruck kann so optimiert werden, dass die Seiten­navigation nicht mitgedruckt wird.
  • Optimiert für verschiedene Ausgabegeräte
    Mit CSS kann man ein responsives Webdesign erstellen. Diese dynamischen Layouts passen sich an die ver­füg­ba­re Bild­­schirm­auf­­lösung an. So erfordert ein 24″-Bildschirm ganz andere Einstel­lungen als ein Smartphone.

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 eingebettet 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 resp. ähnliche 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

Verfolgen Walter B. Walser:

Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing Manager. Er half frü­her Un­ter­neh­mern 100% mehr aus Ihrer Web­site he­r­au­­s­zu­­­ho­len. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­si­te-Pfle­ge, Web­si­te-Opti­mie­rung und das On­li­ne-Mar­ke­ting mit On­li­ne-Tools spe­zia­li­siert.