External stylesheets are a lot better than having your CSS code on every page for several reasons such as it saves time since there is less to edit, and it saves space. It also increases the amount of time needed for your page to load.
An external styelsheet is a single page that contains all the CSS needed on your site, and is then called from your site’s webpage.
First, open up your editor such as Notepad or Dreamweaver. Open up your layout’s coding. Between the <
head> and </
head> tags in your HTML page, you should see the following:
<style type="text/css"> ... CSS Codes ... ... CSS Codes ... </style>
Copy everything between the
<head> and </
head> tags, and paste them into a new document. Save this file as style.css.
Now go back to your layout page, and delete all the css codes including the
<style type="text/css"> and
</style> tags as well.
Paste the following code into your HTML document, between the <
head> and </
<link rel="stylesheet" href="style.css" type="text/css" />
This line of code will call the CSS codes in your style.css page, and insert them into the page, then loads the page as normal. Make sure you paste the
code in every page that you want to call the css.
If you have any questions about this tutorial, feel free to post them below.