Examples

  • Revision slug: Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples
  • Revision title: Examples
  • Revision id: 69764
  • 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.

Example 1

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

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

Example 4

Example 5

Example 6

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>
<h3 name="Example_1"> Example 1 </h3>
<pre>&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;!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>
<h3 name="Example_4"> Example 4 </h3>
<h3 name="Example_5"> Example 5 </h3>
<h3 name="Example_6"> Example 6 </h3>
Revert to this revision