<!DOCTYPE html> <html>

<head>
        <link rel="stylesheet" href="index.css" type="text/css" media="screen" />

        <script src="jquery-1.6.min.js" type="text/javascript"></script>
        <script src="../dist/jquery.syntax.js" type="text/javascript"></script>
        <script src="../dist/jquery.syntax.cache.js" type="text/javascript"></script>

        <script type="text/javascript">
                jQuery(function($) {
                        $.syntax();
                });
        </script>

</head>
<body>
        <h1>Syntax: CSS</h1>

        <h2>Special Example</h2>

        <p>This example extracts definitions and creates example elements on the right hand side.</p>

        <pre><code class="syntax brush-css">

p {

background-color: #ccc;
border: 1px solid black;

}

/* The way this information is extracted isn't that great, but as long as the CSS is kept simple, it is fine for demonstration purposes */

h1 {

color: #cfcfcf;
background-color: red;
border: 1px solid green;

padding: 10px;

}

h2 {

color: PaleGoldenRod;
text-shadow: 0.1em 0.1em 5px #333;

border-color:#ff0000 #0000ff;

}

        </code></pre>
</body>

</html>