title: Is it possible to include html fragments using css?
body: <p>I am working on a (very, very large) set of static webpages that essentially consist of three parts: a top part that is the same on each page (logos,  etc), a middle part that contains the actual content, and a bottom part that is also the same on on each page (think of a footer).</p>
  
  <p>To keep the code of the individual html pages lean i would really like to include the header/footer part using css (although i am not sure if this is possible). That is, i would like to have lean html files like</p>
  
  <pre><code> &lt;html&gt;
    &lt;head&gt;
      &lt;link href="main.css" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
     &lt;div id="header" /&gt;
     &lt;div id="content"&gt;Some content goes here&lt;/div&gt;
     &lt;div id="footer" /&gt;
    &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>and let a single css file define the content and layout of header and footer. <strong>Is this possible using only html and css?</strong> (For several reasons i don't want to use any scripting language.)</p>
  
  <p>I tried to use the :before/:after pseudo elements but this has failed since the value of the content attribute has alway been taken literally, i.e.,</p>
  
  <pre><code>#header:after{ content:"&lt;a href=\".\"&gt;XXX&lt;/a&gt;"; }
  </code></pre>
  
  <p>results in the text</p>
  
  <pre><code>&lt;a href="."&gt;XXX&lt;/a&gt;
  </code></pre>
  
  <p>and not in a link on the text XXX.</p>
  
  <hr>
  
  <p><strong>Edit:</strong> Thanks for your answers so far. I am totally fine with accepting that this is not the intended way of using CSS, but is someone able to explain to me why this is impossible from a technical viewpoint?</p>
  
  <p>(Also, just to clarify, the code above is just a sketch. There is way more (semantically meaningful) content involved, and there are also several different repeating parts and not just a header and a footer.)</p>