CSS LESSONS

Lesson 1.

Box Properties

For understanding the Box properties we have taken a simple table which contains only one cell. A box
has a content area and surrounding padding, border, and margin areas.
Each box has four edges. Each edge may be broken down into a top, right, bottom, and left edge.
1.Content edge
The dimensions of the content area of a box we can set through width and height property.
2.Margin edge
The margin edge surrounds the box margin.
3.Padding edge
The padding edge surrounds the box padding.
4.Border edge
The border edge surrounds the box border.
Now let's try set dimension for Box. Please, write on blackboard.

height:120px; width:230px;

After that hit Preview button.

Exercise 1!
Try set another parameters. F.e.
height:130px;width:300px;
height:3cm;width:8cm;
height:25%;width:50%;
height:48mm; width:100mm;
height:23em;width:em15em;
height:43;width:32;

background: #FF0000;

Lesson 2.

MARGIN PROPERTIES
Margin properties: margin-top, margin-right, margin-bottom, margin-left, and margin. Margin properties specify the width of the margin area of a box. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left.
Please, write on blackboard.
margin:120px;
margin:12px 23px 14px 19px;
margin:13px -3px -33px 25px;
margin-top:23px;
margin-bottom:16px;
margin-left:11px;
margin-right:44px;

After that hit Preview button.
Exercise 2!
margin:24px;
margin: 24px 34px;
margin:12px 24px 32px -120px;
margin-top:36px;
margin-bottom:36px;
margin-left:36px;
margin-right:36px;

Try set another values.

Lesson 3.

PADDING PROPERTIES
This is a shortcut attribute, and we can set the padding for four edges of an element with one statement or with padding-top, padding-bottom, padding-left and padding-right attributes.
Please, write on blackboard.
padding:120px;
padding:12px 23px 14px 19px;
padding:13px -3px -33px 25px;
padding-top:23px;
padding-bottom:16px;
padding-left:11px;
padding-right:44px;

After that hit Preview button.
Exercise 3!
padding:44em;
padding:22em 33em;
padding:12px 14px 16px;
padding:12px 15px 33px 17px;
padding-top:18px;
padding-bottom:24px;
padding-left:28px;
padding-right:25%;

Try set another values.

Lesson 4.

BORDER PROPERTIES
This is a shorthand attribute for setting the width, style, color of all four borders around an element.
Please, write on blackboard.
border:120px;
border:12px 23px 14px 19px;
border:13px -3px -33px 25px;
border-top:23px;
border-bottom:16px;
border-left:11px;
border-right:44px;

After that hit Preview button.
Exercise 4!
border:44em;
border:22em 33em;
border:12px 14px 16px;
border:12px 15px 33px 17px;
border-top:18px;
border-bottom:24px;
border-left:28px;
border-right:25%;
Try set another values.
Exercise 5!
border-style properties
You can use border-top-style, border-bottom-style,border-left-style, border-right-style.
The values for border-style are none, hidden, dotted, solid, double, groove, ridge, inset, outset.
Please, try these values:
border-style:dotted;
border-style:double, inset, groove;
border-top-style:groove;
border-left-style:outset;
border-right-style:inset;

Try set another values.
border-color properties
You can use border-top-color, border-bottom-color,border-left-color, border-right-color.
You can use values like these: red, lightyellow, RGB(72, 93, 155), #f00000.
Please, try these values:
border-color:black;
border-color:#FFFF00;
border-top-color:#C00;
border-left-color:#ff9900;
border-right-color:white;

Try set another values.
border-width properties
You can use border-top-width, border-bottom-width,border-left-width, border-right-width.
You can use values like these:13px; 14 mm; 15cm; 26em; thin; thick; medium;
Please, try these values:
border-width:24;
border-width:12px 45px;
border-top-widthr:thin;
border-left-width:15%;
border-right-width:2em;

Try set another values.

Note! Pay attention to order of atributes!
border:12px;
border-style:inset;
border-color:green;

----------------------- 
 The border-radius and box-shadow 
properties are very powerful things. 
Through them we can make  round and 
shadow borders . Please, try these 
examples and write your own one!

border-radius: 27px;
box-shadow: 8px 330px 20px 8px #000000;
background-image: linear-gradient(top,#ffffff, #000000);
background-clip: padding-box;
opacity: 0.7;

border-radius: 25px 50px 80px 75px;
box-shadow: 10px 20px 10px 22px #000000;
/*10px-horizontal, 20px-vertical, 10px-blur, 22px-spread*/
background-image: linear-gradient(left, #3cff0f, #0a10ff);
background-clip: padding-box;
opacity: 3;

background-color: #ff1753;
border: 2px solid #56fc98;
border-radius: 50px;
 box-shadow: 10px 20px 17px 22px #000000;
background-image: linear-gradient(left,#3cff0f, #0a10ff);
background-clip: padding-box;
opacity: 0.2;