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.