Document Markup

in general, data, and the surrounding tags, goes in your HTML, layout goes in the CSS; style sheet.

HTML - CSS

"In code terms, data is what goes in your HTML. If it's not text, images, content, strip it out of there. Layout is what goes in your CSS. Colours, fonts... tone rate & gender for voice readers... you name it, that all goes in CSS files."

Block-level Elements
Certain HTML elements, tags, are said to be "block-level" while others are "inline" (also known as "text level").

Generally,
* inline elements may contain only data and other inline elements. They do not create new lines.
* block-level elements may contain inline elements and other block-level elements. They begin on new lines, and will close an unterminated paragraph element. This enables you to omit end-tags for paragraphs in many cases.

Generally, block elements create "larger" structures than inline elements. By default, block-level elements are formatted differently than inline elements.

example Block elements

DIV document divisions
Requires start and end tags. It is used with the ALIGN attribute to set the text alignment of the block elements it contains. ALIGN can be one of LEFT, CENTER or RIGHT.
P paragraphs
The paragraph element requires a start tag, but the end tag can always be omitted.
BLOCKQUOTE quoted passage
Requires start and end tags. It is used to enclose extended quotations and is typically rendered with indented margins.
FORM fill-out forms
Requires start and end tags. This element is used to define a fill-out form for processing by HTTP servers. The attributes are ACTION, METHOD and ENCTYPE. Form elements can't be nested.
PRE preformatted text
Requires start and end tags. These elements are rendered with a monospaced font and preserve layout defined by whitespace and line break characters.

A good procedure is to establish the block-level elements of your document first. After you've established the 'big' structure of your document with block elements, concentrate on the inline elements.

There is also a third type of element in HTML - those that aren't displayed at all. These tags are the ones that provide information about the page but don't necessarily show up in the visible portion of the page. For example: STYLE to define styles and stylesheets, META to define meta data, and HEAD to hold those elements.

One of the most common mistakes a newcomer to Web design makes is trying to set a width on an inline element. This is because inline elements don't have widths or heights. That is, they do, but the width and height is set by the container box.

Note: IE incorrectly applies some of these properties even to inline elements. But you shouldn't rely on that to remain, as it's not standards compliant.

So if you need to define the width or height that some text should take up, you need to apply that to the block-level element containing your inline text.

Changing the Type of an Inline Element to Block and Vice Versa

With CSS you can change the type of an element from inline to block or the reverse with just one CSS property:

display: block;
display: inline;
display: none;

The CSS property display lets you change an inline property to block or a block to inline or either of them to not display at all.

When to Change the Display Property
In general, leave the display property alone, but there are some cases where turning a block-level element into an inline and vice versa can be useful.

* Horizontal list menus - Lists are block-level elements, but if you want your menu to display horizontally, you need to convert the list to an inline element, so that newlines aren't added between each list item.
* Headers in the text - Sometimes you might want a header to remain in the text, but have the HTML header values. Changing certain h1-h6 values to inline will let the following text flow next to it.
* Removing the element - And of course, if you want to remove the element completely from the document flow, you can set the display to none.

You can manipulate the different parts of the box model with CSS properties:
* margin
* border
* padding
* width
* height

It used to be that tables were used to position everything in boxes-blocks, now the move is to DIV tags.
Anything that could be "boxed" with a table, can now be positioned with divs. They load far faster than, tables. Tables do not display on-screen until they have been downloaded in their entirety. With DIV layers, it will start displaying as soon as any part of it is downloaded.

Without CSS, your choices for borders were those crappy grey ones that surrounded tables and frames. Now however, since page presentation has become such an important aspect of web-design, stylesheets allow you lots of variety in your borders, and you can have custom rounded corners! - notice our rounded box corners here. no images, just css tags! [like border-radius: 15px;]

to create a layer (DIV), with a background color that is semitransparent

.transparent {
filter: alpha(opacity=50); /* ie */
opacity: .5; /* mozilla & firefox */
background:#ccc;
}

!important

!important is not a property nor is it a value. It's more of a "declaration". Its function is to set overriding precedence when there are conflicts in properties between competing classes. An "!important" declaration takes precedence over a normal declaration.

example, to force the color which is also being controlled elsewhere:
#comments em
{
color: #005500 !important;
}

Issues:
IE does not implement html-css properly. In a nutshell, according to the W3C, width and height properties define the width and height of the content of the box. Items like padding, border, and margin surround that width and height.
Some versions of Internet Explorer instead define the width and height as the width and height of the entire element, including padding, and border. Even version 8 will still fail to render some instances of margin settings!

If you want your designs to look the same in all browsers, you have to employ tricks and sometimes hacks to get IE to work correctly.
Word to the wise, download and use anything but I.E.

• Internet Explorer 8 hangs frequently, takes much time to load, Shuts Down when Searching, and breaks other applications.

Windows incompetent programming does more than make it difficult to display pages correctly, it also makes it an "open window" for hackers to break into. Crashing your hard drive has become the least of your worries. Now, well financed, 'mafia-like' organizations write code to your computer that records your every keystroak including id's and passwords to your bank and savings accounts. They will steal all you have and never tell when or how they did it.

Better yet, download and install Ubuntu along side windows, and only go back to windoze when you have to.