CSS Basics

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

CSS Basics

Uploaded by

Copyright:

Available Formats

CSS Basics

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Basics

Uploaded by

Copyright:

Available Formats

CSS Backgrounds

 The background-color property specifies the background color of an element.

 With CSS, a color is most often specified by:

 So, here is how it works:

 top margin is 25px

 top and bottom margins are 25px

 all four margins are 25px

 top padding is 25px

 top and bottom paddings are 25px

 all four paddings are 25px

You might also like