Body {} p {}?

If I have text on an html page without a <p> </p> does the font declaration in the body {font-family etc.} format the text?

Rick

Yes.

actually I guess what I mean is does the body {} declaration in the external CSS stylesheet take precedence?

rick

If you apply the font-family to the body element then it will be inherrited into all elements in the page (apart from a few special elements like form controls, pre, and a few others I can’t remember at the moment).

You don’t then need to apply the font-family to p elements, heading tags , uls, divs spans etc. because they will all inherit automatically from the parent. That’s the beauty of css.

On the other hand if you want a different font-family for the p element then just apply it as per normal.

p{font-family: etc…}

The rule will be more specific and over-ride the rule applied to the body element.

Not all properties are inherited and setting a margin on the body won’t be inherited into its children because that would be silly :slight_smile:

Thanks Paul - I’m trying that now to see if I can have text on an html page format without the <p>, saving that for other paragraphs.

I think you wrote The Ultimate CSS Refeence - correct?

Now I’m placing a 720px chart that I wish to have on the right of the page.

Do I incorporate a float-right for this?

How does that effect nearby text used to describe the chart?

Rick

It’s best to have all text marked up with some kind of element—be it a <p>, <h1> or whatever. You can style various <p> differently by adding classes to them etc.

I think you wrote The Ultimate CSS Refeence - correct?

Yep, he is da man!

Now I’m placing a 720px chart that I wish to have on the right of the page.

Do I incorporate a float-right for this?

How does that effect nearby text used to describe the chart?

A lot will depend on the rest of the page. Normally, if you float an image, text and other element will flow around it. If that’s not what you want, then you need a slightly different strategy. for example, if you want a caption for the image, you could wrap image and caption in a div which is then floated, so that they stay together.

As Ralph said there should be no other text on the page that is not inside some kind of semantic container. Having plain text as a direct child of the body would be invalid in strict anyway.


<body>
test
</body

The above would be invalid and not allowed.

If there is text on the page then it has some kind of meaning and there will be an appropriate html element into which it should be placed. Think about the text’s purpose and then use the html that best describes it. It’s likely to be a paragraph, or a heading of some sort.

OK Paul . . I got that figured out.

I haven’t had much time to get back to this but I’m trying to now.

Question . . . on the html page.

I noticed that placing <p> text </p> and images and Headings all fall in “order” on the page that they are placed in using html markup.

Is that correct?

If so I have to learn how to size my <p>paragraphs</p>, images, blocks of text, CSS menus, and a slide show or flash for some pages.

I have 80 some jpeg graphical charts that need to be designed to fit the page without resizing or the quality will suffer.

How do I go about making everything fit the page and how do I set the Internet site page default width to 960?

Thanks . . . Rick

Hi,

To center a block element you give it a width and then use margin:auto and it will center in the available space. Therefor to have a site centred you create a wrapper with the above rules and keep all your content inside.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
}
h1, h2, h4, h4, h5, p {
    margin:0 0 1em;
}
#outer {
    width:920px;
    margin:auto;
    border:1px solid #000;
    padding:10px;
}
</style>
</head>
<body>
<div id="outer">
    <h2>Main Heading</h2>
    <p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
</div>
</body>
</html>

As to how to lay out the remaining page that is a far reaching question that encompasses all of html/css and couldn’t be covered in a single post.:slight_smile:

You first need to study how to lay elements out on the page using floats and static positioning. Don’t fall into the trap of absolutely placing everything as that’s not viable for a fluid web page.

Static (non positioned) elements can be nudged around using margins but when you need horizintal alignment you would usually use floats. However, floats are a complicated subject so you may want to read up on them first and get a hang on how they work.

If you have a more specific request we can show you how to lay out certain things but would need to know more details.