Creating an external stylesheet is easy. It’s just a matter of putting your CSS coding in a file with the right extension, and linking it from the head of your HTML document.
Every stylesheet must have the “.css” extension. I am boring and tend to name my stylesheets “stylesheet.css” or “stylesheet-[colour].css” where [colour] is the general theme of the website. First: create your CSS document. In Windows, if you right-click the desktop or folder you’re working in, you can create a New Text Document and then rename it appropriately.
Now, you need to copy in your style coding. This is quite probably in the head of your document, looking something a bit like this (where /* STYLES */ would contain your styling):
<style type="text/css"> /* STYLES */ </style>
Paste only the style information into the stylesheet: <style type="text/css"> and </style> can be deleted. You should not have any HTML, JavaScript or anything else other than CSS in your stylesheet. Save the file (remember to use a .css extension).
You can now link to your stylesheet between the <head> </head> area of your document, like so:
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
..where stylesheet.css, in the href="" attribute, is the name of the stylesheet you saved. This also works with full URLs like “http://www.domain.com/stylesheet.css”.
It may be that you have a lot of inline styling in your document. This normally looks something like this: <div style="position: absolute; [..]">. If this is the case, and you want to speed up your pages by moving the styling into your stylesheet, you’ll need to separate your style from content.