<H2> and distance in a CSS

H

Hans

I can't figure out how to controll the distance between a headline like <h2>
and the text <p> that follows. Default is far too much.

Today my CSS looks like this:

h1 {font-family: Verdana; font-size: 20px;text-align: left;}
h2 {font-family: Verdana; font-size: 17px;text-align: left; margin-bottom:
1;}
h3 {font-family: Verdana; font-size: 15px;text-align: left;}
h4 {font-family: Verdana; font-size: 13px;text-align: left;}

body {font-family: Verdana; font-size: 13px; text-align: justify;}
body {background-color: #ffffff;}

As you can see, on <h2> I have tried with "margin-bottom: 1" but it doesn't
change anything. Can anyone tell me how to do, please? And can anyone
suggest a good webpage where to find the info how to build CSS?

Hans
 
M

Murray

Just so you'll know, your CSS is redundant. If you had this -

body { font-family:Verdana, arial, helvetica, sans-serif; font-size: 13px;
text-align: justify;background-color: #fff; }
/* it's unwise to use a single font in a family style */
h1, h2, h3, h4 { text-align:left; }
h1 { font-size:20px; }
h2 { font-size:17px; margin-bottom:1px; }
/* all distances in CSS MUST have units */
h3 { font-size: 15px; }
h4 { font-size: 13px; }

You'd get the same effect, but with better markup.

Note that you'd also have to control the margin-top on the element below the
<h1> in question.
 
H

Hans

Hello Murray,

Thank your for your comments. I've learned a lot today, but I've a lot to
learn so it's just to keep on questioning, I belive! One more question in
this subject; It is possible to set values for <p> and for <body>, but what
is the diffrence?

Hans
 
M

Murray

One more question in this subject; It is possible to set values for said:
and for <body>, but what is the diffrence?
Click to expand...

Sorry - I don't know what you are referring to here?
 
H

Hans

As you probably have understood, I am very much of a beginner in this filed.
I have copied and pasted info from various webpages that writes about CSS
and I have noticed it is possible to set values for p and for body in the
CSS sheet. Please see the examples below:

body {font-family: Verdana; font-size: 13px; text-align: left;}
and
p {font-family: Verdana; font-size: 13px;text-align: justify; margin-top:
0; margin-bottom: 0;}

I understand that p controlls what is inside <p></p>, but body? Does it
controll everything inside <body></body> ? If so, what is the hierarky? Is
body the general rule and p, h1, h2 etc, exceptions?

Hans
 
T

Trevor Lawrence

Well, I may be able to answer.
The C in CSS stands for Cascading, so styles are allocated in order, i.e.
they cascade on top of each other.

<body> is the highest level, so that applies until another level, e.g <p> is
used,

So assume you have this HTML, with your CSS
<body>
text A
<p>text B </p>
text C
</body>

text A has the style {font-family: Verdana; font-size: 13px; text-align:
left;}
text B has the style {font-family: Verdana; font-size: 13px;text-align:
justify; margin-top: 0; margin-bottom: 0;}
text C reverts to {font-family: Verdana; font-size: 13px; text-align:
left;}

BTW,
Since they are cascading, there is no need to repeat the style for <p> that
is also in body

This would work equally well
body {font-family: Verdana; font-size: 13px; text-align: left;}
p {text-align: justify; margin-top: 0; margin-bottom: 0;}

The font-family in the body style will still apply in the p style. So you
only need to add to the lower level styles those that differ from or are
additional to those on higher level styles. For example if you wanted the
style for <p> to be a different font size you could write it as p
{font-size: 10px; text-align: justify; margin-top: 0; margin-bottom: 0;}
 
H

Hans

Thank you, it explained to me what I wanted to know. You know, as I am not
an native English speaker, I'm not fully aware about the meaning of
"cascading".

Thanks

Hans
 
M

Murray

Actually, although it was a nice explanation, it was wrong.

Think of the page as a tree. Each tag could then be an ancestor of other
tags, as well as a descendent of other tags, e.g.,

<body>
<p>
<span>
<img>

In this example, the <body> is the ancestor of everthing on the page. The
<p> is the ancestor of <span> and <img>, but the descendent of <body>. And
so on.

With regard to styles, there are also two kinds of them: those that inherit
and those that do not. Styles that govern the "look" of things usually
inherit. e.g., font-weight, font-family, font-style, color,
background-color, etc. Styles that govern the location of something on the
page usually do NOT inherit, e.g., margin, padding, position, float, etc.

Styles declared in ancestors will inherit into all descendents when they are
inherited styles. Otherwise they do not inherit.

Make sense?
 
M

Mike Mueller

A few things:
* except for fonts, sizes can either be 0, or a nunber with a 'unit of
measurement' (ie, 6pt, 10px, 1.2em, 100%)
* it is generally recommended to avoid 'px' when sizing fonts
 
R

Rob Giordano [MS MVP]

cascading...like a waterfall, sometimes with intermediate stops on the way
down.

--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression
 
H

Hans

Aha, I rather had it as water blowing up from a hole, like a geijser. I'm
native Swedish speaking, living in France but my French is terrible
underdevelopt, using a French FrontPage and an English Win 2003 Server.
Sometimes I take information from all 3 languages and things can get very
confused.

Hans
 
R

Rob Giordano [MS MVP]

Well, if I were trying to work in Swedish, French and English it would
definitely be like a geyser... of brain cells on the ceiling :)



--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression
 
M

Murray

Ewww....

--
Murray
MVP Expression Web


Rob Giordano said:
Well, if I were trying to work in Swedish, French and English it would
definitely be like a geyser... of brain cells on the ceiling :)
Click to expand...
 
R

Ronx

pts AND px should be avoided.

Neither can be simply resized in IE (hence accessibility problems), and
pts display differently in different browsers.
--
Ron Symonds - Microsoft MVP (Expression)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

css in frontpage - problems 4
Problems using CSS in IE6 1
from tables to css - I need help 1
Font size! - I've read other font posts but still won't work 3
Hyperlinks NOT underlined in website using CSS 3
please help me fix my code. it will not work in ie but worksperfectly in firefox 5
CSS learning 4
Font/Text size problem Fixed. A 'get-around' that's worked for me 1

Top