Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

3 Setting Up an External Sheet 3

Margins

 

1  2  3  4  5  6  7  8  9  10

1. Open your CSS editor. It can be simple notepad, Front page, Dreamweaver, or Top Style Pro. Create a new document and save it as stylesheet.css in the same directory/folder as your html doc. You should have the following open:

  • stylesheet.css open in your CSS editor with the following code in it from part 2

body {
background-color: #ffffff;
background-image: url(http://www.developingwebs.net/animatedmatrixtexture.gif);
background-repeat: repeat-y;
background-position: left;
background-attachment: fixed;
}

  • my.html open in your web browser which refers to the external stylesheet.css

2. Margins for the page are styles of the body. Hence we add them to the body element.

  • To set a uniform margin or 50 pixels around the page add the style margin: 50px;

3. To set Individual margins on top, bottom, left and right, you should specify each margin style. Try this:

margin-left: 80px;
margin-top: 0px;
margin-bottom: 10px;
margin-right: 30px;

This is the style sheet so far:

4. Type in your HTML pace and view your margins. Adjust the margins. Margins can be in pixels or percentages. Try percentage values.

5, Save your document Time to learn about Headers!

Next Week: Headers!



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2021 All Rights Reserved
Privacy and Legal