Teacher: Stephen H.

Herbilla
Subject: Web Design 2
Date: September 21, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Borders
CSS Border Properties
The CSS border properties allow you to specify the style, width, and color of an element's
border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom
border, and the left border).
 p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Teacher: Stephen H. Herbilla

Subject: Web Design 2
Date: September 22, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Borders
CSS 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:
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

Specific Side Widths

The border-width property can have from one to four values (for the top border, right border,
bottom border, and the left border):
 p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

Teacher: Stephen H. Herbilla

Subject: Web Design 2
Date: September 33, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Borders
CSS Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
 name - specify a color name, like "red"
 HEX - specify a HEX value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
 transparent
Note: If border-color is not set, it inherits the color of the element.
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}
 p.three {
  border-style: dotted;
  border-color: blue;
}

Specific Side Colors

The border-color property can have from one to four values (for the top border, right border,
bottom border, and the left border). 
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
HEX Values
The color of the border can also be specified using a hexadecimal value (HEX):
p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}
RGB Values
Or by using RGB values:
p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}
HSL Values
You can also use HSL values:
p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}
Teacher: Stephen H. Herbilla
Subject: Web Design 2
Date: September 24, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Borders
CSS Border - Individual Sides
From the examples on the previous pages, you have seen that it is possible to specify a different
border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

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

The example above gives the same result as this:

p {
  border-style: dotted solid;
}

So, here is how it works:

If the border-style property has four values:

 border-style: dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

If the border-style property has three values:

 border-style: dotted solid double;
o top border is dotted
o right and left borders are solid
 o bottom border is double

If the border-style property has two values:

 border-style: dotted solid;
o top and bottom borders are dotted
o right and left borders are solid

If the border-style property has one value:

 border-style: dotted;
o all four borders are dotted

/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}

The border-style property is used in the example above. However, it also works with border-

width and border-color.

Teacher: Stephen H. Herbilla

Subject: Web Design 2
Date: September 25, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Borders
CSS Border - Shorthand Property
Like you saw in the previous page, there are many properties to consider when dealing with
borders.
To shorten the code, it is also possible to specify all the individual border properties in one
property.
The border property is a shorthand property for the following individual border properties:
 border-width
 border-style (required)
 border-color
p {
  border: 5px solid red;
}

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

Bottom Border
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
Teacher: Stephen H. Herbilla
Subject: Web Design 2
Date: September 28, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Borders
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element:

p {
  border: 2px solid red;
  border-radius: 5px;
}
Teacher: Stephen H. Herbilla
Subject: Web Design 2
Date: September 29, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
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 properties for setting the margin for
each side of an element (top, right, bottom, and left).
Margin - Individual Sides
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
ex.
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
Margin - Shorthand Property
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 properties:
 margin-top
 margin-right
 margin-bottom
 margin-left
So, here is how it works:
If the margin property has four values:
 margin: 25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
ex.
p {
  margin: 25px 50px 75px 100px;
}
If the margin property has three values:
 margin: 25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px

Use the margin shorthand property with three values: 

p {
  margin: 25px 50px 75px;
}
If the margin property has two values:
 margin: 25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px
p {
  margin: 25px 50px;
}
If the margin property has one value:
 margin: 25px;
o all four margins are 25px
Use the margin shorthand property with one value: 
p {
  margin: 25px;
}
The auto Value
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.

Use margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
The inherit Value
This example lets the left margin of the <p class="ex1"> element be inherited from the parent
element (<div>):
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

Teacher: Stephen H. Herbilla

Subject: Web Design 2
Date: September 30, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal
to the largest of the two margins.
This does not happen on left and right margins! Only top and bottom margins!
Look at the following example:
h1 {
  margin: 0 0 50px 0;
}
 h2 {
  margin: 20px 0 0 0;
}
In the example above, the <h1> element has a bottom margin of 50px 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 70px (50px + 20px). But due to margin collapse, the actual margin ends up
being 50px.

Teacher: Stephen H. Herbilla

Subject: Web Design 2
Date: October 1, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
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 properties for setting the padding
for each side of an element (top, right, bottom, and left).
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
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

Set different padding for all four sides of a <div> element:  

Ex.

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding - Shorthand Property

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-top
 padding-right
 padding-bottom
 padding-left
So, here is how it works:
If the padding property has four values:
 padding: 25px 50px 75px 100px;
o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px
ex.
Use the padding shorthand property with four values:
div {
  padding: 25px 50px 75px 100px;
}

