CSS3 allows you to apply shadows to text and eliminates the need of using Photoshop to do it. It is very simple and all you have to do is just add a new property to an element. It’s:

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.

This tutorial teaches you on how to link an external CSS file in an xHTML file. By creating and linking an external CSS file, it allows you to keep all your CSS code separately out in a different file. This eliminates the clutter in your HTML file. This also keeps your content separately from design. An external CSS file will have .css as extension.

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" />