CSS Backgrounds
The background-color property specifies the background color of an element.
The background color of a page is set like this:
Background
Color
With CSS, a color is most often specified by:
a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
The background-image property specifies an image to use as the
background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Background
Image
By default, the background-image property repeats an image
both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or
they will look strange, like this:
Background
Image - Repeat
Horizontally or
Vertically
Showing the background image only once is also specified by
the background-repeat property.
Background
Image - Set
position and
no-repeat The position of the image is specified by the background-position
property.
CSS Margins
The CSS margin properties are used to create space around
elements, outside of any defined borders.
With CSS, you have full control over the margins. There are
CSS Margins properties for setting the margin for each side of an element (top,
right, bottom, and left).
CSS has properties for specifying the margin for each side of an
element:
Margin -
All the margin properties can have the following values:
Individual auto - the browser calculates the margin
Sides length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the
parent element
The following example sets different margins for all four sides of a
<p> element:
To shorten the code, it is possible to specify all the margin properties in one property.
The margin property is a shorthand property for the following individual margin
Margin - properties:
Shorthand
Property
So, here is how it works:
If the margin property has four values:
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
If the margin has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
If the margin has two values:
margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
If the margin has one values:
margin: 25px;
all four margins are 25px
You can set the margin property to auto to horizontally center the
The auto Value element within its container.
The element will then take up the specified width, and the
remaining space will be split equally between the left and right
margins:
CSS Padding
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are
CSS Padding properties for setting the padding for each side of an element
(top, right, bottom, and left).
CSS has properties for specifying the padding for each side of an
element:
Padding -
Individual
Sides
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the
parent element
Note: Negative values are not allowed.
The following example sets different padding for all four sides of a
<div> element:
To shorten the code, it is possible to specify all the padding
properties in one property.
The padding property is a shorthand property for the following
individual padding properties:
Padding -
Shorthand
Property
So, here is how it works:
If the padding property has four values:
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
If the padding has three values:
padding : 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
If the padding has two values:
padding : 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
If the padding has one values:
padding : 25px;
all four paddings are 25px