If the padding property has three values:

 padding: 25px 50px 75px;

o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px
ex.
 div {
  padding: 25px 50px 75px;
}

If the padding property has two values:

 padding: 25px 50px;

o top and bottom paddings are 25px
o right and left paddings are 50px

ex.
Use the padding shorthand property with two values: 
div {
  padding: 25px 50px;
}
If the padding property has one value:

 padding: 25px;
o all four paddings are 25px

Use the padding shorthand property with one value: 

div {
  padding: 25px;
}

Padding and Element Width

The CSS width property specifies the width of the element's content area. The content area is the
portion inside the padding, border, and margin of an element (the box model).
So, if an element has a specified width, the padding added to that element will be added to the
total width of the element. This is often an undesirable result.

Here, the <div> element is given a width of 300px. However, the actual width of the <div> element
will be 350px (300px + 25px of left padding + 25px of right padding):

div {
  width: 300px;
  padding: 25px;
}

To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property.
This causes the element to maintain its width; if you increase the padding, the available content
space will decrease.
Use the box-sizing property to keep the width at 300px, no matter the amount of padding:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Teacher: Stephen H. Herbilla

Subject: Web Design 2
Date: October 2, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Setting height and width
The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.
CSS height and width Values
The height and width properties may have the following values:
 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value

Set the height and width of a <div> element:

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

Set the height and width of another <div> element:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
Setting max-width
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing
block, or set to none (this is default. Means that there is no maximum width).
The problem with the <div> above occurs when the browser window is smaller than the width of
the element (500px). The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling of small windows.

This <div> element has a height of 100 pixels and a max-width of 500 pixels: 

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Teacher: Stephen H. Herbilla

Subject: Web Design 2
Date: October 5, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:

 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
The box model allows us to add a border around elements, and to define space between
elements. 
Demonstration of the box model:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know
how the box model works.
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
Here is the calculation:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left
margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border +
top margin + bottom margin
Teacher: Stephen H. Herbilla
Subject: Web Design 2
Date: October 6, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element
"stand out".

CSS has the following outline properties:

 outline-style
 outline-color
 outline-width
 outline-offset
 outline

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following
values:
 dotted - Defines a dotted outline
 dashed - Defines a dashed outline
 solid - Defines a solid outline
 double - Defines a double outline
 groove - Defines a 3D grooved outline
 ridge - Defines a 3D ridged outline
 inset - Defines a 3D inset outline
 outset - Defines a 3D outset outline
 none - Defines no outline
 hidden - Defines a hidden outline

The following example shows the different outline-style values:

Demonstration of the different outline styles:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Teacher: Stephen H. Herbilla

Subject: Web Design 2
Date: October 7, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Outline Width
The outline-width property specifies the width of the outline, and can have one of the following
values:
 thin (typically 1px)
 medium (typically 3px)
 thick (typically 5px)
 A specific size (in px, pt, cm, em, etc)
The following example shows some outlines with different widths:
 p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}
p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}
p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}
p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

Teacher: Stephen H. Herbilla

Subject: Web Design 2
Date: October 8, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Outline Color
The outline-color property is used to set the color of the outline.
The color can be set by:
 name - specify a color name, like "red"
 HEX - specify a hex value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
 invert - performs a color inversion (which ensures that the outline is visible, regardless
of color background)
The following example shows some different outlines with different colors. Also notice that
these elements also have a thin black border inside the outline:

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
HEX Values
The outline color can also be specified using a hexadecimal value (HEX):
p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}
RGB Values
Or by using RGB values:
p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}
HSL Values
You can also use HSL values:
 p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}
Invert Color
The following example uses outline-color: invert, which performs a color inversion. This ensures
that the outline is visible, regardless of color background:

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}
CSS Outline - Shorthand property
The outline property is a shorthand property for setting the following individual outline
properties:
 outline-width
 outline-style (required)
 outline-color
The outline property is specified as one, two, or three values from the list above. The order of
the values does not matter.
The following example shows some outlines specified with the shorthand outline property:

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
Teacher: Stephen H. Herbilla
Subject: Web Design 2
Date: October 9, 2020
References: https://www.w3schools.com/css/css_border.asp
Lesson Summary
CSS Outline Offset
The outline-offset property adds space between an outline and the edge/border of an element.
The space between an element and its outline is transparent.
The following example specifies an outline 15px outside the border edge:

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
The following example shows that the space between an element and its outline is transparent:

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}