Now, for a CSS box. These are also referred to as 'blocks' or 'divs' but the word 'box' is probably more meaningful.
There are two ways to define a box depending on whether it is a unique item on a page or one that can be used multiple times.
A page will normally only have one header so it can be specified something like this.
and within the <body> of your page you just put
<div id="header"> This is the Header </div>
to give you a 48 pixel high, navy blue header along the entire top of the page.
The hash sign (#) in front of 'header' indicates that this is an ID selector and provides the style for one unique element on the page. A 'class' selector prefixed with a period (.) is similar but can be used any number of times.
Below the header, we'll put a simple, single column text area with an ID of 'content'
By specifying 'auto' for the left and right margins and a definite percentage or pixel dimension for the width, this box will centre horizontally in the browser window. There is a bug in some versions of Internet Explorer that means that boxes won't centre like this and requires you to add 'text-align:center' to the 'body' style definition. If you do this, you have to make sure that you explicitly define text that you don't want centered as 'text-align: left' or 'text-align: right' because text alignment is inherited from the body style definition in some browsers.
Below the header in the <body> of the page goes
<div id="content"> Content goes here! </div>
Then, you might want a footer at the bottom of the page, so...
<div id="footer"> This is the footer </div> after the content section gives a browser-wide footer under the narrower content section.