gistfile1.htm

<!-- Old way: .themeContent has styles directly attached to it -->
<style type="text/css" media="screen">
    .themeContent {
        margin-top: 300px;
        width: 760px;
        border: 1px solid #ff0066;
    }
    .themeContent h1  { ... }
    .themeContent p   { ... }
</style>

<div class="themeContent">
  <h1>{{ page.title }}</h1>
  {{ page.content }}
</div>


<!-- New way: .themeContent has no styles, they've been moved to .themeContainer  -->
<style type="text/css" media="screen">
    .themeContainer {
        margin-top: 300px;
        width: 760px;
        border: 1px solid #ff0066;
    }
    .themeContent h1  { ... } /* These styles stay the same */
    .themeContent p   { ... }
</style>

<div class="themeContainer">
  <div class="themeContent">
    <h1>{{ page.title }}</h1>
    {{ page.content }}
  </div>
</div>