1

I have a HTML header template with its own style sheet. This HTML code is complex, it contains menu's, different blocks and other floating elements. The CSS file contains styles from whole website. It total 800 selectors.

When I just include the HTML and the CSS in my existing website, it breaks. This is due the fact that a lot of CSS rules are interfering with the rules of the website. For example CSS from the header template has a selector with name ".nav" and the website has that too. Because both of them have different rules, the website breaks.

My question is how do I 'include' this HTML file in an existing website without complete recoding.

I though the following: process the styles from the template and give each a unique name. So every '#body' becomes "#body-1", every ".nav" bocomes ".nav-1", etc. Doing this by hand will take a while.

Is there a tool which could do this?

DwB
  • 37,124
  • 11
  • 56
  • 82
ddofborg
  • 2,028
  • 5
  • 21
  • 34
  • find and replace in whatever you favorite editior is? Otherwise a bash/bat script to search the files and replace? – Cubed Eye Oct 15 '11 at 12:57

1 Answers1

2

Use what I call "CSS Namespacing".

Change the CSS rules for the new page such that they are contextual to an ID or class.

For example, take this:

.nav // nav for new page
{
  blah: blah;
}

and make it this:

#NewyThingy .nav
{
  blah: blah;
}

And surround the newly included page in div with id="NewyThingy".

Or

.NewyThingy .nav
{
  blah: blah:
}

and change the body tag of the newly include page to have class="NewyThingy".

DwB
  • 37,124
  • 11
  • 56
  • 82
  • a rose by any other name turns out to still be a rose. Be honest about what you're suggesting, which is a higher-specificity selector using a common id. – zzzzBov Oct 15 '11 at 13:45
  • Much better than "css namespacing," I agree. – DwB Oct 15 '11 at 13:49
  • zzzzBov, what do you mean? I tried the DwB solution, but it's not working completely :( – ddofborg Oct 15 '11 at 14:05
  • I found this tool, which makes all CSS inline: http://www.pelagodesign.com/sidecar/emogrifier/ It worked like a charm. The HTML is a bit bigger, but that's OK for now. – ddofborg Oct 15 '11 at 14:23