CSS, DIV and H1

Question

I am using a template and the headers are inside the div . I want to apply h1 to the header, but it goes badly (the div has css style, and there is no style for h1 )

Usually this is what is:

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

I go to:

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

But this is bad.

I tried using the same content-pagetitle for h1 . It didn’t work

 <h1>Title</h1> 

(It does not become the same as content-pagetitle)

Is there any css code that says "don't apply style to h1 "?

Answer 1

You can try to remove the margins and indents on H1

 h1 { margin:0; padding:0 } 

I would advise you to examine your home (via firebug or any equivalent) and see what styles apply to H1 . You may need a more specific selector to apply the above rules only to a specific H1 element.

Answer 2

Browsers have default styles that try to intelligently display a valid HTML document, even if it does not have accompanying css. This usually means that the h1 elements will get an extra complement, large font size, bold, etc.

One way to deal with them is to use reset stylesheet . This might be redundant here, so you can just use firebug or something to define specific styles that you want to kill and override them.

If you are unable to force your styles to override, add more selectors to add more specificity .

Answer 3

Is there any css code to say "don't apply style for h1"?

Not as such, no. But...

What you can do is specify "inherit" as the value of the h1 attributes. However, this is unlikely to work in all situations. Assuming that:

 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 base font-size) */ font-weight: inherit; /* font-weight would be bold */ } 

Perhaps you can increase the specificity of the selector using:

 div#content-pagetitle > h1 

or

 div#content-pagetitle > h1#element_id_name 

Answer 4

I know this is an old post, but here is what I will do ...
define all your h tags as usual, then for a specific style do something like

 <h1 class="specialH1"> ... </h1> 

and in your css

 h1.specialH1 ( /* style attributes */ ) 

I think this is a clean solution, and gives you full control, and not change or reset the default h tags.
He also avoids the use of any selector that increases the type of black magic witchcraft xD

In any case ... Just my opinion ... I hope this helps someone.