Colored boxes - Step 7. Drop in the content
When the containers have been positioned correctly and render correctly across all target browsers, the heights can be removed. Then, some representational text can be dropped into each container. The content should be semantically correct - so use h1, h2 etc. for headings, paragraphs for text etc. Again, the results should be tested across a range of target browsers.
A note on font sizes
Font-size is an inflammatory subject. Everyone has an opinion on what is right and wrong. At present, there seem to be two main choices:
Leave font sizes alone
Do not define font sizes at all. Instead, allow the browser style sheets (http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm#browser) or user style sheets (http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm#user) to determine font sizes.
Use relative units to define font sizes
If font-sizing has to be used, this is the preferred method. Font-sizes are set with percentage or em units. They can be resized in almost all browsers and are driven by the user's font size preference, so users can adjust the size of content to suit their needs.
Relative font sizes are easy to implement, using one or a combination of three methods:
Relative font sizing method 1 - applying font sizes to containers
When you have your content placed inside containers, you can specify font-sizes directly to the container and/or elements inside the container. This means you have a great degree of control over elements across the entire layout. For example, an <h1> element can be given different sizes depending on its container:
#navigation h1
{
font-size: 120%;
}
#content h1
{
font-size: 140%;
}
Relative font sizing method 2 - the body
A relative size can be applied to the body element, which means that all other elements will use this measurement as a base.
body
{
font-size: 85%;
}
Some browsers do not apply this rule consistently - especially when it comes to content within tables. This is especially true if your doctype is set to Quirks mode.
Relative font sizing method 3 - type selectors
You can also apply relative font sizing directly to HTML elements. For example:
p
{
font-size: 85%;
}
h1
{
font-size: 150%;
}
However, there can be problems with this method. For example, a rule like the one below can cause inheritance problems for nested lists:
ul
{
font-size: 85%;
}
Any content within an unordered list will be scaled to 85% of the user's default browser size. The problem occurs when there is a nested unordered list. The nested list item will inherit the relative font sizing and apply it again, making the nested list items 72.25% in size (85% x 85% = 72.25%). This is easily fixed with another rule that will bring all nested list items back to 85% font size:
ul ul
{
font-size: 100%;
}
Generally, it is safest to use a combination of both methods 1 and 2. This means you set a percentage base font size on the body, and then percentage or em-based font sizes on the relevant elements as required.
