Archive for the ‘CSS Basic’ Category

How to set Padding with CSS

Tuesday, January 5th, 2010

Padding Property, is a function to set the distance between the border with content on an HTML element.
Css padding at crucial point in terms of making web pages, so instead I suggest that you really notice this css syntax.

(more…)

CSS Margin

Thursday, October 8th, 2009

The CSS margin properties define the space around elements.
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

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.

CSS Background

Wednesday, October 7th, 2009

What Does CSS Background ?

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:

(more…)

CSS Border

Tuesday, October 6th, 2009

What Does CSS Border?

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 : (more…)