Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Archive of obsolete content

This page contains the source code of the examples related to the "Properly Using CSS and JavaScript in XHTML Documents" article.

Please refer to the article to learn more about these examples.

If you wish to test these examples by yourself, please read the Important Notes.

Important Notes

If you plan to test these examples by yourself, you must use the right filename extension (it is written at the beginning of the code). Ideally, upload the file to a web server and you're done.

Please note that the examples 4, 5 and 6 require a file named style.css to exist in the same directory as the example. You can get the contents of style.css at the bottom of this page.

Examples for "Problems with Inline style and script"

Problem 1

<!-- This file should have a .xhtml extension
     and will generate an error when parsed. -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
  <title>Problem 1 - &lt; in XHTML</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <script type="text/javascript">
   var i = 0;
 
   while (++i > 10)
   {
     // ...
   }
  </script>
</head>
<body>
  <h1>Problem 1 - &lt; in XHTML</h1>
  <p>
   This document is not well formed due to the use of a raw &lt;.
  </p>
</body>
</html>

Back to the article

Problem 2

<!-- This file should have a .xhtml extension -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
  <title>Problem 2 - Comments in XHTML</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <style type="text/css">
   <!--
    body {background-color: blue; color: yellow; }
   -->
  </style>
  <script type="text/javascript">
   <!--
   var i = 0;
   var sum = 0;
 
   for (i = 0; i < 10; ++i)
   {
     sum += i;
   }
   alert('sum = ' + sum);
   // -->
  </script>
</head>
<body>
  <h1>Problem 2 - Comments in XHTML</h1>

  <p>
  This document is valid XHTML 1.0 Strict served as
  <code>application/xhtml+xml</code>.
  </p>

  <p>
  This document contains inline CSS rules contained in a
  <code>style</code> element and surrounded by a Comment
  and JavaScript contained in a <code>script</code> element
  and surrounded by a Comment.
  </p>

  <dl>
  <dt>Mozilla 1.1+/Opera 7</dt>
  <dd>Do not apply CSS or execute the JavaScript.</dd>
  <dt>Netscape 7.0x/Mozilla 1.0.x</dt>
  <dd>Do not apply CSS but does execute the JavaScript.</dd>
  <dt>Internet Explorer 5.5+</dt>
  <dd>Can not display the document.</dd>
  </dl>

  <p>
  <a href="https://validator.w3.org/check/referer"><img
    src="https://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p> 
</body>
</html>

Back to the article

Problem 3

<!-- This file should have a .xhtml extension
     and will generate an error when parsed. -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
  <title>Problem 3 - Comments in XML</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <script type="text/javascript">
   var i;
   var sum = 0;
 
   for (i = 10; i > 0; --i)
   {
     sum += i;
   }
  </script>
</head>
<body>
  <h1>Problem 3 - Comments in XHTML</h1>
  <p>
   This document is not well formed XHTML due to the double dash
   contained in the Comment.
  </p>
</body>
</html>

Back to the article

Examples for "Using CSS rules in inline style within comments"

Example 1

