CSS, DIV and H1

Question

I'm using a template and the titles are inside a div. I want to apply h1 to the title but it goes bad (the div is styled with css, and there is no styling for h1)

Normally this is what it is:

<div class="content-pagetitle">Title</div>

I'm changing to:

<div class="content-pagetitle"><h1>Title</h1></div>

But it goes bad.

I tryed to use the same styling content-pagetitle for h1. It didn't worked

<h1>Title</h1>

(It does not become same as content-pagetitle)

Is there a css code that says "do not apply any styling to h1"?

Answer 1

Might try removing margins and padding on the H1

h1 { margin:0; padding:0 }

I would encourage you to explore you dom (via firebug or any equivalent) and see which styles are being applied to the H1. You may need a more specified selector to apply the aforementioned rules to a particular h1 element only.

Answer 2

Browsers have default styles that attempt to reasonably display a valid HTML document, even when it has no accompanying css. This generally means that h1 elements will get extra padding, a large font size, bold font-weight, etc.

One way to deal with these is to use a reset stylesheet. That may be overkill here, so you might just want to use firebug or something to identify the specific styles you want to kill, and override them.

If you're having trouble getting your styles to override, stack more selectors to add more specificity.

Answer 3

Is there a css code to say "do not apply any styling to h1"?

Not as such, no. But...

What you could do is specify 'inherit' as the value of the h1's attributes. This is unlikely to work in all situations, though. Assuming:

div#content-pagetitle {
background-color: #fff;
color: #000;
font-size: 2em;
font-weight: bold;
}

h1 {
background-color: inherit; /* background-color would be #fff */
color: inherit; /* color would be #000 */
font-size: inherit; /* font-size would be 2*2em (so 4* the page's base font-size) */
font-weight: inherit; /* font-weight would be bold */
}

It might be possible to increase the specificity of the selector, by using:

div#content-pagetitle > h1

or

div#content-pagetitle > h1#element_id_name