HTML PRIMER

by Jim Gordley
2008-2016

Most times when developing web pages there will be areas of the page that remain constat. These areas would be things lake a page header, perhaps a site logo, a footer or contact information and a navigation area, the links. The dynamic part of the page, the main page content will be in it's own area.

Keeping these areas separate from each other is most times done using a <div></div> pair. As it's name sake suggests it is meant to separte divisions or sections of a web page. It has no default displsy properties. Using a fictitional page as an example, a <div> could be used just under the navigation area and just before the page footer. With that <div> in place it is easy to now format the tag to better represent the look you want in your web page.

Notice that the banner, navigation area and footer are not within the <div> tags. With this kind of a set up you now have a template that can be used through out this web site giving it a consistant look.

Controlling Element Margins

Erlier we learned how to control the margin of a page. (see Page Margins)Now we will learn to control individual element margins. Controlling the margins of any element is done the same as controlling the margin in the page body. By using some or all of the margin properties it is possible to control the space on all four sides of the element (top, right, bottom, left)

Example

p {margin-left:75px; margin-top:15px;}

Using the example above all paragraphs <p> would have a 75 pixel left margin and a top margin of 15 pixels. Each margin top, right, bottom and left can set to any pixel value. If all four margin settings are going to be the same use the margin property without the hyphen-

Example

div {margin: 10px;}

This declaration would set all the margins top, right, bottom, left to 10 pixels. The table below describes each margin property

Margin Properties
PROPERTY DESCRIPTION
margin Margins on all four sides of the element are controlled
margin-top Only the top margin of the element is controlled
margin-right Only the right margin of the element is controlled
margin-bottom Only the bottom margin of the element is controlled
margin-left Only the left margin of the element is controlled

There is a short cut that can be used to control margins the trick is to remember the TRBL acronym [ Top Right Bottom Left ]

Example

div {25px;15px;30px;10px;}

Using the example above the margins of any <div> element would be set to {margin-top:25px; margin-right:15px; margin-bottom:30px; margin-left:10px;}

CLASS LAB DEFINING ELEMENT MARGINS
DO THIS WHY YOU DO IT
  1. On the task bar click the Notepad icon and select the index.html.

  2. Directly underneath the PAGE CONTENT comment, insert the following code

    <div id="content">

    Save the changes

  3. Scroll to the bottom of the page until you see the FOOTER comment.
    Directly above that comment, insert the following code.

    </div>

  4. On the task bar click on the Notepad icon and select the styles.css


  5. Add the following bold code at the bottom of the style sheet

    #content {margin:18px;}

  6. Save the changes to styles.css


  7. Refresh the index.html browser page.

Opens the index.html file in Notepad so it can be edited.

Defines this division of the page to be displayed using the attributes of content





To close the page division.






Opens the styles.css file in Notepad so it can be edited.


Defines the id selector #content property of margin to 18 pixels.






To view the changes in the browser.

Class Selectors