CSS is the 'official' method to position page elements and tables should only be used to hold tabular data.

===========================================
The word ‘cascading’ in CSS describes a cascading mechanism; that is to say that the CSS code on the page itself will override the CSS code in a separate linked file. And subsequently, CSS declared ‘inline’ on the tag itself would override all other CSS.

===========================================
http://www.pmob.co.uk/faqcss/index.htm

If your link colours aren't working and you have them defined in your stylesheet then you may have inserted them in the wrong order.

Due to the Cascading nature of style sheets, if the link properties are not stated in the following order in your style sheet then the result may not be what you expect.

This is the correct order:

    1 a:link
    2 a:visited
    3 a:hover
    4 a:active

You're best off putting your styles in the order "link-visited-hover-active", or "LVHA" for short.

suppose you want your hover effect to apply only to unvisited links, whereas visited links should get no hover. No problem! Just put them in the order link-hover-visited-active, or even link-hover-active-visited if you want visited links to get no active styles, either. 
http://meyerweb.com/eric/css/link-specificity.html

===========================================

background-color: transparent;
===========================================

Note that when re-setting padding and margin to zero you will lose the bullets on lists because some browsers use a default left padding in order to show the bullet and some use a default left margin instead. Therefore I always include a 16px left margin for the ul so that the bullet will show and browsers will be consistent.

There is one more side effect of the reset and that is in mozilla browers where input buttons lose their depressed effect when pushed once you reduce the padding and margins. It's a small issue but one you should be aware of.

===========================================

Note that you could use the shorthand for the margins which will shorten the code down considerably. The shorthand is like this:

margin:5px auto 5px auto

That would effectively refer to the margins in this order:margin:top right bottom left

In fact it can be shortened even further by using just two measurements.

margin:5px auto

When you use just two measurements the the first one refers to the top and bottom margins and the second one refers to the left and right margins.

There is on fact another shorthand option and that would involve using three measurements e.g. margin: 5px auto 5px. When supplied in that order the first measurement applies to the top margin and the econd measurement applies to left and right margins and the third measurement applies to bottom margin. (The shorthand for padding is the same as above.)

One thing to note when using shorthand is that any properties you don't specify revert back to their default values which may over-ride styles you have already set.

===========================================
padding: 0 0 20px 235px;
	top right bottom left

===========================================

The box model consists of: padding, margins, borders and the actual content. This allows us to place a border around elements and space elements in relation to other elements. From the inside out it is ordered like so:

content -> padding -> border -> margin 

===========================================
POTENTIAL FONT PRINTING ISSUES

We shouldn't use Points either unless the output is to the printer. Points are a fixed size that will not scale and are ideal for printed output. The same goes for in cm and mm as these are sizes that won't scale but are ideal for printing or for fixed size content.

Therefore we are left with % (percentage) and ems. Percentages as explained by the W3C are as follows:

"A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets."

An em is the equivalent to the letter M in the parentfont-size and ex's are equivalent to the small letter x of the default font size. Both of these can be used to set size that is relative to the standard. Em and Ex sizes are based on a size defined with the CSS body style. For instance, you'll see in the style sheet for this page body { font-size: small}. That means that 1 em is equal to the size "small."

So if a normal size is 1 em or 100% we can set text that is twice the size by specifying 2em or 200%. In this way the size will be relative to the screen size and font size that is used and therefore should be consistent among compliant browsers.

===========================================
 thanks to cascading style sheets, it is possible to give modern web browsers a "hint" to help them put page breaks in the right places when printing out web pages. Here is an example:

<p style="page-break-before: always">

This will force a page break when printing, before the start of this particular <p> element.

Not all web browsers support CSS perfectly. If you must have absolute layout control and are primarily concerned with printing, consider using PDF rather than HTML.

===========================================

The main parameters for the types properties are:

font-size:
9 | 10 | 12 | 14 | 16 | 18 | 24 | 36 | x-large | xx-large | x-small | xx-small | small | medium | large | smaller


font-style:
italic | normal | oblique


line-height:
normal | (size)


font-variant:
normal | small-caps


font-weight:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.
text-transform: capitalize | uppercase | lowercase

===========================================

The parameters for the background are:

background-repeat:
no-repeat | repeat | repeat-x | repeat-y.


background-attachment:
fixed | scrolled.


background-position:
left | center | right | top | center | bottom

===========================================
The same thing can be applied to the other list objects, such as DD, DT, LI, OL and UL. The parameters which can be defined with the list-style properties are:

list-style-type:
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none.


list-style-image:
(URL) | none


list-style-position
inside | outside

