External CSS Example
= Index DOT Css by Brian Wilson =

  Main Index | Property Index | CSS Support History | Browser History  
Example | Analysis

Example External File: 'example.css'
  1. [Go To Analysis]       body {
                     background: black;
                     color: #80c0c0 }
  2. [Go To Analysis]       a:link { color: #ff8080 }
  3. [Go To Analysis]       a:visited { color: #ff0000 }
  4. [Go To Analysis]       a:active { color: #a05050 }
  5. [Go To Analysis]       a.case1:link { background: green }
  6. [Go To Analysis]       p:first-line { margin-left: 25px }
  7. [Go To Analysis]       div.foo:first-line {
                     font-weight: bold;
                     margin-left: 30px }
  8. [Go To Analysis]       div:first-letter {
                     font-size: x-large;
                     color: #ffffff }
  9. [Go To Analysis]       ul ul li {
                     font-size: x-large;
                     font-decoration: italic }
  10. [Go To Analysis]       h2 em { font-weight: 900 }
  11. [Go To Analysis]       h2.ex1 {
                     color: green;       /* This type of heading MUST be Green and Large! */
                     line-height: 50px;
                     font-size: 40px }
  12. [Go To Analysis]       .funkyclass {
                     font: 36pt/40pt courier;
                     font-variant: small-caps;
                     border: thick dashed blue }
  13. [Go To Analysis]       #tagid1 {
                     padding: 20px;
                     border: 20px groove #ffffff }
  14. [Go To Analysis]       .class1, #tagid2 { font-family: 'comic sans ms', fantasy; color: rgb(100%,100%,0%) }
  15. [Go To Analysis]       h1, h2, div.class5, blockquote { background: #000080 }
  16. [Go To Analysis]       p.special {
                     font: 12pt/14pt sans-serif;
                     margin: 5px 0px 2px 25px;
                     border: medium dashed #ff0000;
                     background: white url(http://www.foo.com/image.gif) repeat-x fixed top right }
  17. [Go To Analysis]       blockquote {
                     margin-left: 2cm;
                     color: #00ff00 }
  18. [Go To Analysis]       .part1 {
                     font-size: xx-large;
                     color: #808000 }
  19. [Go To Analysis]       h6 {
                     font-size: xx-small ! important;
                     color: red ! important }

Main Document: 'example.htm'
  1.       <html>
  2.       <head>
  3.              <title>Document Title</title>
  4. [Go To Analysis]       <link REL="StyleSheet" TYPE="text/css" HREF="example.css">
  5.       </head>

  6. [Go To Analysis] <body>
  7. [Go To Analysis] <h1 CLASS="funkyclass" ALIGN="center">Welcome to my home page!</h1>
  8.       <br><br>
  9. [Go To Analysis] <p>Hi there! If you are reading this then you have found my home page! Congratulations! I know it can be hard to find my pages, but I bet that you feel lucky now. Now that you are here, please take a look at my page of links to <a HREF="http://www.mysite.com/coolsites.html">cool sites</a> or sign my <a HREF="http://www.mysite.com/guestbook.html">guest book</a></p>
  10. [Go To Analysis] <div CLASS="foo"> My wonderful poetry <br> is available if you are REALLY bored. Why not give it a spin?</div>

  11. [Go To Analysis] <h2 CLASS="ex1"> The Best Poetry I <em>NEVER</em> Wrote</h2>
  12.       <ul>
  13. [Go To Analysis]           <li>'There Once Was A Man From Nantucket' - <span CLASS="class1">Anonymous</span></li>
  14. [Go To Analysis]           <li>'Cool In Fur' - <span CLASS="class1">Harry B. Foot</span></li>
  15.                   <li>And My All Time Fave:
  16.                   <ul>
  17. [Go To Analysis]                  <li> 'A Toast To My Toaster' - <span CLASS="class1">Me!</span></li>
  18.                   </ul>
  19.       </li></ul>

  20. [Go To Analysis] <blockquote>Brought to you by the letter <span ID="tagid2">&quot;H&quot;</span> and <span ID="tagid1">Joe Shmoe</span> </blockquote>

  21. [Go To Analysis] <div CLASS="class5"> When you are done looking through these masterpieces, I encourage you to visit my proud sponsor!! </div>

  22. [Go To Analysis] <p CLASS="special"><span CLASS="funkyclass">ADVERTISEMENT:</span> Buy Navel Lint Contemplator! Its a browser and its a sandwich spread! Go to our <a HREF="http://www.navellint.com">home page</a> without delay! Why? Because shelf life is only 8 hours unless refrigerated. We know that makes it hard to browse, but it promotes frequent upgrading to the latest and greatest version. </p>

  23. [Go To Analysis] <h6>All standard disclaimers apply. Your life depends on NOT copying this document in any way. This tape will <a HREF="http://www.mysite.com/selfdestruct.html" CLASS="case1">self destruct</a> in 10 seconds...</h6>

  24.       </body>
  25.       </html>

Boring Copyright Stuff....