text-shadow: 2px 2px 2px #333;

This code will apply a gray show to the text. This effect can be seen on Safari 3 and above, Opera 9.5+, Firefox 3.1+, Konqueror and iCab.

If you are using one of the above mentioned browser, you must be able to see the shadow behind the title of this post. If not, here’s a small preview:

Some explanation about this property:

2px 2px 2px

…will add shadow in right-down direction.

0 2px 2px

..adds shadow in downwards direction.

2px 0 2px

…adds shadow towards right.

And as far shade is concerned, if your background is light in color, use the following colors: #000 or #333 or #666 or #999. This depends on the background color and as well as the color of the text to which you are applying the effect.

To link an external CSS file, all you have to do is just refer that file in your HTML / xHTML file, so that the HTML file fetches the CSS code and builds the elements on the page.

To refer an external CSS file, you have to place a code within </head> tag.

If your style.css file resides is in the same path as that of your HTML file, then use this code:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

If your style.css file is in some other folder, say like images. You have to specify the path in the code:

<link rel="stylesheet" type="text/css" href="images/style.css" media="screen" />

Some explanation might help you understand the code well:

• link rel – stands for link relationship. Assigning “stylesheet” as the link rel will make HTML file to understand its an stylesheet or also known as file with CSS code.
• type – lets you specify the language. Here “text/stylesheet” is used to specify “style sheet language”
• href - is used to link to an external stylesheet and to point out the location of the file. Here style.css is the name of your external stylesheet.
• media – lets you specify the type of device on which your design will appear. This is meant for media specific. There are many other types, most commonly used are:

1. all – Meant for all kinds of devices.
2. print – This is used for page media. You get to see how you design appears before you print via print preview.
3. handheld – for cellphones, pda etc.

…and there are many more like aural for speech, projection for projectors, tv for television, braille for tactile feedback devices, tty for portable devices with display, embossed for braille printers.

Now, you are capable of linking an external stylesheet to your HTML file. Enjoy the fun of CSS.