Webdesign Rostock

Webdesigner gesucht?
Hobby Webdesign aus Rostock

CSS Cascading Style Sheets verständlich erklärt, lesen Sie nachfolgend einige Informationen über CSS und wie sich Cascading Style Sheets bei der Webseitenerstellung einsetzen lassen...

CSS Cascading Style Sheets

Der HTML-Quellcode meiner Internetseiten sowie auch der Webseiten, die ich als Webdesignerin im Rahmen meines Hobbys für Auftraggeber realisiere, wird von mir stilistisch und synaktisch nach den international empfohlenen Richtlinien des W3C Konsortium erstellt. D.h. Inhalt und Design, also HTML und CSS sind bei von mir erstellten Webseiten grundsätzlich getrennt.

Unterschied zwischen HTML und CSS

Im HTML werden die Überschriften, Inhalte der Seite, Texte, Fotos, Grafiken, Videos usw. angegeben. Im CSS Cascading Style Sheets, einer bestenfalls extern ausgelagerten Datei, werden hingegen die Formatierungen für die Seiten vorgenommen, also die optische Gestaltung der Website. Hier können die Hintergrundfarben oder das Erscheinungsbild von Grafiken, Listen oder Formularseiten usw. definiert werden, ebenso die Schriftart, Schriftgröße, Schriftfarbe, das Aussehen der Überschriften usw. Mit der Auszeichnungssprache HTML wird also hauptsächlich die Struktur eines Webseiten-Dokuments definiert. Mit der Formatierungssprache CSS wird das Aussehen einer Webseite bestimmt, also das Design. Damit ist eine Trennung der Information von der Präsentation möglich.

Vorteile von CSS

Da CSS eine Trennung des Inhaltes von der optischen Gestaltung ermöglicht, weil im HTML-Dokument nur noch die Bedeutung der einzelnen Elemente aufgeführt ist, aber das konkrete Aussehen dieser ausgewiesenen Abschnitte bzw. Elemente konkret im CSS festgelegt werden kann, hat dies bei der Webseitenerstellung bzw. bei der Bearbeitung und Aktualisierung von Seiten den Vorteil, dass nicht jede einzelne HTML-Seite einer Website formatiert werden muss. Änderungen am Style, die im CSS ausgeführt werden, wirken sich auf alle einzelnen Unterseiten einer Homepage aus. Das spart Zeit und Arbeit, da sich Änderungen am Design somit in deutlich kürzerer Zeit erledigen lassen.
Anzeige
Gleichzeitig wird durch den Einsatz von CSS die HTML-Datei kleiner und der Quelltext übersichtlicher, d.h. dass sich auch die Ladezeiten von Internetseiten aufgrund eines wesentlich schlankeren HTML-Codes verringern.

Seit wann gibt es CSS

Das World Wide Web Konsortium (W3C) entwickelte CSS schon vor über 20 Jahren. Im Oktober 1994 erstellte Håkon Wium Lie in Zusammenarbeit mit Bert Bos die erste CSS-Spezifikation und brachte den Vorschlag, dass Regeln über verschiedene Stil-Vorlagen hinweg vererbt werden können, ein. Damit war CSS1 geboren, und erst seit CSS lassen sich Inhalte von den Layout-Vorgaben überhaupt trennen. Es folgten Weiterentwicklungen in der Art, dass CSS in Module zerlegt worden ist, die voneinander unabhängig erweitert und als neue Versionen in CSS2 sowie CSS3 veröffentlicht wurden. Inzwischen ist CSS4 in Arbeit als vierte Version der CSS-Selektoren.

Wie wird eine CSS-Datei erstellt

Zum Erstellen einer CSS-Datei wird ein neues Textdokument angelegt, da eine leere Textdatei .txt benötigt wird. Geöffnet wird die Textdatei mit einem normalen Editor, mit WordPad oder mit einem bevorzugten HTML-Editor, um in die txt-Datei alle zu definierenden Stylesheet-Angaben hinein schreiben zu können.
Dieses Textdokument muss dann zwingend mit der Datei-Endung .css abgespeichert werden. Vielfach wird der Name style.css verwendet, wobei die Bezeichnung der Datei vor dem .css jedoch frei wählbar ist, da häufig auch mehrere CSS-Dateien mit unterschiedlichen Inhalten für ein Website-Projekt zur Anwendung gelangen.
Anzeige
Damit die CSS-Datei beim Aufruf der HTML-Datei vom Browser mitgeladen werden kann, muss in den HEAD-Bereich des HTML-Dokuments, also im HTML-Quelltext die entsprechende Verlinkung angegeben werden. Diese sieht für eine mit dem Namen style benannte CSS-Datei wie folgt aus:

Grafik

Die CSS-Datei muss sich dabei in dem gleichen Verzeichnis befinden, in der sich auch das HTML-Dokument befindet. Bei Einsatz mehrerer CSS-Dateien innerhalb eines Website-Projekts legt man sich der Übersichtlichkeit halber zumeist einen extra Ordner CSS an, so dass die in den HEAD der HTML-Seite einzutragende Zeile in dem Fall auch den Ordner als Ort, in dem sich die CSS befindet, enthalten muss:

Grafik


Andere Webseiten zum Thema CSS

Wer sich über das umfangreiche Thema Cascading Style Sheets weitergehend informieren oder sich selbst eine CSS-Datei erstellen möchte, findet im Web zahlreiche interessante Interseiten und auch unter den nachfolgend angeführten Websites sicher hilfreiche Anregungen:

  • www.css4you.de
  • www.html-seminar.de
  • www.websitetips.com
Anzeige

CMS-Systeme, Website Builder, Homepagebaukästen

Informationen rund um das Thema CMS-Systeme, Web-Builder, Baukasten-Systeme und Open Source Systeme können Sie auf der nachfolgenden Seite finden:

Mehr lesen

Anzeigen