DIY: Creating an External CSS Style Sheet

When I started looking at CSS, I decided that one of the easiest ways for me to learn to implement it was with an external style sheet. That way I could see the content (html) and style (css) of my website separately.

After some fussing around and some tutorial help, I figured out how to create a style sheet for an external CSS sheet that links to my pain page, index.html, in Dreamweaver. I’ll let you know how I did it.

FIrst, if you are in Dreamweaver, you need to go to File- New… A window will pop up and you should choose CSS from the list on the left. Then hit Create in the lower right corner. It will bring up a blank sheet called “untitled 1.” You will want to save this as something you can remember. I chose “style” as the name for mine. It comes out as “style.css”. When you save it, it should appear along with your index file in the sidebar on the right, with the rest of your website content. This indicates that the page has been created and stored in your site folder, but there is one other thing to do.

Because the style sheet is separate, you will need to go back to your index.html and tell it to look to that particular document, “style.css”, for the look of the website.

So if it isn’t open already, go ahead and open your main page file, or the “index” file. We will need to create a link to the style sheet with this line of code, which you paste above the <body> and the <title> tag in your index:


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


In this case, the place where it says “mystyle.css” should have your document name. For instance, since I named mine “style.css”, I retyped that part to reflect that. Save your work.

Now you are ready to start using your external style sheet for CSS! I find that  personally an external sheet keeps me from getting confused when I am trying out CSS stuff. Any questions or additions, let me know!

-Abby Vanim

~ by avanim on January 20, 2010.

%d bloggers like this: