css - how do I reset p's and div's style attributes?

Question

Hello,

I have a dynamic website with html editors for creating article content, however for some reason the p/div tags generated by the html editor are screwy on the front pages. I'm assuming this is because of css declarations from my overall website.

Here is a quick example:

<div class="custom_html_block"> 
    <div align="top"> 
        <p> test test test test test test test test test</p> 
        <p> test test test test test test test test test</p> 
        <p> test test test test test test test test test</p> 
    </div>
</div> 

What css would I need to make all elements inside the look/appear like they would on a blank html page? Can someone help me out with that?

Thanks!

Answer 1

It sounds like the default styles of your <p> tags have some styles that are being inherited by existing styles. The way to avoid this is to be very specific about these tags so you can control them individually

.custom_html_block { padding:15px 15px 0; }
.custom_html_block p { padding-bottom:15px; ) 

I would use firebug to find out what additional styles you need to specify in order to create a more "default" look

Answer 2

You could try any of a dozen reset css styles available online. Once you choose one, you'll have to edit it and prefix every tag in the sheet with ".custom_html_block" so it only applies inside your editor.

Answer 3

just overwrite the properties you previously defined, using a more specific selector and declare it after (for the cascade).

if you use a modern browser you could also use !important to overwrite the same property

Take a look to the inherited properties of you elements using a tool like the firebug, so it will easier for your to change them

Answer 4

Examine the source code of the 'problem' page. If there are element level style tags, remember that they will override any linked css stylesheets that you may have.

External CSS Stylesheets < CSS in style tag on same page < Inline CSS

is the order of importance assigned to the CSS