Question

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 stylesheet (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.

Answer 1

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