css help - having two different h1 styles?

MossyUK

MossyUK

MossyUK

Associate
Joined
24 Jul 2004
Posts
1,580
Location
Preston, Lancs
Is this possible? I want for example:

generic header 1 > centered, size 32

advert block > header 1 > centered, size 24

or should i just use different headers? eg h2?

edit - also, how do you remove the amount of line spacing and so on around a header tag? For example, h1 always drops a big line break after it, making things look untidy.
 
Last edited:
You should stick to document hierarchy.

<h1> Main heading, in whatever style and h2, h3, h4 follow.

To remove unwanted spacing on every element, and set all default values to 0, allowing you to have better control over measurements, you should put:

Code: 
* {
  margin: 0px;
  padding: 0px;
}

at the top of your stylesheet.

Or just

Code: 
h1 {
  margin: 0px;
  padding: 0px;
}

if you wish to configure just the h1.
 
Last edited:
You can also modify headers by selecting which div they apply to. Say if you want different backgrounds for different headers, but their precedence (ie font size) should remain the same:

Code: 
[snip]
<h1>My Page</h1>

<div id="news">
<h2>The News</h2>
</div>

<div id="weather">
<h2>The Weather</h2>
</div>
CSS:

Code: 
div#news h2{
color: red;
}

div#weather h2{
color: green;
}
 
Indeed, if you do need to style two identical elements differently e.g. two <h2>s, you need to make use of selectors - be it with IDs, classes or descendant selectors.

And a quick note on the code posted, for 0 values the unit is unnecessary. 0px is the the same as 0em, as it is 0pt:
Code: 
* {
  margin: 0;
  padding: 0;
}
 
True, but I do it out of habit, my fingers stick px on without me thinking. Shouldn't effect anything though. Perhaps shave 0.04kb off the filesize? :p
 
iCraig said:
True, but I do it out of habit, my fingers stick px on without me thinking. Shouldn't effect anything though. Perhaps shave 0.04kb off the filesize? :p
Click to expand...
Yes but it all adds up. It's one of the simplest and cheapest good-practices to make use of when optimising - there's no tradeoff for the benefit. I see stylesheets that have lines like margin: 0px 0px 0px 0px; on many elements and dropping off a couple of bytes each time can make a worthwhile difference on a high-traffic site.

But, anyway, ems are where it's at :D.
 
Augmented said:
Yes but it all adds up. It's one of the simplest and cheapest good-practices to make use of when optimising - there's no tradeoff for the benefit. I see stylesheets that have lines like margin: 0px 0px 0px 0px; on many elements and dropping off a couple of bytes each time can make a worthwhile difference on a high-traffic site.

But, anyway, ems are where it's at :D.
Click to expand...
I havent got the jist of em's. How exactly do they work compared to px?
 
Flanders said:
I havent got the jist of em's. How exactly do they work compared to px?
Click to expand...

Em's are minature Emma named robots that control your pixels with sexy little dances and...

Anyway, em's are relative percentages to it's parent setting.

So if your body font is set to 14px;

and an element underneath, such as <p> was set to 0.8em, it would be 80% of the size of the body font.

I think that's right, someone correct me if I'm wrong.
 
Flanders said:
How exactly do they work compared to px?
Click to expand...
They don't really work any differently. The only major difference is that pixels are a discrete, fixed unit, while ems are a proportional/relative unit. 1em is supposed to be the height/width of a capital 'M' at the current font sizing, though it doesn't really work that way where computers are concerned. They're no more restricted to font-sizing that px are.

So you can use ems to create a layout that is proportional to the text it contains, scaling up and down with resizeable text.
 
Thanks, both of you, cleared it up for me :)

Next time Im starting a site from scratch, I'll have an attempt at using them rather than px.
 
Flanders said:
Next time Im starting a site from scratch, I'll have an attempt at using them rather than px.
Click to expand...
I find it's best to reach a balance between the two and how it applies to the layout. Mix'n'match. Some things are better fixed, while other parts benefit from being scalable. Right tool for the job and all that... :).

Can be quite rewarding getting a completely scalable layout that works though.
 
Augmented said:
Can be quite rewarding getting a completely scalable layout that works though.
Click to expand...

You can set image attributes to work in em aswell, I've seen images expand with the text which sometimes works, albeit a loss in quality if the image isn't optimised well.
 
You must log in or register to reply here.
Back
Top Bottom