Body Tag
<body></body>
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).
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}
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.