Setting Document Defaults & Creating a Wrapper

Zero-out the page

• K10a - (time: 3:50)
  • When working with css positioning, it is wise to set the margin and padding of the body element to zero due to variations between the sizes of the margins of different browsers. This is called zeroing out the page.
  • This negates the effects of differing browser defaults which can defeat precision positioning. It provides a uniform starting point for page layout that will be consistent from one browser to another.
    • Note differences between the margins of the body element in Internet Explorer 7 and Firefox 3:
      • FF3: body { display: block; margin: 8px; }
      • IE 7: body { display: block; margin: 15px 10px; }
  • Once set, there will be no gaps on the sides of the document viewport unless provided by elements such as the default top and bottom margins on many block level elements as specified by a user agent style sheet or else those explicitly specified in an author's style sheet.
  • Here is how to do it. There is no need to provide a unit of measurement when specifying a size of zero:

    body  {
        margin: 0;
        padding: 0;
    }

Also set other body tag properties

• K10b - (time: 1:05)
• While you're at it...
• It is also a good idea to set the default font, font size and font color for the document at the same time.
  • Text and font properties are inherited. Therefore, all text will use these font settings unless overridden by a child element.
• The page's background-color also ought to be specified by the body selector.
• Here is the result of all this:

  body  {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
      color: #000;
      background-color: #BBB;
      margin: 0; 
      padding: 0;
  }

Creating a wrapper or container div

• K10c - (time: 4:35)
  • In your basic page setup it is usually advisable to create a container or wrapper div that will contain all of your page's content.
  • This allows you to set a width that you would like your content to be viewed at, either in pixels (the most common), percent, or ems.
    • width: 970px;
    • margin: 0 auto; ...is used to center container relative to the body.
  • The container can also be used to set a background color for the content.
    • background-color: #FFF;
    • Note that the body background color will be seen outside the wrapper/container.
  • If you are setting a pixel size, take into account the most common resolution settings when you do it.
    • Remember that you want to do your best to avoid the always unpopular horizontal scroll bars and to allow room for browser chrome.
  • Example

Assignment:

• K10d - No video, use the written text for the assignment.

1. Create a new html5 file.
2. Name it yourlastname_K10.html
3. Define your css in the head of the html file.
4. Using the body tag:
   1. Zero the page out.
   2. Set the document's default font to Times New Roman with a line height of 1.2em
   • Tip: think about the name of the font - it has multiple words - does it need anything else when you put it into the code?
   3. Set the default text color to #220
   4. Word spacing of .25 em
   5. Line height of 1.2 em
   6. Set the background color to #DA3
5. Create a div:
   1. Give it the id of "container"
   2. Put two paragraphs of Lorem Ipsum text in it.
   3. Make it 50 ems wide.
   4. Margins
      1. Top: 5 em
      2. Bottom: 2 em
      3. Center the div on the page.
   5. Background color of #FFD
   6. Padding:
      1. Top and bottom: 1em
      2. Left and right: 2 em

 

© 2014 Dan Hitchcock Vaughan and licensors