This is a basic introduction tutorial for people who want to learn a bit more about CSS. A three part blog where I will focus on explaining the three different ways on where to define your CSS styles. I will show the difference between inline-, embedded-, and external CSS.

When you are creating your web page you should keep in mind how you are going to build it. Using XHTML you can define the layout of the page, and using CSS you can control the design. When you build you site you will get at least one page, but surely you will have several. A great rule of thumb that I stick to is creating a global or a 'master' css stylesheet that each page can use. This is my external CSS definition style. If I then have a single page with exceptions to this master style I either choose to create a subsection external stylesheet, or write it inside that particular page as an embedded CSS definition style. And finally if there's an exception to a particular tag I will probably write it inline CSS to define it for that particular tag.

Now, don't let the above text confuse and scare you off .. I will try my best to simplify it with an explanation and a small example

External CSS Stylesheet

Say you know beforehand that all the images on all your page should not have a border. You could write this in each page (embedding it), but what if you change your mind at a later point? You will have to go through all the pages. Instead, use an separate file, and in your web page you link to this file.

Now if you change the content of the stylesheet file, all pages which will load it will have this change applied. Not only does this allow better caching which speeds up the page, it also speeds up your development work. And it gives your pages a more consistent look and feel. Another example could be that you wish to have the pages to have the font 'Arial', but later wish to test it with 'Helvetica' or 'Verdana'. A single file change will allow you to update all your pages in one go.

How should my master stylesheet look like?

First of all, you can name it whatever you want. As long as it ends with .css. I recommend to keep it short, simple, and name it something obvious. For example, you could name it global.css or master.css.

The content of the file should not start with the style tags and such, instead you can just start writing out your classes. For example, my master.css file could look like this:

How do I link to this master stylesheet from my web page?

Once you gave the external stylesheet a name you can link to it from your web pages. The link tag has to be in between the head tags. In the below example I have highlighted the link tag, you can see it is in between the head tags. The line is wrapped to two pages, but that is just to make the screenshot less wide.

And that is all there is to it to remote link to your stylesheet. Which is one of the three ways to include and define CSS into your web pages.

Tomorrow I will continue with the second way: embedded stylesheet.

Check back soon!