Question

I am creating a custom page for a dynamic site and I was wondering if there was a way to block the Default CSS (of the overall site) from affecting my custom page. Nowhere on my custom page do I call up the default .css but I DO link to my custom .css for the particular page I am working on. Some of the .css is picked up from MY CSS, while other parts are altered by the CSS for the existing site. I didn’t know if there was some way to ensure that a page only answers to ONE .css page. I basically want to BLOCK the Default style sheet from affecting my custom page. I hope this isn’t too wordy and confusing of a question! Thank you!

Answer 1

You basically have two options. One is to just download their default CSS stylesheet, make a copy of it, and for each and every style they have defined, reset it to the auto value or whatever value works for your site’s design. This will be extremely tedious, and won’t work if they update their stylesheet, but should work.

Another option would be to use javascript to remove the stylesheet’s association with the page. As long as the URL of the stylesheet you want to remove remains constant, you should be able to do this. A quick google search found the following code to do this:

function removejscssfile(filename, filetype){
 var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
 var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
 var allsuspects=document.getElementsByTagName(targetelement)
 for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
  if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
   allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
 }
}

removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page

Essentially, what this does is it searches the page for any stylesheets, then checks their location, and if it matches what you want to remove, removes that stylesheet. The script I found also works for javascript files.