Body Tag

<body></body>

The body tag is a required HTML tag.

It is only omitted when using frames, which are no longer supported in HTML5.

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

Many current web design tools use a Deprecated method of assigning attributes to the body tag.

When building web pages for w3c compliance today, these attributes should be assigned using CSS (Style Sheets).

The Deprecated Method

If you use a WYSIWYG editor that still produces this code, GET RID of IT!!

<body link="#FFFCCC" alink="#FFCCFF" vlink="#FFCCFC" background="nerd.gif" bgcolor="#FFFFFF" text="#CCCCCC">

Attributes of the body tag were:

The link, alink and vlink, attributes set the colors that hyperlinks will appear in.

Link sets the color of unused links.
Alink sets the color that appears when you click a link.
Vlink sets the color of a previously visited link.
Color names can be specified using names, RGB code or Hex code.

The Background attribute was used to show the location of the desired background image or colored pattern for the page. It is usually a gif or jpg file.

If not located on the same server and in the same directory as the parent program , you must specify a path. You can also access another site to display the background for your page.

The bgcolor tag was used to set the color for the entire page.
Color names can be specified using names RGB code or Hex code.
The text attribute was used to set the default color of text on the page.

*I just love that inset box-shadow and round corner effect. See the side bar navigation under CSS to learn how to add them to your style sheet.

 

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}

Setting the Background Image with Style Sheets

The background image and its attributes can also be set using style sheets. The default setting tiles the image on the page or repeats it many times covering the entire area. There are settings to control this feature.

Code for specifying image
body{background-image : url(imagefolder/name.gif)}

Note: This code would repeat the image by default.

Code to control repeat of image:

To display image one time
body{background-repeat : no-repeat}

To repeat image across top margin of page
body {background-repeat : repeat-x}

To repeat image down left margin of page
body {background-repeat : repeat-y}

Here's a useful attribute of the background declaration. If you don't want your background to scroll on the screen - you want the background fixed and the text to scroll over it, use this code:
body {background-repeat : repeat; background-attachment: fixed}

Note: If using large images in places like the header, don't use the background-image property if you are building liquid pages.

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.

Text and Style Sheets

Text attributes are set individually using Style Sheets. Different settings can be specified for paragraphs, lists, blockquotes, pre, etc.