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 extension (it is written a 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 <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 - < 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 - < in XHTML</h1>
<p>
This document is not well formed due to the use of a raw <.
</p>
</body>
</html>
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>
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>
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>
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>
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>
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" />
</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>
Before testing this example by yourself, please read this.
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>
Before testing this example by yourself, please read this.
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>
Before testing this example by yourself, please read this.
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;}