Computer Programming Module 4 (.Net Technology) 2

This document is a lesson plan on CSS margins for a Computer Programming class. It begins with introducing the purpose and properties of CSS margins, including margin-top, margin-right, margin-bottom, margin-left. It then discusses using shorthand margin properties and the auto and inherit values. Students are asked questions to test their understanding and assigned tasks to explore margin tutorials online. The lesson aims to help students identify techniques for modifying margins and explore margin properties in CSS.

Uploaded by

Joshua Bonsol

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

30 views

Computer Programming Module 4 (.Net Technology) 2

Uploaded by

Joshua Bonsol

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 5

ST. BLAISE COMMUNITY ACADEMY, INC.

Senior High School

San Luis, Batangas/ chs_sbca53@yahoo.com/ www.chs-sbca.com

Learner’s Material
COMPUTER
PROGRAMMING
(.net technology) 2
Module 4: Quarter 1 | 2ND SEMESTER
Topic: CSS MARGINS

1|CO
NAME OFMSTUDENT:
PUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT
Republic of the Philippines
DEPARTMENT OF EDUCATION
Region IV-A CALABARZON
PROVINCE OF BATANGAS

St. Blaise Community Academy, Inc.

San Luis, Batangas/ chs_sbca53@yahoo.com
 043 – 740-960609997646638 / 09218539116

Name of Student: __________________________ Section: _

Present Address: _________________________________________________ Contact no.____________________
Subject Matter: COMPUTER PROGRAMMING (.NET TECHNOLOGY) GRADE 11 – TVL ICT
Topic: CSS | MARGINS (Module 4 – Quarter 1)/ Second Semester

As JavaScript future developers, the sheer amount of stuff we're expected to know is enormous, and it
grows bigger every day.
With so many different languages, tools, and technologies competing for our time and attention, it can
be tough to figure out what to prioritize. Should we get better at TypeScript?
In my opinion, if we really want to maximize the things that we can learn in Javascript, one of the best things we
can focus on is CSS.
By the end of this lesson, you are expected to;
1. Identify different techniques in modifying margins of your web browser with Cascading Style Sheet;
2. Explore different margin properties in CSS; and
3. Demonstrate the proper steps in modifying margin- top, right, bottom, and left in the web browser
using CSS.

DIRECTION: Read the following statement and select the letter of the correct answer.
1. Margins, padding, html element height and width can be measured in %. What is %?
a. Percent
b. Pixels
c. Module
d. Length
2. Margins, padding, html element height and width can be measured in px. What is px?
a. Percent
b. Pixels
c. Module
d. Length
3. In which file are the details of the box model created and changed?
a. Style.css
b. Image folder
c. Index.html
d. Brackets
4. The CSS table property where can you specify values of top, bottom and middle
a. Vertical-align
b. Padding
c. Border
d. Margin
5. CSS table property specified in values of left, center, right and justify

a. Text-align=
b. Padding=
c. Border-spacing=
d. Vertical-align=

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

2|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT

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
Tip: Negative values are allowed.
Example
Set different margins for all four sides of a <p> element:
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
Example
Use the margin shorthand property with four values:
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
Example
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
Example
Use the margin shorthand property with two values:
p {
margin: 25px 50px;
}
If the margin property has one value:
 margin: 25px;
o all four margins are 25px

3|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT

Example
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.
Example
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>):
Example
Use of the inherit value:
div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}

DIRECTION: Answer the following questions.

(PLEASE TYPE YOUR ANSWER ON THE PROVIDED SHARED BLOG.)
1. What is the purpose of CSS Margin?
2. What are the different properties of CSS Margin?

DIRECTION: Perform the following Task and provide screen shots of each entry
Open the website: www.w3schools.com
Open CSS Tutorial Tab and Click the CSS Background Tutorial
Perform the following tutorials;
1. Margins
2. Margin Collapse

Send your screen shots thru messenger.

DIRECTION: Read the following statement and select the letter of the correct answer.
1. Margins, padding, html element height and width can be measured in %. What is %?

a. Percent
b. Pixels
c. Module
d. Length

2. Margins, padding, html element height and width can be measured in px. What is px?

a. Percent

4|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT

b. Pixels
c. Module
d. Length
3. In which file are the details of the box model created and changed?
a. Style.css
b. Image folder
c. Index.html
d. Brackets
4. The CSS table property where can you specify values of top, bottom and middle
a. Vertical-align
b. Padding
c. Border
d. Margin
5. CSS table property specified in values of left, center, right and justify
a. Text-align=
b. Padding=
c. Border-spacing=
d. Vertical-align=

Which category in 21st Century skills do you think the core of our topic falls in? (Communication, collaboration,
creativity, critical thinking, productivity, leadership and technology literacy). Explain why.

RECORD YOUR VOICE FOR YOUR ANSWER AND SEND IT THRU MESSENGER (GROUP CHAT)