Cascading Style Sheets CSS

Cascading Style Sheets (englische für stufenförmige oder (hintereinander) geschachtelte Gestaltungsvorlagen), kurz CSS genannt, ist eine deklarative Sprache für Stilvorlagen (engl. stylesheets) von strukturierten Dokumenten. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt. Grundidee beim Entwurf von CSS war es, mittels HTML oder XML nur die inhaltliche Untergliederung eines Dokumentes und die Bedeutung seiner Teile zu beschreiben, während mittels CSS weitgehend unabhängig davon die visuelle Darstellung (Farben, Layout, Typografie usw.) der Elemente festgelegt wird.

Während zu Beginn der Entwicklung nur einfache Gestaltungsanweisungen möglich waren, wurden später komplexere Module zum Sprachstandard hinzugefügt. Diese erlauben beispielsweise die Definition von Animationen und eine Unterscheidung zwischen verschiedenen Ausgabemedien.

Mithilfe von CSS-Regeln können deshalb für jedes Element die konkreten Werte für bestimmte Darstellungsattribute festgelegt werden. Diese Festlegungen können an zentraler Stelle erfolgen, ggf. sogar in einem separaten Dokument, was ihre Wiederverwendung für andere Dokumente erleichtert.

Daneben enthält CSS ein Vererbungsmodell für Auszeichnungsattribute – deshalb cascading – das die Anzahl nötiger Definitionen vermindert. CSS ermöglicht allenfalls auch die diskretionäre Auszeichnung von Teilen eines Dokuments.

Mit CSS ist es möglich, für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) unterschiedliche Darstellungen vorzugeben. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder für Geräte mit geringerer Auflösung (zum Beispiel PDAs oder Mobiltelefone) die Anzeige mit Rücksicht auf die geringere Seitenbreite und -höhe anzupassen. CSS gilt heute als die Standard-Stylesheetsprache für Webseiten. Die früher üblichen HTML-Elemente wie font oder center sind als deprecated (veraltet) gekennzeichnet, das heißt, sie sollen in Zukunft aus dem HTML-Standard entfernt werden. Font-Tags sind in HTML 5 bereits obsolet. Grund ist die durch den Sprachstandard angestrebte Trennung zwischen reinen Inhalten und Stilangaben.

[Quelle: http://de.wikipedia.org/wiki/CSS, Stand 26.2.2014]

Beispiel:

Dies ist ein HTML-Document,

mit ein wenig Text...

... und einem Bild.

<!DOCTYPE HTML>
   <html>
      <head>
          <title>Beispielseite</title>
      </head>
      <body>
          <h4>Dies ist ein HTML-Document, </h4> 
          <p id="text">mit ein wenig Text... </p>
          <div><img id="bild" src="../Bilder/km4-tranparent.png"></div>
          <p id="bildunterschrift">...und ein Bild.</p>
      </body>
   </html>

     p.text {
        font-size: 15pt;
        color: #00FF00;
     }
     img.bild {
        border: 1px solid #000000;
     } 
     p.bildunterschrift {
        font-size: 8pt;
     }