Examples

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

Revision Content

Unfortunately, examples are only available as source code. Please refer to the article to learn the details of 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 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.

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

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

Back to the article

Example 6

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

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>Unfortunately, examples are only available as source code.
Please refer to the <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents#Examples">article</a> to learn the details of 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 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="Example_1"> Example 1</h3>
<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>
<h3 name="Example_2"> Example 2 </h3>
<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>
<h3 name="Example_3"> Example 3 </h3>
<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="Example_4"> Example 4 </h3>
<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>
<h3 name="Example_5"> Example 5 </h3>
<pre>&lt;!-- This file should have a .xml extension --&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>
<h3 name="Example_6"> Example 6 </h3>
<pre>&lt;!-- This file should have a .xhtml extension --&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>
<h3 name="Stylesheet"> Stylesheet </h3>
<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