HTML Code Tutorial

Attributes of the body tag were:

• alink="colorname"
• vlink="colorname"
• link="colorname"
• background="filename.gif"
• bgcolor="colorname"
• text="colorname"

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.

Setting Link Colors with Style Sheets

Link colors can be set using Style sheets.

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

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 and background color.

Note: These colors are set by default. It is not necessary to provide this code unless you want to change the defaults. For CSS2 compliance always specify a background color when you specify a fore-color.

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(image_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}

Changing Scrollbar Colors

Another attribute of the body which can be controlled is the scrollbar. Change the color and other features with this code:
(Not W3c compliant) - Doesn't work in all browsers.
scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-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. In most cases you should also specify a forecolor for CSS2 compliance.

You'll run into less problems with validation using the background attribute rather than background-color.

Text and Style Sheets

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

Take a Quiz on this Information.

Copyright © 2010 - Net Success 2000 Plus Inc - Somerset KY 42502