How to Link HTML Page with the CSS

We all want our the pages on our websites to look as cohesive and interesting as possible, the most simply way to do this is to link your HMTL pages to the CSS page! This allows for the same design format such as background color, font, etc to show up on each page!

First you have to open Adobe DreamWeaver and select “Create- New : HTML” and press okay. Then in order to make sure you can link your new HTML page to your CSS, you must upload from your thumb drive all the files from your website including your CSS.

Once you have created your new HTML page, go to the top of the tool bar and go to File, and click under ” Save As”

Important Reminder : Make sure that it is saved as an “text. HTML” under your thumb drive or to the folder designated in your thumb drive for your website.

Inorder to link your CSS page you must first open it! The files you have uploaded to your website should appear at the bottom right of the screen, double click on “fpcss.css” this should allow you to open up your CSS page.

Next, there are a lot of small steps with these last instructions so pay close attention! Go to the top of the tool bar and Click “Format”, it should drop down and go to “CSS Styles”, then go to “Attach New Style Sheet”. REMINDER: make sure you are working in the HMTL page and not the CSS page! (in order to ensure this, click the tab attached with the HTML page you wish to link to the CSS, and then continue to complete the instructions above)

Type in the CSS page (mine was fpcss.css) that you wish to link your HTML page to in the search box that pops up after you complete the prior instructions, make sure you are linking the two pages, and press OK!

The CSS and HTML are now linked, Congrats! On my CSS link I decided to make the background of each HTML page blue and therefore the newly added HTML page is also blue! Type in any text for your page, and you are done!

-Lindsey Jamieson

~ by lindseyjamieson on October 20, 2011.

%d bloggers like this: