Sandboxing Google Custom Search Engine's Styles

Question

I'm trying to incorporate Google CSE into my web site. The search works fine. I'm using Nijhof's ASP.NET Google CSE search control on a page in a site using a Master Page. The problem is Google's style's affecting not just the Google search results on the page but also other elements on the page such as my navigation. Google injects the styles below that are affecting the other elements on the page:

body, td, div, .p, a {Search.a...chStr=mmm (line 278)
font-family:arial,sans-serif;
}
div, td, .n a, .n a:visited {Search.a...chStr=mmm (line 278)
color:#000000;
}

I'd appreciate any help on how to sandbox the search styles. Thanks!

Answer 1

A slightly 'hacky' way of over-ruling the Google styles would be to use the !Important tag on your own styling.

Answer 2

If your own styles use an ID element to select they will get precedence over the Google rules.

For example, use a div with the id of 'container' around the code.

Then use CSS rules which begin with #container to gain the precedence.