Cascading Style Sheets Page Layout

         As we saw in the introductory notes, CSS is used to separate content from presentation in Web documents.CSS can also be used to separate the presentation (fonts, colors, and so on) from the page structure.Using CSS results in smaller Web page documents (HTML5 files),which saves on bandwidth and eases Web site maintenance.

Advantages of Using CSS For Page Layout :

• When CSS is used to configure page layout in addition to formatting, all the following advantages of using CSS for formatting are enhanced: 

Greater typography control. This includes font size, line spacing, letter spacing, indents, margins, and element positioning without using tables.

Style is separate from structure. The formatting and page layout can be configured and stored separately from the content section of the Web page document. When the styles are modified, the HTML remains intact. This means that if your client decides to change something as small as the background color or as potentially huge as the page layout, you may need to only change one file that contains the styles, instead of each Web page document.

Potentially smaller documents. Since both the formatting and page layout are separate from the document, the actual HTML documents should be smaller.

Easier site maintenance. Again, if the styles or page layout need to be changed it may be possible to complete the modifications by changing only a single file – the style sheet.

The CSS Box Model:

CSS Shorthand Notation :

• It can get quite tedious writing a separate style for each of the four sides of an element, whether you are specifying margins, padding, or borders. CSS provides several different shorthand ways to specify these properties within a single declaration. 

• In any shorthand notation the order is always top, right, bottom, left. 

• So instead of writing: 

        {margin-top:5px; margin-right:10px; margin-bottom:8px; margin-left:4px}
 

 You can write:

      {margin: 5px 10px 8px 4px;}

• Note that there is just a space between each of the values, no delimiters such as a comma are used. 

• You also do not need to specify all four values when using the shorthand notation. If you do not provide all four values, the opposite side’s value is used as the missing value.

•  For example: {margin: 12px 10px 6px;} will set the missing value for the left margin as 10px which is the value that is specified for the right margin. 

• Similarly: {margin: 12px 10px;} will set the missing bottom margin to 12px and the missing left margin to 10px.

• If only a single value is specified, such as {margin: 12px;} then all four sides are set to this single value. 

• Note when using the shorthand notation, it is not possible to set only the bottom and left margins without providing some values for the top and right, even if those values are both zero. In cases such as this, you can write 0 without supplying a value type, such as:

• {margin: 0 0 4px 8px;} 

• The same shorthand rules apply to padding and border, as well as margin.

The CSS Box Model : 

• You can adjust three different aspects of the box with CSS: margin, border, and padding. 

• For the margin you can set the distance between this box and adjacent elements in the markup. 

• For the border you can set the thickness, style, and color. 

• For the padding you can set the distance of the box’s content is to be separated from its border.

• Since every box has four sides, properties associated with margins, border, and padding each have four settings: top, right, bottom, and left.

• The box border has three associated properties:

           Width.  This includes thin, medium, thick, or any unit (ems, px, %, …).
           Style.  This includes none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and                                outset.
          Color. Any color value can be used.

• The shorthand notation for styling all four borders the same, width, style, and color is:

.borderclass {border: 4px solid green; }

Result

The Box Padding : 

• Padding adds space between the box’s content and the border of the box.

• As part of the inside of the box, it takes on the color of the box’s background.

• The markup on the next page illustrates two paragraphs, one with and one without padding.  

The Box Margins : 

• Margins are slightly more complex that borders and padding.  

• Most block level elements (paragraphs, headings, lists, etc.) have default margins (see CSS – Part 1 page 10).  

• Consider the example shown on the next page which illustrates a heading and two paragraphs.  

         The first case shows the default case.

         The second case shows the borders and backgrounds turned “on” to illustrate how the margins   create space between the elements.

        The third case illustrates what happens if the margins are set to zero.  The elements then touch one another.