===========================================
The options for the styles are:

border-pos-style:
none | dotted | dashed | solid | double | groove | ridge | inset | outset


border-pos-width:
thin | medium | thick | auto | (value)


An example of using a mixture of border styles and colors is:

<h1 style='border:none;border-right-style:solid; border-right-color:red;
border-top-style:dashed; border-top-color:green;
border-bottom-style:dotted; border-bottom-color:blue;
border-left-style:double; border-left-color:black; '>
Test</h1>

http://www.soc.napier.ac.uk/~bill/css_linestyles.htm

===========================================
The cursor property can be set to:

cursor:
hand | crosshair | text | wait | default | help | e-resize | n-resize | s-resize | w-resize | ne-resize | nw-resize | se-resize | sw-resize | auto

http://www.soc.napier.ac.uk/~bill/css_cursor.htm

Lots of cursor examples:
http://www.killersites.com/HTML_CODES/
===========================================
CSS allows text layout rules that are used in the publishing industry, and can use either rela-tive or absolute units. The relative units are defined in terms of another unit, and are:

em
Height of font

ex
Height of the letter 'm'

px
Pixels

%
Percentage

and the absolute units are:

in
Inches, where 1 inch is 2.54 cm

cm
Centimeters.

mm
Millimeters.

pt
Points, where 1 point is 1/72 inch

pc
Picas, where 1 pica is 12 points


Relative length units are useful when objects are scaled, whereas absolute are typically used when the actual dimensions of an object are know.
http://www.soc.napier.ac.uk/~bill/css_units.htm

===========================================
It is important that the style declarations/rules be in the right order: "link-visited-hover-active", otherwise it may break it in some browsers. A good way to remember this order is "LoVeHAte"

===========================================
<p> The Paragraph tag is used to mark parts of the pages as being 'paragraphs', simple enough. Paragraph tags are what they call a 'block element'; that means that it acts like a block where a space is automatically inserted before and after each <p> tag pair.

===========================================
<ul> and <ol> List tags will used to create our menus. The tag <ul> is the 'un-ordered list tag' that creates a list with bullets or other images/icons that do not specify or denote an order; hence the term 'un-ordered'. The other list tag mentioned (<ol>) is the 'ordered list tag' and it creates a list that, instead of bullets, the list elements are marked with numbers or letters. 

===========================================
<a href> The most important tag in HTML: the 'link tag' or the 'hyperlink tag'. This makes text 'hyper' so that when we click on it we can load another page or activate/call some JavaScript (otherwise known as ECMA script). 

===========================================

Do turn off the blue borders around linked graphics:

As you know, you can turn graphics into links or, in other words, buttons by wrapping a link tag around an image. By default, browsers will surround the image with an ugly blue border showing us that the image is a link. Your images that are acting as buttons should look like buttons; it should be obvious that the image is something to click on ... so we don't need the blue border.

To get rid of the blue border all you need to do is add this code inside your image tag: border="0"

Check out an image tag:

<img src='images/pictureWebPage.gif' border="0">

You may have noticed that I snuck in another tip in this one: making your button images look like something that can be clicked on. That's a 'free of charge' extra for you! 
===========================================

EXCERPT FROM VERTICAL TABS TUTORIAL
http://blixt.org/articles/tabbed-navigation-using-css#section=step-3

The element should have display: block; because it should act as a block element, rather than an inline element (i.e. text.) This means that I can give it padding, margin, width, height and all that. However, since MSIE6 gives the element the wrong width, float: left; is used because it implies display: block;  with the addition of making the element shrink to its smallest possible size (taking content and padding into account.) We don't have to worry about the element "floating" since it has no sibling elements.

===========================================

This is not correct

<hr>
<br>

This is correct:

<hr />
<br />

If you are using the XHTML doctype, you can correct many of this type error by right clicking in Code View and selecting 'Apply XML formatting rules.'

===========================================

Two classes together

You can assign more than one class attribute to a given markup element. For example, the following div gets its styling from both the content and product style classes:

<div class="content product">...</div> 

Note: A common misconception is that Internet Explorer doesn't support multiple classes, which is not entirely true. Although IE does have issues with multiclass selectors in the CSS code, it has no problem with multiple class attributes applied to a markup element. 

===========================================
Center aligning a block element

This tip shows how to center a fixed-width element in the browser window. Using the auto attribute for the left and right margins will center a div or other element in most modern browsers, including IE6. For example, the following CSS code would center a 700px-wide div horizontally.

#content {
width: 700px;
margin-left:auto;
margin-right:auto;
}

