style sheet issue

Question

When I add text to my web page using my text editor it display styles correctly inside the text editor which basically is a iframe. After this data is saved it's displayed on another page where the issue occurs. I wanted the description section on my web page to use its own style without getting overwritten by the page styles.

Do i need to use a iframe to display this data? Is there a way I can prevent a block from using the page style.

Please advise.

Appreciate all your help.

Answer 1

CSS works by applying the rules that apply to elements in order from the ones that most generally target the element to the ones that most specifically target the element. So you could add rules referencing the container for the description part and resetting the styles that are being applied that you don't like. For instance, with these rules:

p
{
    color: red;
}
#description p
{
    color: blue;
}

...all paragraphs on the page will have red text except paragraphs inside the element with the id "description," which will have blue text (provided the text isn't styled by other elements with other rules). This is because the first rule is quite general, the second rule is more specific and so overrides the first rule.

It doesn't have to be a container with an ID, just anything that makes the rule more specifically aimed at the description content. For instance, if the description container doesn't have an ID but does have a class, you just change the second rule accordingly:

.description p
{
    color: blue;
}

Any paragraph in any element with the class "description" will now have blue text.

Unfortunately, I don't believe there's a style for "just ignore everything except this rule" and so you have to override the styles you don't want individually. For the whole-hog approach, you'd need an iframe as you suggested.

Answer 2

The reason this happens is because the iframe isn't using the same style sheet that your website uses. With TinyMCE you can set it to use your page's style sheet so that the WYSIWYG editor mirrors your site's look.

Answer 3

if you're defining things generally, you usually don't want to "ignore every other rule" which leaves things to end-user default.

however, you give everything else a class and leave this one with its own styling. it's quite a bit of extra work for yourself, though. you're probably better off redefining what you want to and leaving everything else consistent with the rest of the page.