Computer

Programming
(ICT)
QUARTER 1
MODULE

13 CSS BORDER AND MARGIN

 TECHNICAL VOCATIONAL LIVELIHOOD

Computer Programming (ICT) – Grade 11

Quarter 1 – Module 10: CSS Border and Margin

Republic Act 8293, section 176 states that: No copyright shall subsist in
any work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for
exploitation of such work for profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand

names, trademarks, etc.) included in this module are owned by their respective
copyright holders. Every effort has been exerted to locate and seek permission to use
these materials from their respective copyright owners. The publisher and authors
do not represent nor claim ownership over them.

Published by the Department of Education Division of Pasig City

Development Team of the Module

Writer : Magiel L. Boncayao
Editor : Ma. Lerma I. Cantanero
Reviewer : Rowena O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
OIC-Schools Division Superintendent
Dr. Aurelio G. Alfonso
OIC-Assistant Schools Division Superintendent
Dr. Victor Javena
OIC – Chief Curriculum Implementation Division
Education Program Supervisors
Librada L. Agon EdD (EPP/TLE/TVL/TVE)
Liza A. Alvarez (Science/STEM/SSP)
Bernard R. Balitao (AP/HUMSS)
Joselito E. Calios (English/SPFL/GAS)
Norlyn D. Conde EdD (MAPEH/SPA/SPS/HOPE/A&D/Sports)
Wilma Q. Del Rosario (LRMS/ADM)
Ma. Teresita E. Herrera EdD (Filipino/GAS/Piling Larang)
Perlita M. Ignacio PhD (EsP)
Dulce O. Santos PhD (Kindergarten/MTB-MLE)
Teresita P. Tagulao EdD (Mathematics/ABM)

Printed in the Philippines by ________________________

Department of Education – Division of Pasig City
Office Address: Caruncho Avenue, San Nicolas, Pasig City
Telefax:
E-mail Address:
Introductory Message
For the Facilitator:

Welcome to the Computer Programming for the ICT Module on CSS Border and
Margin

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools Division
Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the Local
Government of Pasig through its mayor, Honorable Victor Ma. Regis N. Sotto.
The writers utilized the standards set by the K to 12 Curriculum using the Most
Essential Learning Competencies (MELC) while overcoming their personal, social,
and economic constraints in schooling.
This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help learners
acquire the needed 21st century skills especially the 5 Cs namely: Communication,
Collaboration, Creativity, Critical Thinking and Character while taking into
consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that
will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
 Computer
Programming
QUARTER 1
MODULE

13 CSS BORDER AND MARGIN

For the learner:

Welcome to the Computer Programming for the ICT Module on CSS Border and
Margin
The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
skills at your own pace and time. Your academic success lies in your own hands!

This module was designed to provide you with fun and meaningful opportunities for
guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning material while being an active learner.

This module has the following parts and corresponding icons:

Expectation - These are what you will be able to know after

completing the lessons in the module

Pre-test - This will measure your prior knowledge and the

concepts to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills

that you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap Up- This section summarizes the concepts and

applications of the lessons.

Valuing-this part will check the integration of values in the

learning competency.

Post-test - This will measure how much you have learned from
the entire module. Ito po ang parts ng module.
 EXPECTATION

The students should be able to :

 Classify the CSS Border property and Margin property

 Perform and apply the uses of CSS property and Margin property
When designing webpage.
 Cite the importance of CSS Border and Margin style attribute when
designing a webpage.

PRE–TEST

Instruction: Select the letter that corresponds to the correct answer.

1. It is a CSS property that allows you to specify the style, width and color of an
element border?
A. CSS Margin B. CSS Border C. CSS Style D. CSS Color
2. Which of the following is the Border property that modify the width of the four
borders?
A. Border Width B. Border Size C. Border Color D. Border frame
3. Which of the CSS properties are used to create space around elements, outside
of any defined border?
A. CSS Margin B. CSS Border C. CSS Style D. CSS Color
4. Which of the following CSS Border property, specifies each of the borders
like top, right, bottom, and left?
A. Border Width B. Border size
C. Border Shorten property D. Border Individual side
5. Which of the following CSS Margin property that can specify the margin for
each side of an element?
A. Margin- Shorthand B. Margin-Right
C. Margin-Top D. Margin-Individual sides
 RECAP

Last discussion you enjoyed how to style your webpage. We notice the
power of CSS on how our webpage make it more presentable and interesting. We
learned in CSS that we have syntax to follow in giving style in our website such as
background color, text color, text size, text style and text alignment.

The lists below are the following property can be used to add or change a
style for a webpage, in one to sentence define the use of each property.

1. The font-size property

_____________________________________________________
2. The text-align property
_____________________________________________________
3. The font-size property
_____________________________________________________
4. The background-color property
_____________________________________________________
5. The color property
_____________________________________________________

LESSON

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an
element's border.

 Border can be in all sides

 Red bottom border.
 Rounded border
 Blue left border

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.

Figure 1
 Figure 2

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
border, right border, bottom border, and the left border).

Figure 3

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)"

• transparent

• The border-color property can have from one to four values (for the top
border, right border, bottom border, and the left border).

• If border-color is not set, it inherits the color of the element.

 Figure 4

Figure 5

Border - Individual Sides

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;}

Figure
 Figure 6

Border - Shorthand Property

• For the previous examples, 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;

Figure 7

Rounded Borders

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

Figure 8
 Figure 9

CSS Margin

• 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. 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:

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

Figure 10
 • length - specifies a margin in px, pt, cm, etc.

% - specifies a margin in % of the width of the containing element

div {

border: 1px solid black;

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

• inherit - specifies that the margin should be inherited from the parent
element. 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;
}

Figure 11

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;

• top margin is 25px

• right margin is 50px

• bottom margin is 75px

• left margin is 100px

div {

border: 1px solid black;

margin: 25px 50px 75px 100px;

background-color: lightblue;}

If the margin property has three values:

• margin: 25px 50px 75px;

 top margin is 25px

 right and left margins are 50px

 bottom margin is 75px

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

ACTIVITIES

Create a simple Webpage with the “Title My Favorite Quotes” and by using
CSS Border and Margin. Make the webpage more interesting. Follow the
instructions below.
 1. Create a simple webpage with a heading 1 “My Favorite Quotes”. You need to
choose your 5 favorite quote and put it in each border.
2. As the background color of the whole webpage use the color Salmon, for font
family set Papyrus and for font size use 20 px.
3. For Border you need to set the dotted, dashed, double, ridge and mix border
style.
4. For the Margin set the top margin to 25 px, right 50 px, bottom 75 px and left
margin is 100px
5. Set all the quotes to center alignment and for background color of each border
set it to any color that you want.

Rubrics:

For Activity 1 the students will get total of 30 points.

Items Points
1. Heading 1 “My Favorite Quote” 5
and the 5 different Quotes
2. Background color, font family, 5
and font text.
3. Border (dotted, dashed, double, 7
ridge and mix)
4. Margin top 25 px, right 50 px, 7
bottom 75 px and left margin is
100px
5. Alignment and border 6
background color
TOTAL 30 points
*answer the worksheet no. 10

WRAP–UP

The CSS border properties allow you to specify the style, width, and color of
an element's border. Border can be in all sides, red bottom border. rounded border,
blue left border it depends on your liking. While 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 like top, right, bottom, and left. In activity below provide
the name of each border style
 VALUING

Instruction: Read and answer the following questions carefully in two to three
sentences each number.

1. Why do we need to have to put CSS Border in our webpage?

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
2. What is the important of CSS Margin in our webpage?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
 POST TEST

Select the letter that corresponds to the correct answer.

1. Which of the following CSS Border property that specifies the width of the four
borders?
A. Border Width B. Border size
C. Border Shorten property D. Border Individual side
2. Which of the following CSS Border property, specifies each of the borders like
top, right, bottom, and left?

A. Border Width B. Border size

C. Border Shorten property D. Border Individual side
3. Which of the following CSS Border property to shorten the code, it is also
possible to specify all the individual border properties in one property.

A. A. Border Width B. Border-radius property

C. Border Shorten property D. Border Individual side
4. Which of the following CSS Border property that is used to add rounded
borders to an element
A. Border Width B. Border-radius property
C. Border Shorten property D. Border Individual side
5. This is an CSS Property that allow you to specify the style, width, and color of
an element's border.

A. Border B. Border-radius property

C. Border Shorten property D. Border Individual side
6. Which of the CSS properties are used to create space around elements,
outside of any defined border?
B. CSS Margin B. CSS Border C. CSS Style D. CSS Color
7. Which of the following CSS Margin property that can specify the margin for
each side of an element?
A. Margin- Shorthand B. Margin Inherit
C. Margin Auto D. Margin-Individual sides

8. Which of the following CSS Margin property that can specify to shorten the
code of the individual margin property?

A. Margin- Shorthand B. Margin-Right

C. Margin-Top D. Margin-Individual sides
9. Which of the following CSS Margin property that can calculate automatically
the margin?
A. Margin- Shorthand B. Margin Inherit
C. Margin Auto D. Margin-Individual sides
10. 9. Which of the following CSS Margin property that specifies that the margin
should be innate from the parent element?
A. Margin- Shorthand B. Margin Inherit
C. Margin Auto D. Margin-Individual sides

KEY TO CORRECTION

10.B 5. A 5. C 5. Mix
9. C 4. B 4. C 4. Outset
8. A 3. C 3. B 3. Groove
7. D 2. D 2. D 2. Solid
6. A 1. A 1. B 1. Dashed
Post-test: Pre-test: Wrap-up

REFERENCES
 Accessed July 21, 2020 10:30 pm, https://www.w3schools.com/
 Accessed July 21, 2020 11:00 pm
1st quote https://www.pinterest.ph/pin/210191507594534781/
 Accessed July 21, 2020 11:35 pm
2nd quote https://www.pinterest.ph/pin/24277285478904534/
 Accessed July 21, 2020 12:45 pm
3rd quote https://www.pinterest.ph/pin/78074128539261793JB1/
 Accessed July 21, 2020 1:30 pm
4th quote https://www.pinterest.ph/pin/423760646188858484/
 Accessed July 21, 2020 1:40 pm
5th quote https://www.pinterest.ph/pin/584623595359259639/