Css Tutorial :Body Declarations

The first task with any new web site is to consider what blanket rules can be declared in the
body selector. Remember that every element contained in the body element will inherit its
values unless you specify otherwise. For example, to avoid having to declare the font-family
and font-size for every element, some blanket rules can be applied from the outset.
The first selector to define in text.css is for body. Notice that margin, border, and padding
properties have been declared, but more importantly so have the font-family and font-size properties using shorthand. These are specified for the whole web page, and any others that
take their style from text.css:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
}With the font-size reduced to 12px, the display looks a little more professional, and
Verdana makes the text a little easier on the eye. Notice that the declared font-size has no
effect on the headings (<h1> and <h2>), which retain their default font sizes, as discussed earlier.

Padding : Padding Declarations in Css

Padding

 
Padding is the distance between the edges (borders) of an (X)HTML element and the content
within it, and can be applied to any element.

Padding Declarations

 

Both length and percentage values are available, although there is no auto value, and negative
values cannot be declared for padding.
Let’s take the container div again, and this time add custom padding to each side:
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
background: #CCC;
}
Figure 3-7 shows how the paragraph within the container (highlighted by a thin border) is
spaced away from each edge by the given padding value.Percentage in this case refers directly to the parent element’s width. So if padding-left:
10% is declared, that equates to 10% of the parent element’s given width.

Css Tutorial : Margin Declarations

Margin

 
The margin property does exactly what it says on the tin. It is used to declare the margin between
an (X)HTML element and those elements outside of it. The margin can be set for the top, left,
right, and bottom of the given element. Note that margin values are not inherited from parent
elements. If they were, there would be chaos.

Margin Declarations

 
There are three choices of values for the margin property, which are length, percentage, or auto.
Note that if a value is 0, you do not need to add px.
Consider the following CSS for a container div. Note that it has a fixed width of 300px and
no margin properties.
/* Basic container */
#container {
width:300px;
border: 1px solid #000;
padding: 20px;
background: #CCC;
}

padding values declared in the <body> element.

/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding: 20px;
background: #CCC;
}