Lissa Explains it All -- HTML Help and Tutorial for Kids

Lissa Explains it All -- HTML Help for Kids

| Section 1 | Section 2 | Section 3 |

How do I link to an external style sheet?

How do I validate my style sheet?

How do I get rid of the underline on my links?

How do I make my links change color on mouseover?

How do I change colors of individual links?

How do I position my images?

How do I change my cursor attributes?

How do I link to an external style sheet? Add the following code in the <head> tag of your html document. You have to add this tag to every page you want to put the style sheet on:

<LINK href="mystylesheet.css" rel="stylesheet" type="text/css">

Add your style sheet to a plain text editor like Notepad or Simpletext. Make sure you name it with the .css extension. If you're having trouble saving it as .css, put it in quotes when you try to save it, for example: "mystylesheet.css." Here is a sample, remember not to add the style tags to your text file:

A:link
{ text-decoration: none; }

body
{ background-color: #000000; }

Upload the style sheet to your server and all of your pages will show the new style attributes. This is convenient because when you want to change the style of your whole site, you only have to edit and upload one small file to accomplish this.

How do I validate my style sheet? Validating your style sheet is a good idea. You can check your CSS at WDG CSS Check or at W3C CSS Validator. When you validate your CSS, the validator checks for mistakes and shows you where they are. If you have any IE specific codes, like colored scrollbars, the codes will appear as errors.

How do I get rid of the underline on my links? It's very simple. Add this code to your page, in between the </title> and </head> tags:

<style type="text/css">

A:link {text-decoration:none; }
A:visited {text-decoration:none; }

</style>

How do I make my links change color on mouseover? Add this code to your page, in between the </title> and </head> tags and make sure that you substitute YourColor with the six digit hex code of your choice (if you would like to keep the underline on your links, you need to replace the "none" attribute with "underline"):

<style type="text/css">

A:link { text-decoration: none; color:#YourColor; }
A:visited { text-decoration: none; color:#YourColor; }
A:hover { text-decoration: none; color:#YourColor; }

</style>

Remember that "link" is the color of your link, "visited" is the color of your link once it has been visited and "hover" is the color of your link on mouseover.

How do I change colors of individual links? Putting this code in front of one of your text links will change the color of that link, and only that link (substitute your own information where you see bold text):

<A href="address you want to link to.html" style="color: #000000"> click here </A>

How do I position my images? You can position your image anywhere on your page using the following code. The image will be on top of any other image or text you happen to have on your page though, so you have to be careful using this code (substitute your own information where you see bold text):

<img style="position:absolute; top:the amount of
pixels from toppx; left:the amount of pixels from
leftpx; width:your image width in pixelspx;
height:your image height in pixelspx" src="your image name.gif or .jpg">

You can also use widths instead of pixels to position images. Just substitute 50% (or whatever percentage) for amount of pixels from top or left.

You can overlap images (this is good for headers) by adding the above code for each image, just change the pixel sizes the amount you need to overlap.

How do I change my cursor attributes? You can change the attributes of your cursor by adding a simple style tag to your link reference. Your cursor will change to the new one every time someone puts their cursor over your image (change info in bold text):

<a href="http://address.html" style="cursor:n-resize"><img src="filename.gif"></a>

The last arrow above can point in any direction. Just replace "n-resize" in the above code with:

"s-resize"  points south
"e-resize"  points east
"w-resize"  points west
"ne-resize"  points north east
"nw-resize"  points north west
"se-resize"  points south east
"sw-resize"  points south west

I believe the cursor attribute only works in IE4 or greater. If you can see the example (put your cursor over the cat image above), then it will work in your browser. You can also use a text link instead of an image link, just take out the img src tag and replace it with the text you want to link with.

This Web site is registered with the Library of Congress Copyright Office.