Current Time 00:00 Total Time 00:00
We are always looking for input on our tutorial content. If you have a suggestion, comment, additional information on this topic that you feel should be added, drop us a line. We appreciate your input.
Title: The Box Model - Part 2 Category: CSS
Topic: Essential Training Series Publish Date: 2015-01-02
Views: 239
Author: Mike King
In Part 2 of this tutorial we review the Box Model and the properties that make up the box model properties. We start the demonstrations by confirming that our development environment is ready for the labs, then go into setting up the style tags in the head section of our HTML5 document. We style this demonstration using the embedded styles as it is easier to view the style changes and the impact without switching back and forth between files. We review the CSS Reset that we are using in the external style sheet to make certain that we are seeing in our browser windows what we intend to see. Using backgrounds we set the background properties of the HTML element, the body element and the Div elements so that it is easier to view the changes we are making. We set a width for the body element and demonstrate the uses of the margin-right and margin-left and how they can be used to center the content. We demonstrate the use of padding and its impact on the overall content of the page, we implement borders and demonstrate how borders can change the content area of your elements. In the presentation we review how to calculate the total width of the element based on the setting that we have configured in the embedded styles.