Creating and Linking External Style Sheets

Important Suggestions

It is always recommended that you create your styles externally, so if you want to make changes you don't have to do so for every individual page.

Lesson

Open up Dreamweaver and create a file called main.css. If you're using notepad put quotations around the name when saving, like so "main.css".

Step 1 - Creating a CSS external stylesheet

On the menu find Window>Files, and right click (For Macs: Press Ctrl+Click) New File the file will appear highlighted. Input the text main.css. Double click the file that you have made and you should see a blank page with the header /* CSS Document */. That's it, you've made an external CSS document.

Step 2 - Linking an External CSS file to an HTML page

Link Method
```
<link rel="stylesheet" type="text/css" href="main.css">
```
Import Method
```
<style type="text/css">
@import url("main.css")
</style>
```
In the <head> section of your HTML is where the CSS file is linked, it can also be linked in the <body> by using the import method, but first the style will be used. Click anywhere in the of the HTML and apply the following code. Note: If you have your CSS files in a separate folder you need to include the folder root to the CSS file when linking it. The second way of linking a CSS file is the @import method. If you want the CSS for a specific media such as printing put the media type right after the import. I would recommend that you use the link style because older versions of IE and Netscape don't support the @ import method.
Step 3 - Importing Internal CSS sheets into External format

Find the internal styles in your site located in tags or in between <style type="text/css">...</style>. Copy the styles and delete the tag or internal style decelerations. Paste the styles into your external style sheet, assuming that you have already linked the CSS sheet to the page.One important thing to remember for tag declared styles, you need to identify the specific text that it affected by using usingCSS Selectors in the external CSS page.
Conclusion

You Know...
- how to to create an external Stylesheet
- how to link an external CSS sheet to your page
- how to link in two styles; link and import methods
- how to import internal styles into external styles
Questions or Comments? Hit the "Comments/Help" tab

You need to log into your account to post comments!Sign In