Warum eine Website mit CSS designen?

27.09.2022 | Digitalcoach News, Praktische Tipps

Übersicht

Begriffserläuterung: CSS

HTML und CSS sind die Skriptsprachen, die am häufigsten zur Websitegestaltung genutzt werden. Mit HTML wird die Struktur der Website und mit CSS werden Gestaltungsanweisungen für das optische Erscheinungsbild der Website festgelegt. 

Mit CSS kann die Ansicht einer Website für unterschiedliche Endgeräte und Bildschirmgrößen angepasst werden, sodass die Inhalte einer Website auf jedem Bildschirm für die Besucher optimal dargestellt werden. Siehe das Beispiel unten Ansicht und Interaktion für unterschiedlichen Bildschirmgrößen“

 

Eine einfache CSS-Anweisung

So sieht eine einfache CSS-Anweisung aus:

body { 

     background-color: lightblue; 

  }
 
Hiermit wird die Hintergrundfarbe einer Website z.B. als „hellblau“ festgelegt.
 

Warum eine Website mit CSS designen ?

Dank CSS lassen sich die Website-Elemente wie z.B. Layout, Farben und Typografie nach Wunsch anpassen. Mit CSS können sogar interaktive Momente und kleine Animationen auf einer Website geschaffen werden. Z.B. wie dieser Button hier.
 
Beispiel: Ansicht und Interaktion für unterschiedlichen Bildschirmgrößen
 

Cooler Btn hier

 

  • Hinweis für mobile Nutzer: Wenn Sie den Beitrag auf Ihrem Smartphone oder Tablet lesen, klicken Sie auf den Button.Im Übrigen werden Sie auf Ihrem Computer oder Laptop an dieser Stelle einen anderen Hinweis vorfinden. Probieren Sie es aus!
  • Hinweis für Desktop-Nutzer: Gehen Sie mit dem Cursor (Maus) über den Button ohne ihn anzuklicken. Im Übrigen werden Sie auf Ihrem Smartphone an dieser Stelle einen anderen Hinweis vorfinden. Probieren Sie es aus!
CSS wird in Kombination mit HTML verwendet. Ein HTML-Dokument kann hingegen auch ohne CSS-Datei von einem Computer gelesen und von einem Browser visuell aufbereitet werden. Mit CSS werden die Elemente einer Website allerdings ansprechender gestaltet.
Eine gute Website ist nutzerfreundlich und ansprechend gestaltet, sodass die Besucher nicht das Interesse verlieren und die Website verlassen. CSS bietet hier viele Gestaltungsmöglichkeiten, die nur mit HTML nicht umsetzbar wären.
 
 

Wie wird CSS mit HTML verknüpft?

Eine externe CSS-Datei wird durch ein sog. Link-Tag im Head-Bereich einer Website eingebunden. Was ein Head-Bereich ist, haben wir bereits ind Diesem Artikel erläutert: Was ist HTML?

Hier erfahren Sie wie Sie eine CSS-Datei erstellen und in HTML-Dokument einbinden: Video „CSS-Datei erstellen und in HTML einbinden“

Beispiel: So wird eine CSS-Datei mit dem HTML-Dokument einer Website verknüpft.

<link href=“meindesign.css“ rel=“stylesheet„>