CSS – Cascading Style Sheets

Tags: |

Cascading Style Sheets (oder abgekürzt CSS) ist eine Ergänzungssprache zur exakt formatieren und positionieren von Seiten-Elementen eines strukturierten Dokuments. Sie wird vor allem in HTML und XML-Dokumenten eingesetzt. MIttels CSS wird dabei das Erscheinungsbild einer Ausgabe festgelegt, während im HTML ausschliesslich der Inhalt bearbeitet wird.

Diese Trennung von Funktion und Design führt bei korrekter Anwendung zu mehrerer entscheidenden Vorteilen:

  • Die einzelne HTML-Seite wird deutlich kleiner, da sie sich nur noch auf das wesentliche (den Inhalt) beschränkt.
  • Ladezeiten werden verringert, da der Browser die ausgelagerten (in einer seperaten Datei abgelegt) CSS-Definitionen für viele Seiten nur ein einziges Mal laden muss.
  • Mit sehr wenigen Änderungen lassen sich auch riesige Projekte auf ein neues Design (auf ein neues CI) umstellen.
  • Es wird möglich, verschiedene Erscheinungsbilder für verschiedene Ausgabe-Medien (Bildschirm, Druck, PDA/Mobil u.w.) zu definieren und so in den einzelnen Ausgaben bessere Ergebnisse zu erhalten (im Ausdruck stören Hintergrundbilder, mobile Geräte haben meist keine so grossen Bildschirme u.s.w.).
  • Fehlerhafte Darstellungen von Browseren (an erster Stelle sei hier der IE – Internet Explorer von Microsoft genannt) können korrigiert werden.
  • Grafische Effekte können (teilweise) ohne Bilder erzielt werden und sind somit barrierefrei.
  • und vieles mehr …

CSS gilt heutzutage als die Standard-Stylesheetsprache für das Web.

Das folgende Beispiel zeigt, mit wie wenigen Elementen eine Seite aufgebaut werden kann:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS - Cascading Style Sheets</title>
<link rel="stylesheet" href="template.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
	#page { background: url("Pfad zum Bild/bgwide.jpg") repeat-y top; }
</style>
</head>
<body>
<div id="page">
  <div id="header">
    <div id="headerimg">
      <h2><a href="http://www.premium-hosting-24.de/">Premium Hosting 24</a></h2>
      <div class="description">Suchmaschinen-Optimierung und Webhosting</div>
    </div>
  </div>
  <hr />
  <div id="content" class="widecolumn">
    <div class="navigation">
      <div class="alignleft">&laquo;
        <a href="/css-cascading-style-sheets/">
        zur&uuml;ck zum Artikel</a>
      </div>
      <div class="alignright"></div>
    </div>
    <div class="post" id="post-100">
      <h1>CSS - Cascading Style Sheets</h1>
      <div class="entrytext">
        <p>Eine Demonstration, mit wie wenigen Elemente eine
             komplette Seite projektweit designed werden kann...</p>
      </div>
    </div>
  </div>
  <hr />
  <div id="footer">
    <p><a href="http://www.premium-hosting-24.de/">Home</a></p>
  </div>
</div>
</body>
</html>

CSS - Cascading Style Sheets Demonstration
Der Screen-Shoot der Seite wird vielleicht irgendwann veraltet sein (falls sich das Design von Premium Hosting ändern wird), die Demo-Seite wird sich aber dank der Formatierung via CSS immer an das aktuelle Design anpassen…

Das wohl beeindruckenste Beispiel, was mittels CSS alles möglich ist, finden Sie auf der Seite von CSS-Zen-Garten.

Hinterlassen Sie einen Kommentar

Text-Formatierung: Sie können diese XHTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> benutzen.

Comments links could be nofollow free.