A Gotcha When Importing Content Into a Web Page

When importing content into web pages obtained from the internet, CSS in the imported content could mess with your page design.

A client had a related question, which is why this article got written. I thought you may be interested in it, also.

Regardless where the content comes from — a script on your site, a web page on your site, content from an affiliate site URL — if the content contains CSS (other than inline CSS) it may have an effect on the styles used in your entire page.

If the content is displayed in an iframe, then the CSS of the web page and the CSS of the content in the iframe don't affect each other. An iframe keeps the content separate even though it may appear like it's part of the page.

But importing content directly into the normal flow of the web page, perhaps into a div, can indeed affect your page's CSS.

This is why.

CSS cascades. The selectors merge. During the merging, the latest declarations for a selector overwrites the value of previous declarations with the same property.

In other words, something like this can happen:

Your web page may have a rule like

h1 { font-size:18pt; color:red; }

The CSS of the imported content may have a rule like

h1 { text-align:center; color:#333; }

Because CSS cascades, the latest h1 selector merges with the previous one. During the merging, property values in the latest rule overwrite values in the earlier rule. You'll end up with

h1 { text-align:center; font-size:18pt; color:#333; }

The font size declaration wasn't in the CSS of the imported content, so that declaration carried through. But the color value changed. And the text-alignment declaration was added.

Whatever CSS rules the browser ends up with applies to the entire page.

And that's the gotcha. Whenever the browser encounters a new CSS rule (other than inline), it re-renders the entire page with the new rule.

Importing content into web pages obtained from URLs can be hazardous to your style :-)

(This article first appeared in Possibilities ezine.)

Will Bontrager