Wie Sie CSS optimal einsetzen

mit Keine Kommentare

Cascading Stylesheets

CSS steht für Cascading Stylesheets!
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 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 durchgeführt.
  • Viele Formatiermöglichkeiten
    CSS bietet Formatieroptionen, die weit über die Möglichkeiten von der Textbeschreibungssprache HTML hinausgehen. So etwa Blocksatz, variable Zeilenabstände etc.
  • Pixelgenau arbeiten
    So ist es mit CSS möglich, Objekte pixelgenau zu positionieren. CSS bildet zusammen mit der Programmiersprache 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 respektive für die Druckerausgabe lassen sich unterschiedliche Einstellungen vornehmen. Der Ausdruck kann so optimiert werden, dass die Seitennavigation nicht mitgedruckt wird.
  • Optimiert für verschiedene Ausgabegeräte
    Mit CSS kann man ein responsives Webdesign erstellen. Diese dynamischen Layouts passen sich an die verfügbare Bildschirmauflösung an. So erfordert ein 24″-Bildschirm ganz andere Einstellungen 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 respektive ähnliche Resultate erzeugen.
  • CSS-Validator
    Die Qualität eines CSS-Codes kann mit einem Validator wie jigsaw.w3.org/css-validator/ getestet werden.

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.