Is it possible to exclude all css styling for one specific div container?

Question

I'm having problems using font-face on my website. I can get it working when testing it on a html file with it's own styling, but not if I include other style sheets.

I've tried overriding stles, placing style sheets in different order and so on, but nothing works.

So I'm wondering, is it possible to exclude all CSS and only use css from one css file for a specific div container?

(Without using iframe)

Answer 1

Unfortunately no, it's not possible to just clear or reset the styles for a specific container from the css it's inherited. You have to override each style that you want manually.

What you can do is you could namespace your classes and all you'd have to worry about would be element styles that you could define with defaults at the beginning of your style sheet. For example, something like:

div,table,span,img,p{
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    line-height: 1;
    font-family: inherit;
    text-align: left;
}

You can of course add !important to ones that you need and add more elements to the list. If you can't trust or don't know the other styles that are going to be loaded and applied to your page, I find it's best to just start with an empty slate.