Creating an External Stylesheet (Tutorial Contest)

rajat.payrajat.pay BeginnerLink Clerk
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. What I tend to do is 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:
<style type="text/css">
body {
font-size: 11px;
color: black;
}
a:link {
color: blue;
}
</style>

Paste only the style information into the stylesheet: <style type="text/css"> and </style> can be deleted. Save the file.

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
The chances are high you also have styling littered in amongst your HTML tags. 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.
Sign In or Register to comment.