Backgrounds

CSS background properties are used to define the background effects for elements
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
background-size (CSS3)
background-origin (CSS3)
background-clip (CSS3)

15 Roi Yehoshua, 2018

Eliahu Khalastchi
 Background Color
The background-color property specifies the background color of an element
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 color of a page is set like this:
body {
background-color: lightblue;
}

16 Roi Yehoshua, 2018

Eliahu Khalastchi
 RGBA Colors
RGBA color values are an extension of RGB color values with an alpha channel, which
specifies the opacity for a color
An RGBA color value is specified with: rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all)
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

17 Roi Yehoshua, 2018

Eliahu Khalastchi
 Background Image
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
When using a background image, use an image that does not disturb the text
The background image for a page can be set like this:
body {
background-image: url("images/bricks.png");
}

18 Roi Yehoshua, 2018

Eliahu Khalastchi
 Background Image - Repeat Horizontally or Vertically
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
To repeat an image horizontally use background-repeat: repeat-x;
To repeat an image vertically use background-repeat: repeat-y;
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

19 Roi Yehoshua, 2018

Eliahu Khalastchi
 Background Image - Set position and no-repeat
Showing the background image only once is specified by background-repeat: none
The position of the image can be specified by the background-position property

body {
background-image: url("images/tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}

20 Roi Yehoshua, 2018

Eliahu Khalastchi
 Background – Shorthand Property
To shorten the code, it is also possible to specify all the background properties in one
single property called background
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
Example:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

21 Roi Yehoshua, 2018

Eliahu Khalastchi
 CSS Box Model
All HTML elements can be considered as boxes
Each box consists of:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

22 Roi Yehoshua, 2018

Eliahu Khalastchi
 CSS Box Model In Developer Tools
You can examine the box model of each individual element on the page by opening up
the browser developer tools and clicking on the elements in the DOM inspector

23 Roi Yehoshua, 2018

Eliahu Khalastchi
 Borders
The CSS border properties allow you to specify the style, width, and color of an
element's border
The border-style property specifies what kind of border to display
This property is required for all the other border properties to take affect
It can have from one to four values (for the top/right/bottom/left borders)
p.solid { border-style: solid; }
p.dotted { border-style: dotted; }
p.dashed { border-style: dashed; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge { border-style: ridge; }
p.inset { border-style: inset; }
p.outset { border-style: outset; }
p.mix { border-style: dotted dashed solid double; }

24 Roi Yehoshua, 2018

Eliahu Khalastchi
 Border Width
The border-width property specifies the width of the four borders
The width can be set as a specific size (in px, pt, cm, em, etc.) or by using one of the
three pre-defined values: thin, medium, or thick
The border-width property can have from one to four values (for the
top/right/bottom/left borders)
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

25 Roi Yehoshua, 2018

Eliahu Khalastchi
 Border Color
The border-color property is used to set the color of the four borders
The border-color property can have from one to four values (for the
top/right/bottom/left borders)
If border-color is not set, it inherits the color of the element

p.color_one {
border-style: solid;
border-color: red;
}

p.color_two {
border-style: solid;
border-color: red green blue yellow;
}

26 Roi Yehoshua, 2018

Eliahu Khalastchi
 Border – Individual Sides
There are also properties for specifying each of the borders (top, right, bottom, and
left)
If the border-style property has four values: border-style: dotted solid double
dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
If the border-style property has two values: border-style: dotted solid;
top and bottom borders are dotted
right and left borders are solid
If the border-style property has one value: border-style: dotted;
all four borders are dotted
The same works with border-width and border-color

27 Roi Yehoshua, 2018

Eliahu Khalastchi
 Border – Individual Sides

p.individual_sides {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

/* The same as: */

p.individual_sides {
border-style: dotted solid;
}

28 Roi Yehoshua, 2018

Eliahu Khalastchi
 Border – Shorthand Property
The border property is a shorthand property for the following individual border
properties:
border-width
border-style (required)
border-color
p.border {
border: 5px solid red;
}

You can also specify all the individual border properties for just one side:
p.leftBorder {
border-left: 6px solid red;
background-color: lightgrey;
}

29 Roi Yehoshua, 2018

Eliahu Khalastchi
 Rounded Borders
The border-radius property is used to add rounded borders to an element
This property is not supported in IE8 and earlier versions

p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}

30 Roi Yehoshua, 2018

Eliahu Khalastchi
 CSS Margins
The CSS margin properties are used to create space around elements, outside of any
defined borders
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:
auto - the browser calculates the margin
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
Tip: Negative values are allowed

31 Roi Yehoshua, 2018

Eliahu Khalastchi
 Margin – Individual Sides
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}

32 Roi Yehoshua, 2018

Eliahu Khalastchi
 Margin – Shorthand Property
The margin property is a shorthand property for the individual margin properties
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 property has two values: margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
If the margin property has one value: margin: 25px;
all four margins are 25px

33 Roi Yehoshua, 2018

Eliahu Khalastchi
 Margin auto
You can set the margin property to auto to horizontally center the 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

div2 {
width: 300px;
margin: auto;
border: 1px solid red;
}

34 Roi Yehoshua, 2018

Eliahu Khalastchi
 Margin Collapse
When two boxes touch against one another, their top and bottom margins are
collapsed into a single margin that is equal to the largest of the two margins
This does not happen on left and right margins
Look at the following example:
h1 {
margin-bottom: 20px;
}
h2 {
margin-top: 20px;
}

In the example above, the <h1> element has a bottom margin of 20px and the <h2> element
has a top margin set to 20px.
Common sense would seem to suggest that the vertical margin between the <h1> and the <h2>
would be a total of 40px. But due to margin collapse, the actual margin ends up being 20px.

35 Roi Yehoshua, 2018

Eliahu Khalastchi
 CSS Padding
The CSS padding properties are used to generate space around an element's content,
inside of any defined borders
CSS has properties for specifying the margin for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
All the margin 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

36 Roi Yehoshua, 2018

Eliahu Khalastchi
 Padding – Individual Sides
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

37 Roi Yehoshua, 2018

Eliahu Khalastchi
 Padding – Shorthand Property
The padding property is a shorthand property for the individual padding properties
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 property has two values: padding: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
If the margin property has one value: padding: 25px;
all four paddings are 25px

38 Roi Yehoshua, 2018

Eliahu Khalastchi
 Width and Height
The width and height properties are used to set the width and height of an element
They can be specified by:
auto (default) - the browser calculates the width and height
length values, like px, cm, etc.
percent (%) of the containing block
The width and height properties do not include padding, borders, or margins
They set the size of the area inside the element!

div {
width: 50%;
height: 200px;
background-color: powderblue;
}

39 Roi Yehoshua, 2018

Eliahu Khalastchi
 Box Sizing
The box-sizing property (CSS3) defines how the width and height of an element are
calculated: should they include padding and borders, or not
Possible values:
content-box (default) - The width and height properties (and min/max properties) includes only the
content. Border and padding are not included.
border-box - The width and height properties (and min/max properties) includes content, padding
and border
inherit - Inherits this property from its parent element
div.box {
box-sizing: border-box;
width: 50%;
border: 5px solid blue;
float: left;
}

40 Roi Yehoshua, 2018

Eliahu Khalastchi
 Exercise (2)
You are given the following HTML:
<div id="wrapper">
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>
</div>

Use CSS to make the page look like this:

41 Roi Yehoshua, 2018

Eliahu Khalastchi