CODEWITHSUNDEEP
htmlcss
ilhan
ilhan

Reputation: 8965

CSS, DIV and H1

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"?

Upvotes: 4

Views: 10532

Answers (4)

user2260278
user2260278

Reputation: 11

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

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

and in your css

h1.specialH1 (
/* style attributes */
)

I think thats a clean solution, and gives you full control, whilst not having to alter or reset your default h tags.
It also avoids using any selector increasing type black magic witchcraft xD

Anyways... Just my opinion... Hope this helps anybody

Upvotes: 1

David Thomas
David Thomas

Reputation: 253338

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

Upvotes: 3

grossvogel
grossvogel

Reputation: 6782

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.

Upvotes: 4

Sampson
Sampson

Reputation: 268374

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.

Upvotes: 5

Related Questions