Ignore included stylesheet - css

Question

I am building a website using a template, which have an stylesheet but it keeps interfering with things I add like Google Maps or other custom things in my website. How can I make the tag
<div id="map_canvas"></div>
not inherit any styles from the stylesheet, so it would only have a height and width.
I am forced to put it at the very end of the document, then use margin-top: -400px and margin-left: 350px to position it.

Answer 1

Try not inheriting this page from the main page where all other CSS are loaded.
Load only CSS file, that you want to apply it to this page.

Answer 2

Use a class on top of your div. For example, if you have a div for google maps the css that you need would look like:
#map_canvas.classNameHere{
position:absolute;
height: whatever you want;
left: whatever you want
width:whatever you want;
}
You define the div, then put .classNameHere or whatever you want the class name to be. Then, in the html, you would tell the stylesheet that this div is part of that class.
<div id="map_canvas" class="classNameHere">
that way, this div will only take the attributes from the defined div in the stylesheet with .classNameHere after the name of the div. If this didn't answer your question, or I misinterpreted it, let me know. Your question is a little bit ambiguous. I don't really know what you already have or what exactly is interfering with it. If it is another div with the same name, then this will probably work. If it is a stylesheet that is constant throughout the whole website, then you really should have a stylesheet for each page, but it will work as long as you make the div with the class a completely new div for each page, so you will have say 4 definitions of the div, each with a different class name. If it is an overall definition such as
*{stuff here;}
then I forget if the class will help. It may just be safer overall to take what is in the
*{stuff here;}
and add it to each div that you want individually.
If you need more help about classes, check out http://thenewboston.org/watch.php?cat=43&number=5 It's a tutorial on this from thenewboston.org. If you need to, start with the beginning of the videos it's only a couple into this set. (It's in the HTML5 tutorials)
If you're having problems positioning it where you want it, you may want to try to put it inside another div. For example, if you wanted it in the sidebar, you would have this CSS for the sidebar
#sidebar{
position:absolute;
left:70%;
top:20%;
}
and the same CSS above for your div, then your HTML would look like this.
<div id="sidebar">
sidebar content here
<div id="map_canvas" class="classNameHere">
any code you need for google maps here.
</div>
</div>
2 more things. First, you should use percentages instead of pixels, so that it will fit on any size screen, unless you're padding the website on each side so that it is all centered. Also, I read your bio on your profile and I'm in the same boat as you. I'm just teenager who likes to code, and we all get confused, so if you need me to explain it more, or I misunderstood your question, let me know.