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

mit Keine Kommentare

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 12.3.2022

CSS Quelle: 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

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Walser arbeitet seit 1995 mit dem In­ter­net. Er ist Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting- und Online-Tools-Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing-Manager. Er half frü­her als Agenturleiter Un­ter­neh­mern 100% mehr aus Ihrer Web­site heraus­zu­holen. 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. Spezielle Interessen: Umweltschutz und Geopolitik.