Is it possible to include html fragments using css?

advertisements

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).

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

 <html>
  <head>
    <link href="main.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
   <div id="header" />
   <div id="content">Some content goes here</div>
   <div id="footer" />
  </body>
 </html>

and let a single css file define the content and layout of header and footer. Is this possible using only html and css? (For several reasons i don't want to use any scripting language.)

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.,

#header:after{ content:"<a href=\".\">XXX</a>"; }

results in the text

<a href=".">XXX</a>

and not in a link on the text XXX.


Edit: 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?

(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.)


Is this possible using only html and css?

No, it is not possible. That is not at all what CSS is for. It would be a direct violation of intent of CSS.

Your HTML document should contain semantically meaningful markup. By making an empty HTML document and applying only graphical styles, you're producing incredibly useless content.

If you want to produce static HTML pages without duplicating a ton of markup across every page, use a static site generator like jekyll or nanoc or look into server-side includes.