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 11.3.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 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

Seit 1995 hat Walter B. Walser Erfahrung im Umgang mit dem Internet. Er gründete ein Magazin, kundennutzen.ch, das sich auf praktisches Online-Marketing und Online-Werkzeuge konzentrierte. Als Agenturleiter hatte er Unternehmern geholfen, die Effektivität ihrer Website um 100% zu steigern. Ausserdem hatte Walser kleine Unternehmen in Bezug auf ihre Internetpräsenz beraten und war spezialisiert auf die Wartung und Optimierung von Websites. Zu seinen Interessen gehören Umweltschutz und Geopolitik.