Body Tag

The body tag is a required HTML tag.

All code for structuring your HTML page is placed within the opening and closing body tags.

Today, when building web pages, these attributes should be assigned using CSS (Cascading Style Sheets).

Your web page can be easily structured using the following box elements some of which were just added in HTML5.

Use the following elements:: Header element; Nav element; Main element; Div element; Footer element
Others available:: Section, Article, Aside, Hgroup

Setting Page Width

You can set tthe maximum body width of the page under the body declarations in your style sheet. body { max-width:1440; }

When the page is viewed on a screen as wide as 1920 pixels or more the document would only spread to a width of 1440 pixels.

Choice of Fonts

Choice of fonts for the entire document and page elements can be set in the style sheet under body declatrations.

body {
max-width:1440;
font-family: arial, tahoma, sans-serif;
font-style: normal;
font-size:20px;
font-weight: 400;
color: #000000;
}

Setting Background Color with Style Sheets

The code for setting background color for the body:
body {background-color: #ff0000}
body {background: #ff0000}

The background-color and background attribute can also be used with the table tag, row tag, cell tag, header tag, paragraph tag, span tag and most others.

Setting Link Colors with Style Sheets

Link colors should be set using Style sheets.

Code for setting link colors:
a:link{ color :#FF0080 }
a:active{ color :#FF00FF }
a:visited{ color :#808000 }
a:hover{ color :#808000 }

How do they do that? Ever wondered how they get links to change color when the mouse is positioned over them? Use the hover selector and assign a fore color.

Note: These colors are set by default. It is not necessary to provide this code unless you want to change the defaults.

Anchor Tag and Class

You may at sometime want to create classes for your anchor tags.

Here's an example of how you would reference them in the style sheet:

<a href="" class="button2"></a>

a.button2 { settings}
a:visited.button2 {settings}
a:hover.button2 {settings}

Helps

Free Tools and Resources

Need more advanced information? Visit our Web Developer Resources page for a collection of other great tutorials and reference guides on the subjects of HTML5, CSS3, Responsive Design and SEO.

Have you tried our FREE Responsive Design template kit? Download Template #402 - 6 Page Kit