There so many advanced tutorials on the subject of CSS (Cascading Stylesheets), so I wanted to put out a really remedial training page that shows how CSS should be properly used.

When integrating a stylesheet into your page there are two ways it can be called. The entire stylesheet can be a separate document which will be called by your html or you can incorporate the sylesheet directly into your page’s html. To perform the latter you simply include the following code:

<style type="text/css"><!--
YOUR STYLESHEET HERE -->
--></style>

within your html code. Best coding practices would have you place your <style> tag within the header, however it can actually be placed anywhere before the style is utilized.

When your stylesheet is very short AND it is not going to be reused on any other pages it is fine to include your stylesheet within your page html. However, when your stylesheet is lengthy AND/OR going to be reused on pages across your site there is a better way call your styles. You create a stylesheet page, which will have the *.css extension. When you become more advanced you can build your stylesheet ‘on the fly’ by using php (or other programming language). When building a stylesheet with php your file extension will be .php, therefore you have to write headers to tell the server your page is a stylesheet. The code to make this happen is very simple:

<?php header('Content-type: text/css'); ?>

Without writing this header code the server will render your stylesheet as a text document, writing your information as simply text onto your page.

Once you have created your stylesheet it is time to call it from within your html. To do this place the following code into your html in the area of your code:

<link href="YOUR_CSS_FILE.css" rel="stylesheet" type="text/css" />

This code informs your html page to look into the specified file for your stylesheet information. Because your stylesheet is being stored in a separate file it can be called from any html page you create, by simply including the <link /> to the stylesheet. By updating the stylesheet file you will automatically update ALL the html pages which call on, and depend upon, the stylesheet for its formatting.

This has been a VERY remedial tutorial, but I hope it will be beneficial to beginners who are just learning to program their own sites.