CSS overriding CSS and jQuery UI

So I have a regular CSS/HTML website for my upcoming book. It has a section called Bonus Features for extra articles that I’ve written. They pop up using jQuery UI that reads from external HTML pages.

Because I want the titles and dates… i.e.

Hello World

May 6, 2011

…to be very close together, instead of your usual gap, I’ve created a separate CSS styl开发者_运维知识库esheet (dialog.css).

body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
}

h1 {
    font-weight: bold;
    margin: 0;
}

h1 + p {
    margin: 0;
}

h2 {
    margin: 0;
}

h2 + p {
    margin: 0;
}

p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 10px;
    margin-top: 0px;
}

Unfortunately, dialog.css seems to be overriding default.css (for the website) because whenever I open then close the pop-up, the text on the Bonus Features page clutters together, reading from dialog.css, until a browser refresh.

Is there a way to prevent this from happening, like a special HTML or CSS code?

Thanks.

---

It sounds like dialog.css is being loaded in the main page's scope.

if your dialog is built like this:

<div id="dialog">
    <!-- content -->
</div>

then you can make your css like this:

#dialog h1 {
    font-weight: bold;
    margin: 0;
}

and those properties will only apply to elements within an element of id #dialog

---

Sometimes, it can be as simple as minding the order that the css loads. The last one in order defined will generally take precedence. Yes, there are exceptions, but as a rule of thumb, put your most customized CSS file at the end of a series of CSS declarations, while loading things like jQuery UI's css first.

---

use firebug (or something similar) to find out how this property is set. to override this rule you need to use the same exact selectors or more powerful. thats the way CSS works and thats where the name came from.

also you may try adding !important after each rule.