If you must cater to older versions of IE, you'll need to use another trick. You can style the body tag with the text-align:center rule, which centers any child elements of the body tag, including a content div. The problem is that it also centers all the descendents of the body tag. Fortunately, you can reverse that effect by adding a text-align: left rule to a div surrounding the page content, as shown in the following CSS code:

body {
text-align: center;
}

#content {
text-align: left;
width: 700px;
margin-left:auto;
margin-right:auto;
} 

Note: The evolt.org article used the margin shorthand property (margin: 0 auto) to set the left and right margins. However, Celik notes that the individual margin-left:auto and margin-right:auto rules are more reliable. 

===========================================
Vertically aligning with CSS

To center a line of text vertically within a box, set the line-height to a value equal to the height of the box. For example, the following CSS centers the text within a 30x100 box:

#button {
width: 100px;
height: 30px;
font-size: 10px;
line-height: 30px;
text-align: center;
} 

Note: I use this technique all the time. The result isn't always perfect, but it's usually within a pixel or two. 

===========================================
CSS positioning within a container

In addition to being able to position elements absolutely anywhere in a document, CSS enables you to position elements within a container element. To use this technique, you assign position: relative to the container element to position any element within the container relative to the container rather than relative to the page. Then, you can use position:absolute and the top, left, bottom, right properties to position an element within the container.

Note: You can often achieve the same effect by omitting the position properties and using margins to position an element within a container. Margins are better tested and supported than position:relative, so you're probably better off using that alternative when it produces the desired results. 

===========================================
Background color running to the screen bottom

The goal is to create a vertical column with a background color that extends beyond the column content to fill the full height of the screen (or container box). However, styling a div with the appropriate background color won't do the job because the background color stops at the bottom of the content.

To fill the column with a background color, you can add a background image to the body tag or to a container element. The image must be the correct color and width to create the column background. It's repeated vertically as needed to fill the space. Then, you position the column content over that background. For example, the following CSS would create a full-height blue column 150-pixels wide (provided the image.gif file is the correct width and color):

body {
background: url(image.gif) 0 0 repeat-y;
}

#column {
width: 150px;
} 

Note: Using an image to create a column background is one technique that effectively works around a limitation of CSS-based page layouts. Another technique is to use a container div to create the column background. Nesting container divs adds to the page markup, but it allows you to specify column widths using relative measurements instead of being restricted to exact pixel measurements.

Despite some technical issues with some of the techniques, the evolt.org article is a decent collection of CSS tips. I suspect that most Web builders will find at least one of these tips useful. 

===========================================

Set "container" border to 1px. Have to center the thing. For Explorer, I set text-align: center; to the body style. For the rest of the browsers, margin: 0 auto; (that translates to top=0, right=auto, bottom=0, left=auto) on the "container" style does the trick. Centering the div isn't nearly as easy as it was with tables...

Specifying top and bottom margin in the style of "container" to get the whitespace over and under the design works for most browsers. Explorer screws up the bottom part. How nice.

Adding 20px top and bottom padding to the body instead of margin for "container" works for all browsers. Lovely.

===========================================

To feed a different value to non-IE browsers, I'm using the !important property, which specifies that that particular rule should take precedence over others for the same element. This is not supported by Explorer.

background: url(menuBullet2.gif) no-repeat 4px 6px !important;  
 background: url(menuBullet2.gif) no-repeat 4px 9px;

In CSS, values are read from top to bottom and, if multiple values are specified for the same element, the last one is used. Since Explorer doesn't support !important, it takes the second value, while other browsers take the first one.

===========================================

Grouping Different Selectors 
You can also declare the same CSS rule for more than only one selector (HTML element names) by simply adding more selectors, separated by commata. The rule below sets the same styles for paragraphs, list items and table data cells at once. 

p, li, td { font-family: verdana;  font-size: 12px } 


 Contextual Selectors 
Contextual selectors give you even more flexibility in applying CSS to your webpage content. They are simply two or more selectors separated by a white space. For example, in the following rule, the contextual selector is p b:

p b { background: yellow } 

Its function is to give only the bold text inside paragraphs a yellow background. Bold text inside other elements like headings and lists would be unaffected by this style rule. 

===========================================
Use Multiple CSS Classes on a Single Element
http://www.google.com/search?q=css+apply+multiple+classes&ie=UTF-8&oe=UTF-8&hl=en&client=safari

One of the lesser known tricks with CSS is the fact that you don't have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example: 

<p class="center bold">Paragraph text goes here</p>


===========================================



===========================================



===========================================



===========================================



===========================================



===========================================



===========================================