Atryeu Designs ~ A resource center for Web/Graphics Design, Computers and the Internet

Welcome to part 2 of my CSS guide! I should have written this guide first to help you better understand how to setup CSS, so I am sorry it has taken so long to get this written out. This guide will show you the three main ways of setting up and using CSS on your website and from there it is up to you to choose which way is best for you.

Embedded Style Sheets

If you went through the CSS Basics Part 1 guide already, you will have an idea about how to use the embedded style sheets. Embedded style sheets are added usually at the very top of your document and are enclosed in the following codes:

The Style tags are usually placed within the Head tags of your website's code...

Inline Style Sheets

Inline style sheets are still done within the same document but are not placed in the Style tags, they are added to the regular HTML tags instead like the example code below:

You use the ”style” tag in your HTML codes to add CSS code to specific HTML tags. The downside to using this method is that the CSS only affects the tags you place it in. If you want just a small area to use the CSS than this works fine, however if you want the effect to cover the entire page you should use either the embedded or external style sheet methods.

External Style Sheets

External style sheets are setup nearly the same as the embedded. You must create a new file however and add all of your CSS coding to the new file. There is no need to include to Style tags like you would with the embedded style sheets though. Just add whatever coding you wish directly into the new file. The file needs to be saved with the extention ”.css”. Next, in your website's document, somewhere in the Head tags, you need to add a Link tag to point to your CSS file. An example is below:

Where “yourcssfilelink.css” is located, you need to place the link to where your CSS file will be. This can either be just a path to the file or url. You can add more than one external style sheet if you choose to split your CSS into multiple files, just be sure to add a new Link tag for each style sheet you wish to add. When you start to add multiple files, you can add a Title property to the Link tag as well (example below) to keep track of what each style sheet is for.

If you have multiple style sheets, for example one for various page settings and another for your font settings, you can use a special Import code inside your style sheets to load the other style sheet. Let us say you have your main style sheet with various codes to adjust the look of your tables and basic page alignments. You also have a second style sheet with all of your font codes but you want to keep them organized and separated. In your main CSS file, at the very top of the file, you would add the following:

@import url(yourothercssfile.css)

You again can use just the path to the file or the full url. Make sure the Import code is the first code in your external CSS files!

Keeping Track of your Codes

When you are using either the embedded or external style sheets, you may want to add some notes to your code so you know what exactly the codes (or the overall style sheet, if it's external) is for. You can do this by using the Comments codes. The comments are hidden in the code itself and do not show up on the pages. They can only be seen in your pages source code if somebody bothers to look. With CSS, you create a comment like in the example below:

/*Your Comments Go in here */

This ends part 2 of the CSS guides. In part 3 we will go over some of the most commonly used CSS codes.