Technical Vocational

Livelihood
QUARTER

1 Computer Programming

Computer Programming (ICT) – Grade 11

TECHNICAL VOCATIONAL LIVELIHOOD
Quarter 1 – Module 12: CSS Syntax First Edition, 2020

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 : Jenessy Joy T. Pinga

Editor : Lerma 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: 641-88-85 / 682-2819
E-mail Address: [email protected]
 Computer
Programming
QUARTER 1

MODULE

12 CSS Syntax
Introductory Message

For the Facilitator:

Welcome to the Computer Programming for the ICT Module on CSS Syntax!

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 Syntax!

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:

 understand how to use style attribute in designing webpage.

 perform and apply the use of CSS property when designing webpage.
 cite the importance of using style attribute in designing webpage.

PRE–TEST

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

1. CSS property specifies the color of the text.

A. Color B. font-size C. font-family D. text-align

2. CSS property specifies the size of the text.

A. Color B. font-size C. font-family D. text-align
3. CSS property specifies the style of the text.

A. Color B. font-size C. font-family D. text-align

4. CSS property specifies the alignment of the text.

A. Color B. background-color C. font-family D. text-align

5. CSS property specifies the background color of the webpage.

A. Color B. background-color C. font-family D. text-align
 RECAP

Module 11 discussed how to use CSS and the use of three kinds of CSS.

Read and answer the following questions carefully.

1. What does CSS stand for?

2. What is the use of CSS in creating web site?
3. What are the three kinds of CSS?

LESSON

Cascading Style Sheet – Basic Syntax

In HTML we have structure, also in CSS we have syntax to follow in giving
style in our website such as background color, text color, text size, text style and
text alignment.

Before we have <font> </font> tag to add or change style to our webpage,
but that tag is not supported in HTML5 anymore and now it can be done with CSS
using style attribute.

The style attribute has the following syntax:

<tagname style="property:value;">

Adding or Changing Background color of webpage

The background-color property defines the background color for a webpage.

Example: (the sample below sets the background color for a page to yellow)
Output:

Adding or Changing color of the text.

The color property defines the text color for a webpage.

Example: (the sample below sets the color for a text to red)
 Output:

Adding or Changing size of the text.

The font-size property defines the text size for a webpage. It can be done in
% (percent) or px (pixel).

Example: (Pixel)
Output:

Example: (Percent)

Output:
 In font-size property the percent size is smaller than pixel size when it comes
to the same number.

Adding or Changing style of the text.

The font-family property defines the font to be used for a webpage.

Example:

Output:
 Changing alignment of the text.

The text-align property defines the horizontal text alignment for a webpage.

Example:

Output:

CSS Color
Colors in CSS are specified by a valid color name like "red", RGB value like
"rgb(255, 0, 0)" and a HEX value like "#ff0000".

Below are the following examples of color;

Valid color name RGB value Hex value

Red 255,0,0 #FF0000
Yellow 255,255,0 #FFFF00
Blue 0,0,255 #0000FF
Orange 255,165,0 #FFA500
Black 0,0, #000000

Valid color syntax:

 <tag style="background-color:red">… </tag>

 <tag style="color:red">… </tag>

RGB value syntax:

 <tag style="background-color:rgb(255,0,0)">… </tag>

 <tag style="color:rgb(255,0,0)">… </tag>

Hex value syntax:

 <tag style="background-color:#FF0000">… </tag>

 <tag style="color:#FF0000">… </tag>

ACTIVITIES

Create a webpage and apply the following below;

1. Black as background color.

2. Add Heading 1 and write the title of this module with white as text color.

3. For the content add paragraph use 20 pixel for text size and then write
your reflection/generalization about this lesson. Minimum of 5
sentences.

4. Use Yellow for text color content.

5. Use Forte as style of the text.

Rubrics:

Needs work Developing Meets Standard Score

Information is not Some of Information is
always clear or information is always clear or
Content correct. clear and correct. correct.

10 15 20
There are 4 and There are 1-3 There are no
Code more coding errors. coding errors. errors.
 10 20 30
Background, text Background, text Background, text
format and color format and color format, and color
usage are not the usage are slightly usage are exactly
Visual same with the given the same with the the same with the
Design instructions. given instructions. given instructions.

10 15 20

Total /50

*Answer the Worksheet number 12 and submit a soft copy/hard copy of your
completed activity to your subject teacher on the following meeting.

WRAP–UP

In CSS 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 properties which can be used to add or
change a style for a webpage, in one to sentence describe the use of each property.

1. background-color
2. color
3. font-family
4. font-size
5. text-align

VALUING

Instructions: Read and answer the following questions carefully in two to

three sentences each number.

1. What do think is the importance of using style attribute in designing

webpage?
 ___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

2. How will you use the knowledge you acquired in this module?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

POST TEST

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

1. CSS property defines the background color of the webpage.

A. Color B. font-size C. background-color D. text-align

2. CSS property defines the color of the text.

A. Color B. font-size C. font-family D. text-align

3. CSS property defines the horizontal text alignment.

A. Color B. font-size C. font-family D. text-align

4. CSS property defines the style of the text.

A. Color B. font-family C. background-color D.text-align

5. Attribute use to add style for a webpage.

A. Style attribute B. Property C. Font tag D. Value

KEY TO CORRECTION
B 5. A 5.
D 4. B 4.
C 3. D 3.
B 2. A 2.
A 1. C 1.

Pre-test: Post-test:
 REFERENCES
 Accessed July 13, 2020 11:30Am https://www.w3schools.com
 Accessed July 13, 2020 12:00Am https://www.tutorialrepublic.com