Scribd
Upload
36 views

CSS Basics

The document discusses CSS properties for backgrounds, margins, and padding. It explains how to specify colors, images, repetition, and positioning for backgrounds. For margins and padding, it covers setting individual or all sides, allowed values, and using shorthand properties.

Uploaded by

Ariel Christian Viodor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views

CSS Basics

The document discusses CSS properties for backgrounds, margins, and padding. It explains how to specify colors, images, repetition, and positioning for backgrounds. For margins and padding, it covers setting individual or all sides, allowed values, and using shorthand properties.

Uploaded by

Ariel Christian Viodor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

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

You might also like