Having CSS embedded in your HTML document is not exactly recommended any longer. With all the new features and demands of creativity on sites, having an external CSS file or two may come in handy. In this tutorial, you will learn how to properly reference an external CSS file.

Setup

This tutorial was written using Visual Studio 2010. Visual studio is available for free in its express edition to the public. Just go to Microsoft.com/Visual Studio. Go ahead and open up Visual Studio or your favorite text editor. Save this project with the name of your choice.

Step 1.

First lets create a page on which we are to view our styles on. Copy and paste the following code onto your index.html:

This will give us a basic layout as well as some content to view.
Step 2.
Now to create the stylesheet. Go ahead and save a text file as a .css, or add a new item to your project in Visual Studio and choose a .css file. Change your code so that it appears as follows. Any additional formatting added by Visual Studio is fine.

Save the file. Notice how we have our div that has class name, “tutDiv”, and the table that has the class name, “info”, formatted here. This part is important, you may give whatever name you want to your HTML elements, or simply try to give your elements id’s. If proper referencing does not take place, no style will be applied. For additional help with CSS, click here.

Close your .css file.

Step 3.

Time to tie the knot. In the head section of your HTML document, place the following code between the opening and closing head tags. Replace the StyleSheetName with the name of your .css file.

Save your changes and open your HTML document in a web browser. You should now see the styling applied to your page.

A Few Last Words

As you can see, external sheets can come a long way. There are other ways to style your site apart from CSS. Many individuals have used JavaScript and JQuery to style and customize their sites. For more information on JavaScript, click here. Join us next time for more tutorials. See you then!
Download Source Files