cssRule-Beispiel:

Text A
Text B
Text C

Der HTML-Code:

<div>
 <span class="aStil">Text A</span><br>
 <span class="bStil">Text B</span><br>
 <span id="cStil"   >Text C</span><br>
</div>

Die eingebundenen Test-Stylesheets:

<style type="text/css"><!--

/* 1. Stylesheet (Nr.0), gültig für alle Medien */
      
 p          { text-align: center; }
 .left img  { border:0; float:left; }
 .right img { border:0; float:left; }
 div        { color: black; background-color: #CCC; text-align: center; }
 .aStil     { font-size: 2em; font-weight: bold; }

--></style>


<style type="text/css" media="screen"><!--

 /* 2. Stylesheet (Nr.1), gültig für Bildschirm */
      
 /* Die Stile dieses Klassen-Selektors ".bStil" werden ... */
 .bStil { color: silver; background-color: green; }
 /* ... durch diesen nachfolgenden bereits überschrieben */
 .bStil { color: red; background-color: blue; }
 
 /* Ein (noch) unbenutzter ID-Selektor (mit Dummy-Wert für Konqueror) */
 #cStil { opacity: 1; }

--></style>


<!-- 3. Stylesheet (Nr.2), gültig für Handhelds - ohne
 Zugriffsmöglichkeit, da eingebunden von fremder Domain!
 Im Gegensatz zu anderen Browsern, ist es sogar *nicht*
 in der StyleSheet-Collection von älteren Konqueror/Safari! -->
<link rel="stylesheet" type="text/css" media="handheld"
      href="http://www.binon.net.de/screen.css">


<style type="text/css" media="print"><!--

 /* 4. Stylesheet (Nr.3 - alte Safaris:2), gültig für Drucker */

 button { display: none; }
 .bStil { color: black; background-color: white; }

 /* Ein (noch) unbenutzter ID-Selektor (mit Dummy-Wert für Konqueror) */
 #cStil { opacity: 1; }

--></style>


<!-- 5. Stylesheet (Nr.4 - alte Safaris:3), gültig für alle Medien - Inhalt:
     html, body { margin: 0; padding: 0px;
                  color: rgb(0,0,0); background-color: #FFFFFF; } -->
<link rel="stylesheet" type="text/css"
      href="cr_test.css">

Valid HTML 4.01 Strict
Erzwinge Parser:
XHTML 1.1
(X)HTML
HTML 4.01
Nur Text
Zeige Quelltext:
XHTML 1.1
(X)HTML
HTML 4.01
PHP-Script

Zu Testzwecken wurde dieses Dokument in XHTML 1.1 codiert!

An Clients, die den XHTML-Mime-Type application/xhtml+xml im Accept-Header senden (z.B. Firefox, Safari, Opera >=7), wird das Dokument im Original (als "echtes" XHTML) mittels eines PHP-Scripts durchgereicht, und vom XML-Parser des Browsers verarbeitet. Andernfalls (z.B. IE <9) werden die XHTML-Elemente entfernt, ein HTML-Doctype ergänzt, das Dokument als HTML gesendet (Mime-Type text/html), und vom HTML-Parser des Browser verarbeitet.

This document has been coded in XHTML 1.1 for test purposes!

To clients sending the XHTML mime-type accept-header application/xhtml+xml (i.e. Firefox, Safari, Opera >=7), it will be passed through a PHP script as it is (as "real" XHTML) and parsed by the XML parser of the browser. Otherwise (i.e. IE <9) the XHTML elements will be removed, a HTML doctype will be added, the document will be sent as HTML (mime-type text/html) to be parsed by the HTML parser of the browser.

Valid XHTML 1.1
Force parser:
XHTML 1.1
(X)HTML
HTML 4.01
Text only
Show source:
XHTML 1.1
(X)HTML
HTML 4.01
PHP script
Dieses Dokument wurde von ihrem Browser verarbeitet als/This document was parsed by your browser as:
XHTML 1.1 (W3C-Validator)