REVIEW

What are the four parts of a CSS Box

model?
Ans:
1. Margin
2. Border
3. Padding
4. Content
In these parts of a box, which can used to
adjust the position of an element?
Ans:
Margin
How can you move an element upward?
Ans:

Use the margin-top property and use

a negative value.
ACTIVITY
 Count the number of squares and rectangles.

Why did you experience difficulty in counting in the previous rectangles and
squares? How did you know the number of those shapes despite the similarity of
its color?
Identify its border style?
 Activity
1. You will be grouped into 4 and you will open your previous
activity.
2. Each group will be given an assigned codes.
3. Give each member a task.
4. After encoding, answer this:
a. What happen to the border when you use those properties
and values?
5. Once done, your group will be called and one member will report
their answer.
Processing
Group 1(Border style)
Border Style
The border-style property specifies what kind of border to display.
P{
border-style:solid;
}
 Border style
The following values are allowed:
dotted - Defines a dotted border
Ex. p.dotted {border-style: dotted;}

dashed - Defines a dashed border

Ex. p.dashed {border-style: dashed;}

Border style
 solid - Defines a solid border

p.solid {border-style: solid;}

 double - Defines a double border

p.double {border-style: double;}

Border style

 groove - Defines a 3D grooved border.

The effect depends on the border-color
value

p.groove {border-style: groove;}

 Border style
 ridge - Defines a 3D ridged border. The effect
depends on the border-color value

p.ridge {border-style: ridge;}

 inset - Defines a 3D inset border. The effect
depends on the border-color value

p.inset {border-style: inset;}

Border style
 outset - Defines a 3D outset border. The effect
depends on the border-color value

 hidden - Defines a hidden border

p.hidden {border-style: hidden;}

 none - Defines no border

p.none {border-style: none;}
Border Properties

Note: None of the OTHER CSS border properties

described below will have ANY effect unless
the border-style property is set!
Border Width
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;
}
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.
• can have from 1 to 4 values (top, right, bottom,
left border).
Border Color
p.one {
border-style: solid;
border-color: red;
}

p.three {
border-style: solid;
border-color: red green blue yellow;
}
 Border Color
• The border-color property is used to set
the color of the four borders. p.one {
border-style: solid;
• The color can be set by: border-color: red;
o name - specify a color name, like}
"red" p.one {
border-style: solid;
o Hex - specify a hex value, like border-color: #FF0000;
"#ff0000" }
o RGB - specify a RGB value, like p.one {
border-style: solid;
"rgb(255,0,0)" border-color: rgb(255,0,0);
o transparent }
Border Color

• can have from 1 to 1 values (top border, right

border, bottom border, and the left border).
• If border-color is not set, it inherits the color
of the element.
Border Color
• can have from 1 to 1 values (top border, right
border, bottom border, and the left border).
p.three {
border-style: solid;
border-color: red green blue yellow;
• If border-color is not set, it inherits the color
of the element.
Individual Border
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:
Ex.
p {
border-style: dotted solid;
}
Border Color
p {
border: 5px solid red;
}
border-width border-style border-color
Border Color
You can also specify all the individual border properties for just
one side:

Left Border
p {
border-left: 6px solid red;
background-color: lightgrey;
}
Border Color

Bottom Border
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
Border Color
Border Color

Rounded Borders
The border-radius property is used to add rounded borders to
an element:

p {
border: 2px solid red;
border-radius: 5px;
}
Recitation: Identify the style used.

dotted solid

dashed doubled
Groove

ridge

inset
1. Create a webpage that will display the list of
your advisers from grade 7 to present. Each
names will be inside the border applying the
different properties.