14 replies [Last post]
tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 9 years 1 week ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I seem to have found a partial answer in searching for my question - my question is this:

When I create these styles:

h1,h2,h3,h4,h5,h6 {
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {
font: normal 140% Verdana, Arial, Helvetica, sans-serif;
color: #003399;
margin: 0px;
padding: 0px;
}

.................................

Do I have to define all the other H's (H2...H6)? Or is it based relative to my H1 definition?

Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The <h> element - define all or just <h1>?

:? really not sure what you mean here. You have declared a grouped set of styles for your h# elements, the specific h1 styling is for that element alone, the font property is next to pointless as you have not changed the font-style from normal in the first place and the family has not changed so no point re-stating them.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 40 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: The <h> element - define all or just <h1>?

tiger2808 wrote:
IWhen I create these styles:
h1,h2,h3,h4,h5,h6 {}
h1 {}
Do I have to define all the other H's (H2...H6)? Or is it based relative to my H1 definition?


<h1> through <h6> are independant xhtml elements. There is no <h> element (though you could define one in xml of course). If you want to style all the header elements at once you use the comma delimited list as in your first example above.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 9 years 1 week ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

The &lt;h&gt; element - define all or just &lt;h1&gt;?

But just to clarify a little bit...

If I define <h1> (the largest) as being 120% without defining the other sizes... will the language decrement the other sizes automatically? Meaning - will h2 automatically be a little smaller than h1 or do I have to define h2 also (as say 116%)...

Does that even make sense? Let me know if it doesn't.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The &lt;h&gt; element - define all or just &lt;h1&gt;?

Yes, it makes sense. No it won't happen.

In Firefox at least, the browser has a default stylesheet that FF uses to style every element according to CSS rules and common practice. In that style sheet you'll find this ...

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

h4 {
  display: block;
  font-weight: bold;
  margin: 1.33em 0;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

As you know, CSS is applied in a cascade, the browser default styling comes last. So anything you do will override the above properties. But if you only style the <h1> element, you only style the <h1> element. So all the others will be as shown above.

The underlying mechanism may be different in other browsers but the effect is the same. If you don't style <h2> you get browser default <h2> styling, irregardless of what you did to <h1> and/or <h3>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The &lt;h&gt; element - define all or just &lt;h1&gt;?

On a side note you will find that's it's necessary to size the heading tags if your sizing the body font in percentages as you will get discrepancies in heading sizes between IE and FF.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 9 years 1 week ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

The &lt;h&gt; element - define all or just &lt;h1&gt;?

Very cool - thanks for the information...

If I can stretch this conversation in another direction... FONT sizes...
(in reference to the Firefox statement Chris replicated)

Bottom line (and I'll try to explain it as clearly as possible) is that I want to create font sizes using em sizes - not pixel sizes...

Having said this though, I get confused as to what are GOOD default sizes to begin with.

Add to that, the fact that browsers have their own idea AND I may have changed my preferences in the past - and don't even know if what I am seeing is consistant with what other users are seeing.

Is there a good place to read-up on this... I'm really looking for a good set of default styles (a control group, per se) for my fonts that I can use forever-more, or at least KNOW I will be safe with.

I'm fairly new to all this, and I'm afraid I've fiddled so much, I've gotten too far away from the basics.

Thanks!

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 30 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

The &lt;h&gt; element - define all or just &lt;h1&gt;?

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The &lt;h&gt; element - define all or just &lt;h1&gt;?

In brief.

Windows browser default to a size of 16px. Macintosh 12px. 16px is generally considered too large. So lots of people start with an initial font-size reduction which coincidentally is aimed at bring the font-size down to 12px.

Its good practice to leave the ultimate font-size in the hands of the user. IE doesn't allow user font-size changes on absolute font-sizes. To overcome this, define your initial font-size as a percent.

the noodleincident says 76%, others says 77%. The slight amount above 75% (16 * 0.75 = 12) is to counter differences in rounding math in browsers.

most mac users will have made some adjustment to their settings to counter the fact that most websites have designed in a font reduction for the windows visitors.

you could go with an fixed font-size in the body and an IE override to overcome its problems.

whatever way you go, once you have set your body font-size it does make sense to size all of your other fonts relatively. That way if the user changes the font-size in their browser all the text on your page adjusts in the same way. If you have used ems for margins and paddings on text items the white space will adjust too.

Personally, I use "%" rather than "em" to avoid confusing relationships between units. For font-size % and em are equivalent. For all other dimensions which can use em, the em is fixed at that units font-size.

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 9 years 1 week ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

The &lt;h&gt; element - define all or just &lt;h1&gt;?

These are super - I really appreciate it.

Chris - when you say "initial font height" - are you saying the initial <p> style should be a percent? Say 80%? Or do you mean a different style statement altogether?

Last question - I promise...

Wink

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The &lt;h&gt; element - define all or just &lt;h1&gt;?

If you have no styling whatsoever, the font will have some size in standard elements (e.g. p, li). That's is the initial size, you can set it/modify it by putting a font-size on the body tag.

e.g.

body {font-size: 77%;}

You only need to set the size once there. Unless otherwise styles, all other elements inherit their base size from their parent and <body> is the ultimate parent.

If you change the body font-size, then all your <hx> elements will adjust accordingly - because they are all sized relatively.

In fact, I'd normally use ..

body {
  color: black;
  font: 77% Verdana, Arial, Helvetica, sans-serif;
}

those three properties are all inherited. So set them once and forget them - except where you need some special styling change.

/edit, insert missing closing code tag

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The &lt;h&gt; element - define all or just &lt;h1&gt;?

I'd better re-iterate my side note of earlier just in case it got overlooked in all the subsequent detail.

You will need to explicitly state the heading sizes if you scale down on the body element as modern browsers i.e FF will inherit the base size to work from but IE will not, it ignores the base size set where headings are concerned, so for uniformitys sake you need to set those sizes.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 9 years 1 week ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

The &lt;h&gt; element - define all or just &lt;h1&gt;?

Hey Chris..s

Do you have a site you wouldn't mind showing that you've set up these rules?

I have taken what you said, along with the noodles <h> values and have implemented them.

I'm currently working here. It just looks small in IE (PC Version) - and I'm wondering if I'm just not used to seeing small test on the PC. So I was wanting to compare my apples to your apples.

my page;
http://www.fizzcreative.com/balloon/inside.html
& style:
http://www.fizzcreative.com/balloon/styles3.css

I guess it is. My font is set to 77% and my IE on the pc prefs are set to 16 (default font size)...

just looks smallish. but my eyeballs are throbbing I've been looking at screen so long.

Thanks for all the help and pointers.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The &lt;h&gt; element - define all or just &lt;h1&gt;?

In the end the judgement is yours. Take a look at any site and its standard font-size. e.g. the posts in this forum. Mostly, I'll end up defining the size of every hx element I use, because normally they aren't used in a smooth gradient of sizes.

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 9 years 1 week ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

The &lt;h&gt; element - define all or just &lt;h1&gt;?

not a problem - didn't think about the obvious. Thanks!