Create a New CSS Document in Dreamweaver

    ●   Create a new CSS document and add the basic foundation of your website.

Learn About:

ID Tags HTML vs. Body TagsCSS Documents

  •   This tutorial is part of the What in the World and Home-Sweet-Home Portfolio Projects.

Step #1: Open a CSS document in Dreamweaver ~

Go to: File > New and select CSS.

new css file

Step #2: body and html tags ~

Start by creating your body and html tags, like this:

Remember, your body and html tags are like the foundation of your pages and you should start with them.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #3: Container tag ~

Next you need the container tag …

Don't forget that id tags start with a hashtag #

Containers contain things!

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #4: Header tag ~

Now you need a header tag …

header css tag

Step #5: Nav ~

Then nav tag …


Step #6: content and footer tags ~

Also add a content tag and a footer tag …

content and footer css tags

Step #7: Save as ~

Go to: File > Save as … and save your file as styles in the Root Folder of your project …

Step #8: Link your CSS file to your index Page ~

Open the index page of the site you're currently working on …

opn your index page

… open the CSS panel (if its not open already) by going to: Window > CSS Styles

css panel

… click the link icon link icon at the bottom of the CSS panel …

attach style sheet

… click Browse …


… locate the style sheet you just created and attach it your index page.

Step #9: Begin to Modify your CSS ~

Make your body tag height:100%;

… also make your html tag height:100%; too.

body tag height 100 percent

Step #10: Insert the Divs into your page ~

Lastly, you must insert the divs you just created into your page of your current project.

opn your index page

Open your current index page and go to: Insert > Layout Objects > Div tag

… and insert the divs you created into your page, starting with the #container div.

Remember: Everything goes inside the container div, like this:


Step #11: Modify your New CSS ~

Open your CSS documents from previous projects and look at them. Take what you want from your previous work and incorporate the code for your current project.

body tagsk

Last Step: Save and Upload your Work ~

If you have a web server, save your pages, upload them and attach the link to your site …


Other Resources: