TAYABAS WESTERN ACADEMY

Founded 1928 | Recognized by the Government | Candelaria, Quezon 4323

MODULE 3:
CASCADING STYLE SHEET PROPERTIES, COMMONLY USED
INTERNET TERMS, PARTS OF WEB ADDRESS, AND THE LAYOUT OF A
WEB PAGE
INTRODUCTION AND FOCUS QUESTION:

Cascading Style Sheets offer a better way of managing the site in terms of
presentation. A style sheet is a collection of style rules that define how HTML elements are
presented. It provides a standard way to layout, style, color, and control websites’
presentation. It may be inline, internal, or external.
In the previous module, you have been introduced to Cascading Style Sheets and to
the different properties like background, text, font, and border and outline, so, you are
already familiar to what is being said earlier. Other than the said properties, are you ever
curious about the other properties that you can use to layout a web page?
In this module, you will encounter the other Cascading Style Sheet properties that
will improve your own web page. In addition, after knowing how a web page is designed,
you will be also studying the parts of web address and the layout of a web page.

LESSONS AND COVERAGES

This module covers the following lessons:

Lesson No. Title You’ll learn to …

 recall learning from the

previous Cascading Style
Sheet discussion;

 determine the appropriate

property and value for the
Cascading Style Sheet selected selectors;
Properties:
Margin  apply the margin, padding,
Padding positioning, and shorthand
Positioning properties in HTML
Lesson 1 Shorthand document;
 create web page applying the
properties learned based on
the given instructions.

Page 2|19
Information and Communications Technology 10 | Quarter 3
 TAYABAS WESTERN ACADEMY
Founded 1928 | Recognized by the Government | Candelaria, Quezon 4323

 identify the commonly used

Commonly Used Internet terms;
Internet Terms
 identify the parts of web
Lesson 2 -Web Address address;
Parts of the Web
Address  answer thought-provoking
questions thoroughly; and
-Web Page
Layout of a Web Page  widen vocabulary of the
Internet terms by researching
on the other important terms
used.

CONCEPT MAP

Here is a simple map of the lessons that will be covered in this module.

Margin
Padding
Cascading Style Positioning
Sheet Properties Shorthand
Properties

THIRD
QUARTER’S
LESSONS
Under the
commonly used
Internet terms,
various terms,
Commonly Used
web address
Internet Terms
and its parts,
and the layout of
the web page
will be discussed

Page 3|19
Information and Communications Technology 10 | Quarter 3
 TAYABAS WESTERN ACADEMY
Founded 1928 | Recognized by the Government | Candelaria, Quezon 4323

Helpful Tips!
To do well in this module, you need to remember and do the following:
1. Read carefully the module and do the activities neatly and accurately.

2. Break tasks into manageable parts.

3. If you are having problems, do NOT wait to request help. The longer you wait the
bigger the problem becomes!

LESSON 1: CASCADING STYLE SHEET: MARGIN, PADDING, POSITIONING, AND

SHORTHAND PROPERTIES
In this lesson, you will learn to:
 recall learning from the previous Cascading Style Sheet discussion;
 determine the appropriate property and value for the selected selectors;
 apply the margin, padding, positioning, and shorthand properties in HTML
document; and
 create web page applying the properties learned based on the given
instructions.

EXPLORE

Activity 1. “See, Think, Wonder”

Look at the picture below. Answer the questions that follow on 1/2 sheet of paper
crosswise

Personal Computer Assembly

To assemble system unit, first, prepare

your workplace. Make space and time,
The parts of the system unit are power prepare the grounding protection and
supply, DVD ROM drive, mainboard, have the drivers ready. Prepare the
CPU and CPU fan, RAM, VGA Card, motherboard then install the CPU. After
that, install the CPU heat sink and memory
Sound Card, Hard disk, and the case
(RAM). Place the motherboard into the
case then connect the power supply.
Making the proper connections is crucial to
successfully assemble your PC system.
Lastly, install the graphics video cards,
internal drives, and add-in cards.

Page 4|19
Information and Communications Technology 10 | Quarter 3
 TAYABAS WESTERN ACADEMY
Founded 1928 | Recognized by the Government | Candelaria, Quezon 4323

Questions to Answer:
1. What do you see on the picture?
2. What do you think is the web page all about?
3. What makes you wonder regarding the web page layout?

Are you curious about how that previous web page was done? Read and study the
following lesson about it. Good luck!

FIRM UP

Properties
Properties are also called as attributes and vice versa. Other programming or scripting
languages use both to refer to the same thing but some use one term officially. In HTML and
CSS, an attribute refers to the properties that are immediately set or altered inside an opening
tag while a property is also an attribute but maybe set or altered only through special means
or coding.
In setting some CSS properties, you may be required to indicate a unit. Let us recall the
following units that can be used in the next activities:

UNITS USED IN
CSS DESCRIPTIONS
PROPERTIES
px pixel
% percentage
in inch
cm centimeter
mm millimeter
em/1em current font size, 2em - twice the current font size
1 ex - approximately half of the current font size or the height
ex
of a lowercase letter
pt point (1/72 inch)
pc pica (1 pc = 12 pt)
A. Margin Properties
They can be used to define the margins of an HTML element.
Example: p {margin-left: 50px;}
The example above sets the text in all paragraph elements to be displayed
having a left margin of 50 pixels.
The following properties are used to define the margins in an HTML element:

Page 5|19
Information and Communications Technology 10 | Quarter 3
 TAYABAS WESTERN ACADEMY
Founded 1928 | Recognized by the Government | Candelaria, Quezon 4323

PROPERTY DESCRIPTION VALUES

margin-left sets the left,  auto (default)
margin-right right,  margin in px, cm, em, %,
margin-top top, and bottom etc.
margin- margins
bottom Ex. margin-left: 50px;

B. Padding Properties
They can be used to define the space between the border and content in an HTML
element.
Example: p {padding-left: 5px;}
The example above sets the text in all paragraph elements to be displayed with a
left padding of 5 pixels.
The following properties are used to define the padding in an HTML document:
PROPERTY DESCRIPTION VALUES

padding-left sets the left,

padding-right right,  0 (default)
padding-top top, and bottom  padding in px, cm, em, %, etc.
padding-bottom paddings
Ex. padding-left: 50px;

C. Positioning Properties
They can be used to define how an HTML element is positioned in the page or in
another element.
Example:p.box {width: 100px; height: 100px; overflow: scroll;}
The given example sets all paragraph elements that use the box class to use
scroll-bars if the content goes over the dimension.
The following properties are used to set the positioning of an HTML element:
PROPERTY DESCRIPTION VALUES
cursor sets the cursor to auto (default)
be displayed when text wait help
the mouse pointer crosshair
moves over the pointer move
element ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Ex. ___________

Page 6|19
Information and Communications Technology 10 | Quarter 3
 TAYABAS WESTERN ACADEMY
Founded 1928 | Recognized by the Government | Candelaria, Quezon 4323

float sets the

left right
element to
none
float in another
(default)
element
Ex. float: left;
clear sets where
left
floating
right
elements are
both
not allowed
none (default)

Ex. clear: both;

visibility sets the
visibility of the
element, unlike
in using the  visible (default)
 hidden
display
 collapse - removes table columns or rows
property,
invisible Ex. visibility: hidden;
elements will
still take up
space
position sets how the  Static (default)
element is  Relative - adds the value to the current
positioned in top and left
the page positioning inside the parent element
 Absolute - indicates the exact position in
the ancestor element
 Fixed - positioning is relative to the
browser’s window

Ex. Position: relative; top: 100px; left:

50px;
(position the element 100 pixels from the
top and 50 pixels from the left inside a parent
element)
D. Shorthand Properties
They can be used to define multiple definitions using a single declaration.
Example: body {background: white url(“images/background.gif”) no-repeat fixed;}
The example above sets the following background properties:
 background-color (white)

 background-image (images/background.gif)
 background-repeat (no-repeat)
 background-attachment (fixed)
The following shorthand properties may be used to perform multiple definitions:
PROPERTY DESCRIPTION

Page 7|19
Information and Communications Technology 10 | Quarter 3
 TAYABAS WESTERN ACADEMY
Founded 1928 | Recognized by the Government | Candelaria, Quezon 4323

background Sets the background properties

border Sets the border properties
border- Sets the bottom border properties
bottom
border-left Sets the left border properties
border- Sets the right border properties
right
border-top Sets the top border properties
font Sets the font properties
list-style Sets the list properties
margin Sets the margin properties
outline Sets the outline properties
padding Sets the padding properties
border- Sets the table to use a single border for both the
collapse table and cell
Look at the HTML document below. Identify the new properties applied in it. (You do not need
to write your answers.)
<!DOCTYPE html>
<html>
<head>
<title>Personal Computer Assembly</title>
<style>
body {border-style: solid; background-color: pink; margin-left: 50px; margin-right:
50px; margin-top: 50px; margin-bottom: 100px; padding-left: 50px; padding-right:
50px; cursor: help;}
p.topic {color: blue; text-align: center;}
p.parts {color: black; text-align: center; border-style: dashed; margin-left: 50px;
margin-right: 700px; margin-top: 75px; margin-bottom: 75px; padding-left: 100px;
padding-right: 100px; float: left;}
p.steps {color: black; text-align: center; margin-bottom: 100px; border-style:
dashed; margin-left: 700px; margin-right: 50px; margin-top: 5px; margin-bottom:
150px; padding-left: 100px; padding-right: 100px; float: right; position: absolute;
top:
100px; left: 50px; right: 50px;}
p#author {color: black; text-align: center; margin-bottom: 100px;}
</style>
</head>
<body>
<p class="topic">Personal Computer Assembly</p>
<p class="parts">The parts of the system unit are power supply, DVD ROM drive,
mainboard, CPU and CPU fan, RAM, VGA Card, Sound Card, Hard disk, and the
case.</p>
<p class="steps">To assemble system unit, first, prepare your workplace. Make space and
time, prepare the grounding protection and have the drivers ready. Prepare the
motherboard then install the CPU. After that, install the CPU heat sink and memory
(RAM). Place the motherboard into the case then connect the power supply. Making the
proper connections is crucial to successfully assemble your PC system. Lastly, install the
graphics/video cards, internal drives, and add-in cards.</p> <p id="author">by Sir
Larry</p>
</body>
</html>

Page 8|19
Information and Communications Technology 10 | Quarter 3
 TAYABAS WESTERN ACADEMY
Founded 1928 | Recognized by the Government | Candelaria, Quezon 4323

Process Questions:

1. What is the document all about?

2. What are the new properties applied in the HTML document above?

The HTML document above is about the steps on assembling a personal computer
system unit. The parts of a system unit are stated as well as the ways to assemble it. As you
can see, various properties and values as well as global attributes are used in the document.
The new properties and values learned such as the margin, padding, and positioning
properties are applied. Below, look at how the HTML document on the previous page will look
like after saving it as a web page.
Remember: There are so many properties and values that can be used in creating a web
page. You can explore the new properties and values on your own to discover their real
appearance on the web page. Explore and apply. Discover. Learn.

Activity 2. “Identification”
Identify the missing property or value on each item to complete the declaration
structure. If the the missing value is a number using unit, just write your preferred
measurement to the property. Do this on 1/2 sheet of paper crosswise.
1. _____________: pointer; 6. _____________:wait;
2. _____________: visible; 7. margin-left: _____________;
3. padding-top: _____________; 8. clear: _____________;
4. position: _____________; 9. _____________: help;
5. float: _____________; 10. visibility: _____________;
In this part of the lesson, you will work on different activities after learning
the other Cascading Style Sheet properties that you can use in designing a
web page.

DEEPEN

Activity 3. “I am a Layout Artist”

In this activity, expand your imagination as you layout a certain web page. In the box
below, you can see an HTML document using internal style sheet. On a piece of short bond
paper, illustrate how the page will look like after saving the HTML document as a web page.
Prepare your coloring materials for this activity.
<!DOCTYPE html>
<html>
<head>
<title>Cooking Sauces</title>
<style> body {background-color: yellow; border-style: dashed; cursor: pointer;}

Page 9|19
Information and Communications Technology 10 | Quarter 3
 TAYABAS WESTERN ACADEMY
Founded 1928 | Recognized by the Government | Candelaria, Quezon 4323

h1 {color: blue; font-family: lucida calligraphy; text-

align: center;} h2 {color: black; border-style: solid; text-
align: center;} p.ingredients {color: red; text-align:
justify; } p.procedure {color: black; text-align: justify;}
</style>
</head>
<body>
<h1>Bechamel Sauce (White Sauce)</h1>
<h2>Ingredients and Procedure</h2>
<p class="ingredients">The ingredients for bechamel sauce are: 1/2 cup of butter, 1/4
cup of flour, 1 liter of milk, 1 teaspoon of salt (to taste).</p>
<p class="procedure">1.) Melt butter in a sauce pan.</p>
<p class="procedure">2.) Stir in flour, continue stirring for about 5 minutes.</p>
<p class="procedure">3.) Add the milk gradually to avoid lumps.</p>
<p class="procedure">4.) Stir briskly with wire whisk until thick and smooth.</p>
<p class="procedure">5.) Season with salt.</p>
</body>
</html>

Page 10|19
Information and Communications Technology 10 | Quarter 3