In writing of the padding property, almost equal to the margin property in writing

Look Examples in below :

1.

div#sidebox {padding:10px;}

Its purpose is to show that the four sides of the selector sidebox are spaced 10 pixels between the border and content.

2.

div#sidebox {padding:10px 20px;}

Intent of the code above is to show that the distance between border and content on the top and bottom of the selector sidebox is 10 pixels while on the left and right is 20 pixels.

3.

div#sidebox {padding:10px 20px 30px 40px;}

or it could be way below:

div#sidebox {padding-top:10px; padding-right:20px;
padding-bottom:30px; padding-left:40px;}

Intent of the code above is to show that the distance between border and content of the selector sidebox on the top 10 pixels, right 20 pixels, 30 pixels down, and the left is 40 pixels.

4.

div#sidebox {padding-top:10px;}

Intent of the code above is to show that the distance from the border with the content selector sidebox on the top is 10 pixels, while others limit Default value. And besides padding-top, also with the property padding-right, padding-bottom and padding-left.

In addition to the units of px (pixels) can also be a unit emphasis (em) or percentages (%), as an example:

div#sidebox {padding:1em 2%;}

The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

1.

div#sidebox { margin:10px; }

Code above shows that the four sides of the selector sidebox is 10 pixels between the border and the selector.

2.

div#sidebox { margin:10px 20px; }

Code above shows that the upper and lower limits of the sidebox selector is 10 pixels while the left and right borders within 20 pixels.

3.

div#sidebox { margin:10px 20px 30px 40px; }

or it could be way below:

div#sidebox { margin-top:10px; margin-right:20px;
margin-bottom:30px; margin-left:40px;}

Code above shows that the upper limit of the selector is 10 pixels sidebox, right limit is 20 pixels, the lower threshold is 30px and 40px is the left boundary.

4.

div#sidebox {margin-top:10px;}

Code above shows that the upper limit of sidebox selector is 10 pixels while the other boundary Default value. And other than margin-top, also can be with property margin-right, margin-bottom and margin-left.

Besides using px units (pixels) can also be a unit emphasis (em) or percentages (%), as an example:

div#sidebox {margin:1em 2%; }

The result? …
You can do experiments and test yourself on your browser. that way you will make the game more challenging.

Background property is to create the background effect on an HTML element.

CSS properties used for background effects: background-color, background-image, background-repeat,background-attachment, background-position.

There are several kinds of properties on the following background,

Look Examples in below:

• Background Color, is to set the background of an element with a solid color.
  Example:

h1 {
   background-color:#FFFFFF;
   }

• Background Image, is to set the background of an element with the image.
  Example:

h1 {
   background-image: url(nama-gambar.gif);
   }

• Background Repeat, is to set the background of an element with an image that can be repeated or not.
  Example:

h1 {
   background-image: url(your-Picture.gif);
   background-repeat: no-repeat;
   }

other than no-repeat also, the value can be inherit, repeat, repeat-x and repeat-y.
Try one by one to see the effect happen!.

• Background Attachment, is to set the background of an element with a picture, if can be scroll or not.
  Example:

h1 {
   background-image: url(nama-gambar.gif);
   background-attachment: fixed;
   }

Other than fixed also, the value can be inherit and scroll
Try one by one to see the effect happen!.

• Background Position, is to set the location / position of a background picture element.
  Example:

h1 {
   background-image: url(nama-gambar.gif);
   background-repeat: no-repeat;
   background-position: top;
   }

Other than top also, the value can be inherit, center, left, right, and bottom
Try one by one to see the effect happen!.

• Background,is to declare all the background properties into one. This method most widely used by web designers because it can shorten your work time.
  Example:

h1 {
   background:#FFFFFF url(nama-gambar.gif) no-repeat left top;
   }

Border property is to make the outline on an (x)HTML element.

The border-style property specifies what kind of border to display,
such as border width, border color and border style ( solid, dotted, dashed, thick, thin, double, etc).

There are several properties on the Border as follows,

Look Examples in below :

• Top Border, to set the upper edge of the line.
  Example:

div {border-top-style:solid;
     border-top-width:1px;
     border-top-color:#FF0000;
     }

• Right Border , to set the right sideline.
  Example:

div {border-right-style:double;
     border-right-width:4px;
     border-right-color:#000000;
    }

• Bottom Border , to set the lower edge of the line.
  Contoh:

div {border-bottom-style:dashed;
     border-bottom-width:thick;
     border-bottom-color:#FF0000;
    }

• Left Border, to set the left sideline.
  Contoh:

div {border-left-style:dotted;
     border-left-width:thin;
     border-left-color:#FF0000;}

How to combine CSS Border?

If you want to combine all the border properties in one declaration, the method is as follows:

div {border-top:1px solid #000000;
     border-right :2px dashed #cccccc;
     border-bottom:3px dotted #999999;
     border-left :4px double #333333;
}