12 - Beginning CSS - The body Tag ~

Remember The Ten Commandments of Web Design says: "Thou Shalt Separate thy Code from thy Content."

Contemporary Web standards and just plain-old elegant web design dictate that you control your pages with separate, external styling sheets removed from the presentation itself. It makes your files smaller, more accessible, streamlined and flexible. Plus it makes you look like you know what you are doing …


Using CSS as a code language is how you do this. It shows sophistication, simplicity and elegance.

No matter what design layout you need, it all starts with the body and html tags in a

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

Get Adobe Flash player

  This tutorial is first in a series:

1 - Body    2 - HTML    3 - Containter  4 - Header    5 - Nav     6 - Content   7 - Footer  

Step #1: Open your Index Page in Dreamweaver ~

Double-Click on your index page to open it in Dreamweaver.


Step #2: Find the CSS Panel ~

Then open the CSS Styles panel by going to: Window > CSS Styles (if necessary) and Double-Clicking

… and hit All.


Step #3: Set Properties Button ~

Click the "Show only set properties" button.


Step #4: New CSS Rule ~

Click on New CSS Rule.


Step #5: New Style Sheet ~

Select New Style Sheet.


Step #6: Create the body tag ~

Select Tag

… type body

… if body is already there - you're good - Hit OK.


Step #7: Name Your Style Sheet ~

Name your style sheet - call it styles


Make sure you save the CSS document IN THE ROOT FOLDER OF THIS PROJECT.


Step #8: Set the body tag Attributes ~

Press OK a couple of times until you see this, and then click Box …

… and set Padding and Margin to zero.

 

 

Zeroing the padding and margin forces the page to go all the way to the edge of the page.

 

Step #9: Box height 100 % ~

Set the Height to 100% …

… click OK.


Step #10: Your Style Sheet Looks Like This ~

Expand the CSS Styles panel like this …

… so you can see the Properties panel which reveals details of your code!

css styles


Last Step: Save and Attach ~

That's it! You just made a CSS style sheet and added your first style to it.

Make sure your new styles.css document IN THE ROOT FOLDER OF YOUR NEW PROJECT, attach it, and continue working …


Other Resources: