Computer

Programming
(ICT)
QUARTER 1
MODULE

14 CSS PADDING AND OUTLINE

 TECHNICAL VOCATIONAL LIVELIHOOD

Computer Programming (ICT) – Grade 11

Quarter 1 – Module 14: CSS Padding and Outline

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:
 Computer
Programming
QUARTER 1

MODULE

9
DIFFERENT TYPES OF MULTIMEDIA
IN HTML DOCUMENTS
Introductory Message
For the Facilitator:

Welcome to the Computer Programming for the ICT Module on CSS Padding and
Outline

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.
For the learner:

Welcome to the Computer Programming for the ICT Module on CSS Padding and
Outline
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:

1. Understand the CSS Padding property and Outline property

2. Identify the uses of CSS Padding property and Outline property when
designing a webpage.
3. Cite the importance of CSS Padding property and Outline property when
designing a webpage.

PRE–TEST

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

1. It is a CSS property that used to generate space around an element’s content,

inside of any defined borders.
A. CSS Margin B. CSS Border C. CSS Padding D. CSS Outline
2. It is a line that is drawn around elements, OUTSIDE the borders, to make the
element "stand out".
A. CSS Margin B. CSS Border C. CSS Padding D. CSS Outline property
3. Which of the CSS padding property that allow to shorten the code and make
it in one property.
A. Padding Inherit B. Padding Shorthand
B. C. Padding length D. Padding Individual sides
4. Which of the following CSS Padding values, specifies that the padding
should be inherit from the parent element?
A. Padding Inherit B. Padding Shorthand
C. Padding length D. Padding Individual sides
5. Which of the following CSS Outline property that specifies the style of the
outline?
A. Outline- Shorthand B. Margin-color
C. Outline-Style D. Outline-Individual sides
 RECAP

Last discussion we talked about CSS border properties that 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

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

1. The Margin – Individual sides

_____________________________________________________
2. The Margin – inherit values
_____________________________________________________
3. The Margin – Auto property
_____________________________________________________
4. The Margin – Shorthand property
_____________________________________________________
5. The Margin – length values
_____________________________________________________

LESSON

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
Outline differs from borders! Unlike border, the outline is drawn outside the
element's border, and may overlap other content. Also, the outline is NOT a part of
the element's dimensions; the element's total width and height is not affected by the
width of the outline.

Outline

Border

Content
Content

Figure 1

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

 Figure 2

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"

• RGB - specify a RGB value, like "rgb(255,0,0)"

• Hex - specify a hex value, like "#ff0000"

• invert - performs a color inversion (which ensures that the outline is visible,
regardless of color background)

Figure 3
 Figure 4

The following example uses outline-color: invert, which performs a color inversion.
This ensures that the outline is visible, regardless of color background:

<style>

p.ex1 {

border: 1px solid yellow;

outline-style: solid;

outline-color: invert; }

</style>

</head>

<body>

<h2>Using outline-color:invert</h2>

<p class="ex1">A solid invert outline.</p>

Figure 5

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)

 Figure 6

Figure 7

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.

<style>

p.ex1 {outline: dashed;}

p.ex2 {outline: dotted red;}

p.ex3 {outline: 5px solid yellow;}

p.ex4 {outline: thick ridge pink;}

</style>
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:

Figure 8

Figure 9
The following example shows that the space between an element and its outline is
transparent:

Figure 9

Figure 10

Figure 11

CSS Padding Properties

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

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;

combinations of top padding are 25px, left padding is 100px, right padding is 50px
and bottom padding is 75px

Figure 12
 Figure 13

If the padding property has three values:

• padding: 25px 50px 75px;

• top padding is 25px

• right and left paddings are 50px

• bottom padding is 75px

If the padding property has two values:

• padding: 25px 50px;

• top and bottom paddings are 25px

• right and left paddings are 50px

If the padding property has one value:

• padding: 25px;

• all four paddings are 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.

• In the following example, the <div> element is given a width of 300px.

However, the actual rendered width of the <div> element will be 350px
(300px + 25px of left padding + 25px of right padding):

Figure 14
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

Figure 15

ACTIVITIES

Create a simple Webpage with the title “MY FAMILY” and by using CSS
Outline and Padding to make the webpage more interesting. Follow the
instructions below.

1. Create a simple webpage with a heading 1 “My Family”. You need to choose
your 5 favorite things you do with your family.
2. As the background color of the whole webpage use the color Lavender. For
paragraph use font family Bradley Hand ITC and font size use 20 px.
3. For the paragraph provide 3 sentences in each picture and put horizontal rule
after.
4. For the Padding: 30px; margin: 30px; background: honeydew; border: 5px
double mistyrose; outline: 5px dashed rosybrown; outline-offset: 25px;
5. provide also a family pictures in each things that you love to do with your
family, and set it to center alignment.
Rubrics:

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

Items Points
1. Heading 1 “My Family” and the 5 5
things you love to do with your
family.
2. Background color set as 5
lavender, font family, and font
size.
3. 3 sentences and horizontal rule. 5
4. Padding, Margin, border, 10
background, outline and outline-
offset.
5. Alignment and pictures 5
TOTAL 30 points

 Answer Worksheet number 14-1 and submit to our group chat

WRAP–UP

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.

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
like top, right, bottom, and left.

For this activity you just need to differentiate the Outline and Padding base on their
uses and functionality on your website.

Outline Padding
 VALUING

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

1. Why do we need to put CSS Outline in your webpage?

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
2. What is the important of CSS Padding in your webpage?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

POST TEST

Select the letter that corresponds to the correct answer.

1. Which of the following CSS property that the line drawn around
elements, outside the borders, to make the element "stand out".?

A. Border Property B. Margin Property

C. Padding Property D. Outline Property
2. Which of the following CSS Outline property, specifies the style of
the outline?

A. Outline-Style B. Outline-width

C. Outline-color D. Outline-offset
3. Which of the following CSS Outline property that used to set the
color of the outline.

A. Outline-Style B. Outline

C. Outline-color D. Outline-width
 4. Which of the following CSS Outline Property that specifies the
width of the outline?
A. Outline-Style B. Outline-width

C. Outline-color D. Outline-offset
5 .Which of the following CSS Outline property specified as one, two,
or three values that you can put as the same time to shorten the
codes.

A. Outline-Style B. Outline

C. Outline-color D. Outline-width
6. Which of the following CSS Padding values, specifies that the
padding should be inherit from the parent element?
A. Padding Inherit B. Padding Shorthand
C. Padding length D. Padding Individual sides
7. Which of the CSS padding property that allow to shorten the code
and make it in one property.
A. Padding Inherit B. Padding Shorthand

C. Padding length D. Padding Individual sides

8. It is a CSS property that used to generate space around an element’s

content, inside of any defined borders.
A. CSS Margin B. CSS Border C. CSS Padding D. CSS Outline

9. It is a CSS property specifying the padding for each side of an element

A. Padding Inherit B. Padding Shorthand

C. Padding length D. Padding Individual sides
10. It is the CSS width property specifies the width of the element's
content area.
A. Padding and Element width B. Padding Shorthand
C. Padding length D. Padding Individual sides

KEY TO CORRECTION
10.A 5. B 5. C
9. B 4. B 4. A
8. C 3. C 3. B
7. B 2. A 2. D
6. A 1. D 1. C
Post-test: Pre-test:
 REFERENCES

Website:
Accessed July 26, 2020 1:00 pm
https://www.w3schools.com/css/css_padding.asp
Accessed July 26, 2020 1:26 pm
https://www.w3schools.com/css/css_outline.asp

Picture:
Accessed July 27, 2020 10:30 am
https://www.nationsphotolab.com/blog/10-tips-family-photography-
sessions-beach/