CSS: The basics part 4 – External CSS

The last and maybe most efficient way to code CSS is the external CSS file. Let me explain that for you (since that is what we are all here for… right? :P). Before you continue, make sure you at least read part 1 of this series.

Open up notepad, notepad++, dreamweaver or whatever you want to be using as an editor. The file you will be creating now is the CSS file. This is actually rather easy, you just need to start typing CSS formatting as you do with embedded CSS.

Just list all tags you want to format and write all the classes you want to be using. My basic CSS file looks as following:

Nothing else is in there. This nothing more than a definition of all your classes. Save this file with the .CSS extension. Do keep notes of how you named the file and where it is located.

Right, off to our HTML file. AGAIN, I made a basic HTML script which looks like this:

Now we have to link our CSS file to the HTML document. As you might has expected this needs to happen in the HEAD tag. However, the syntax to do this is slightly different then when you use embedded SQL.
Within the HEAD tag following line needs to be added:

<link rel=”stylesheet” type=”text/css” href=”external.css” />

The filename marked in bold is the relative path to your CSS file. In my case the file is named external.css (captain obvious strikes again).
Your HTML file should look something like this:

Result of this HTML code is this:

Very Funky.. Now I also have an unused class in my CSS file. I’m now going to link it to my P tag.


Click the picture to enlarge!

Look at the text orientation.. Right to left. That is what the option direction:rtl did… ;-)

This concludes the basic series of CSS scripting. You should now have all the tools to go on a CSS spree. The only thing that can stop you is your own imagination (this might actually already be frightning enough)

Let me know if you have any questions!


3 thoughts on “CSS: The basics part 4 – External CSS

  1. Pingback: CSS: The basics part 3 – Inline CSS « Tech-o-rama

  2. Pingback: Advanced webcoding: Javascript – Part 1 « Tech-o-rama

  3. Pingback: CSS: The basics part 4 – External CSS | All kinds of ….solutions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: