Examples

  • Revision slug: Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples
  • Revision title: Examples
  • Revision id: 69769
  • Created:
  • Creator: Mathieu Deaudelin
  • Is current revision? No
  • Comment

Revision 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

  • Create the file with the appropriate extension (html, xml, xhtml).
  • Ideally, put it on a web server and you are done.
  • Please note that examples 4 to 6 (using CSS rules in external files) require a file named style.css to be present 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 <tt>style</tt> and <tt>script</tt>"

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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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="http://validator.w3.org/check/referer"><img
    src="http://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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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 <tt>style</tt> within comments"

Example 1

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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="http://validator.w3.org/check/referer"><img
        src="http://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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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="http://validator.w3.org/check/referer"><img
        src="http://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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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="http://validator.w3.org/check/referer"><img
        src="http://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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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" />
  </style>
</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="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Back to the article

Example 5

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Back to the article

Example 6

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

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;}

Revision Source

<p>
</p><p>This page contains the source code of the examples related to the "<a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents">Properly Using CSS and JavaScript in XHTML Documents</a>" article.
</p><p>Please refer to the <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents#Examples">article</a> to learn more about these examples.
</p><p>If you wish to test these examples by yourself
</p>
<ul><li> Create the file with the appropriate extension (html, xml, xhtml).
</li><li> Ideally, put it on a web server and you are done.
</li><li> Please note that examples 4 to 6 (using CSS rules in external files) require a file named <a href="#Stylesheet">style.css</a> to be present in the same directory as the example. You can get the contents of <a href="#Stylesheet">style.css</a> at the bottom of this page.
</li></ul>
<h3 name="Examples_for_.22Problems_with_Inline_style_and_script.22"> Examples for "<a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents#Problems_with_Inline_style_and_script">Problems with Inline <tt>style</tt> and <tt>script</tt></a>" </h3>
<h4 name="Problem_1"> Problem 1 </h4>
<pre>&lt;!-- This file should have a .xhtml extension
     and will generate an error when parsed. --&gt;

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

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

  &lt;p&gt;
  This document is valid XHTML 1.0 Strict served as
  &lt;code&gt;application/xhtml+xml&lt;/code&gt;.
  &lt;/p&gt;

  &lt;p&gt;
  This document contains inline CSS rules contained in a
  &lt;code&gt;style&lt;/code&gt; element and surrounded by a Comment
  and JavaScript contained in a &lt;code&gt;script&lt;/code&gt; element
  and surrounded by a Comment.
  &lt;/p&gt;

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

  &lt;p&gt;
  &lt;a href="http://validator.w3.org/check/referer"&gt;&lt;img
    src="http://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0!" height="31" width="88" /&gt;&lt;/a&gt;
  &lt;/p&gt; 
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents#Use_of_Comments_Inside_Inline_style_and_script">Back to the article</a>
</p>
<h4 name="Problem_3"> Problem 3 </h4>
<pre>&lt;!-- This file should have a .xhtml extension
     and will generate an error when parsed. --&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"&gt;
&lt;head&gt;
  &lt;title&gt;Problem 3 - Comments in XML&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /&gt;
  &lt;script type="text/javascript"&gt;
   var i;
   var sum = 0;
 
   for (i = 10; i &gt; 0; --i)
   {
     sum += i;
   }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Problem 3 - Comments in XHTML&lt;/h1&gt;
  &lt;p&gt;
   This document is not well formed XHTML due to the double dash
   contained in the Comment.
  &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents#Inline_style_and_script_Containing_Double_Dashes">Back to the article</a>
</p>
<h3 name="Examples_for_.22Using_CSS_rules_in_inline_style_within_comments.22"> Examples for "<a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents#Using_CSS_rules_in_inline_style_within_comments">Using CSS rules in inline <tt>style</tt> within comments</a>" </h3>
<h4 name="Example_1"> Example 1 </h4>
<pre>&lt;!-- This file should have a .html extension --&gt;

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

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

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

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

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"&gt;
&lt;head&gt;
  &lt;title&gt;Example 5 - XHTML 1.0 Strict as text/xml&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/xml; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Example 5 - XHTML 1.0 Strict as text/xml&lt;/h1&gt;
  &lt;p&gt;
   This document is valid XHTML 1.0 Strict served as
   &lt;code&gt;text/xml&lt;/code&gt;.
  &lt;/p&gt;
 
  &lt;p&gt;
  This document references CSS rules contained in an external
  stylesheet via &lt;code&gt;link&lt;/code&gt;.
  &lt;/p&gt;
 
  &lt;p&gt;
  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.
  &lt;/p&gt;
 
  &lt;p&gt;
    &lt;a href="http://validator.w3.org/check/referer"&gt;&lt;img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /&gt;&lt;/a&gt;
  &lt;/p&gt;
 
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents#Using_CSS_rules_in_external_file">Back to the article</a>
</p>
<h4 name="Example_6"> Example 6 </h4>
<pre>&lt;!-- This file should have a .xhtml extension --&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"&gt;
&lt;head&gt;
  &lt;title&gt;Example 6 - XHTML 1.0 Strict as application/xhtml+xml&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Example 6 - XHTML 1.0 Strict as application/xhtml+xml&lt;/h1&gt;
  &lt;p&gt;
   This document is valid XHTML 1.0 Strict served as
   &lt;code&gt;application/xhtml+xml&lt;/code&gt;.
  &lt;/p&gt;
 
  &lt;p&gt;
  This document references CSS rules contained in an external
  stylesheet via &lt;code&gt;link&lt;/code&gt;.
  &lt;/p&gt;
 
  &lt;p&gt;
  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.
  &lt;/p&gt;
 
  &lt;p&gt;
    &lt;a href="http://validator.w3.org/check/referer"&gt;&lt;img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /&gt;&lt;/a&gt;
  &lt;/p&gt;
 
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents#Using_CSS_rules_in_external_file">Back to the article</a>
</p>
<h4 name="Stylesheet"> Stylesheet </h4>
<pre>/*
 * 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;}
</pre>
Revert to this revision