<!-- This file should have a .html extension -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
  <title>Example 1 - XHTML 1.0 Strict as text/html</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <style type="text/css">
   <!--
    body { padding-top: 8em; }
    html { color: #fff; background: #000 no-repeat fixed;} 
    p {width: 30em; font-weight: bold;}
   -->
  </style>
</head>
<body>
  <h1>Example 1 - XHTML 1.0 Strict as text/html</h1>
  <p>
   This document is valid XHTML 1.0 Strict served as
   <code>text/html</code>.
  </p>
 
  <p>
  This document contains inline CSS rules contained in a <code>style</code>
  element and surrounded by a SGML Comment.
  </p>
 
  <p>
  Note how the CSS rules for the background are applied in Netscape 7.x,
  Mozilla, Opera 7 and Internet Explorer 5.5+.
  </p>
 
  <p>
    <a href="https://validator.w3.org/check/referer"><img
        src="https://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Back to the article

Example 2

<!-- This file should have a .xml extension -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
  <title>Example 2 - XHTML 1.0 Strict as text/xml</title>
  <meta http-equiv="Content-Type" content="text/xml; charset=utf-8" />
  <style type="text/css">
   <!--
    body { padding-top: 8em; }
    html { color: #fff; background: #000 no-repeat fixed;} 
    p {width: 30em; font-weight: bold;}
   -->
  </style>
</head>
<body>
  <h1>Example 2 - XHTML 1.0 Strict as text/xml</h1>
  <p>
   This document is valid XHTML 1.0 Strict served as
   <code>text/xml</code>.
  </p>
 
  <p>
  This document contains inline CSS rules contained in a <code>style</code>
  element and surrounded by a SGML Comment.
  </p>
 
  <p>
  Note how the CSS rules for the background are <strong>not</strong>
  applied in Netscape 7.x, Mozilla and Opera 7 and that
  Internet Explorer 5.5+ can not display the page correctly at all.
  </p>
 
  <p>
    <a href="https://validator.w3.org/check/referer"><img
        src="https://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Back to the article

Example 3

<!-- This file should have a .xhtml extension -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
  <title>Example 3 - XHTML 1.0 Strict as application/xhtml+xml</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <style type="text/css">
   <!--
    body { padding-top: 8em; }
    html { color: #fff; background: #000 no-repeat fixed;} 
    p {width: 30em; font-weight: bold;}
   -->
  </style>
</head>
<body>
  <h1>Example 3 - XHTML 1.0 Strict as application/xhtml+xml</h1>
  <p>
   This document is valid XHTML 1.0 Strict served as
   <code>application/xhtml+xml</code>.
  </p>
 
  <p>
  This document contains inline CSS rules contained in a <code>style</code>
  element and surrounded by a SGML Comment.
  </p>
 
  <p>
  Note how the CSS rules for the background are <strong>not</strong>
  applied in Netscape 7.x, Mozilla and Opera 7 and that
  Internet Explorer 5.5+ can not display the page correctly at all.
  </p>
 
  <p>
    <a href="https://validator.w3.org/check/referer"><img
        src="https://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Back to the article

Examples for "Using CSS rules in external file"

Example 4

<!-- This file should have a .html extension -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
  <title>Example 4 - XHTML 1.0 Strict as text/html</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>Example 4 - XHTML 1.0 Strict as text/html</h1>
  <p>
   This document is valid XHTML 1.0 Strict served as
   <code>text/html</code>.
  </p>
 
  <p>
  This document references CSS rules contained in an external
  stylesheet via <code>link</code>.
  </p>
 
  <p>
  Note how the CSS rules for the background are applied in Netscape 7.x,
  Mozilla, Opera 7 and Internet Explorer 5.5+.
  </p>
 
  <p>
    <a href="https://validator.w3.org/check/referer"><img
        src="https://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Before testing this example by yourself, please read this.

Back to the article

Example 5

<!-- This file should have a .xml extension -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
  <title>Example 5 - XHTML 1.0 Strict as text/xml</title>
  <meta http-equiv="Content-Type" content="text/xml; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  </style>
</head>
<body>
  <h1>Example 5 - XHTML 1.0 Strict as text/xml</h1>
  <p>
   This document is valid XHTML 1.0 Strict served as
   <code>text/xml</code>.
  </p>
 
  <p>
  This document references CSS rules contained in an external
  stylesheet via <code>link</code>.
  </p>
 
  <p>
  Note how the CSS rules for the background are applied in Netscape 7.x,
  Mozilla, Opera 7 but that Internet Explorer can not display the page at all.
  </p>
 
  <p>
    <a href="https://validator.w3.org/check/referer"><img
        src="https://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Before testing this example by yourself, please read this.

Back to the article

Example 6

<!-- This file should have a .xhtml extension -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
  <title>Example 6 - XHTML 1.0 Strict as application/xhtml+xml</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  </style>
</head>
<body>
  <h1>Example 6 - XHTML 1.0 Strict as application/xhtml+xml</h1>
  <p>
   This document is valid XHTML 1.0 Strict served as
   <code>application/xhtml+xml</code>.
  </p>
 
  <p>
  This document references CSS rules contained in an external
  stylesheet via <code>link</code>.
  </p>
 
  <p>
  Note how the CSS rules for the background are applied in Netscape 7.x,
  Mozilla, Opera 7 but that Internet Explorer can not display the page at all.
  </p>
 
  <p>
    <a href="https://validator.w3.org/check/referer"><img
        src="https://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Before testing this example by yourself, please read this.

Back to the article

Stylesheet

/*
 * If you try to view the results of these examples,
 * you will need to put a file named style.css with
 * the following content in the same directory as
 * the examples.
 */

body { padding-top: 8em; }
html { color: #fff; background: #000 no-repeat fixed;} 
p {width: 30em; font-weight: bold;}

Document Tags and Contributors

Tags: 
 Contributors to this page: jswisher, wilgoher, dhodder, George3, VooEak, Dria, Andreas Wuest, DougW, Mathieu Deaudelin
 Last updated by: jswisher,