Computer
Programming
(ICT)
QUARTER 1
MODULE Text Formatting Using
15 Cascading Style Sheet
TECHNICAL VOCATIONAL LIVELIHOOD
Computer Programming (ICT) – Grade 11
Quarter 1 – Module 15: Text Formatting Using Cascading Style Sheet, 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
Writers : John Michael A. Bautista, Dan Reinnier C. Amigo
Editors : Ma. Lerma I. Cantanero
Reviewers : Rowena O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
Assistant Schools Division Superintendent
OIC-Schools Division Superintendent
Aurelio G. Alfonso, Ed. D.
OIC-Assistant Schools Division Superintendent
Victor M. Javena, Ed. D.
OIC – Chief Curriculum Implementation Division
Chef School Governance and Operation 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)
Printed in the Philippines
Teresitaby
P. ________________________
Tagulao EdD (Mathematics/ABM)
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
(ICT)
QUARTER 1
MODULE Text Formatting Using
15 Cascading Style Sheet
Introductory Message
For the facilitator:
Welcome to the Computer Programming for the ICT Module on Text Formatting Using
Cascading Style Sheet!
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 Text Formatting Using
Cascading Style Sheet!
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 the why is it necessary to use text formatting on a
webpage.
Appreciate different advanced typography formatting techniques.
Utilize advanced formatting syntaxes.
PRE–TEST
Instruction: Select the letter that corresponds to the correct answer.
1. Which among these is not part of the text decoration property?
A. Border B. Overline C. Underline D. Strikethrough
2. Which among the following is not included in the text transformation
property?
A. Changing the text to lowercase
B. Changing the text to uppercase
C. Capitalize the last letter of the text
D. Capitalize the first letter of the text
3. What property is used to specify the space between words in a text?
A. Word spacing B. White spacing C. Letter spacing D. Text spacing
4. What property is used to specify the space between letters?
A. Word spacing B. White spacing C. Letter spacing D. Text spacing
5. Which of the following is used to make a blur or washed out effect on the
shadow of a text?
A. Text Blur C. Text Washed Out
B. Text Shadow D. Text Decoration
RECAP
The basic syntaxes in HTML5 and CSS include formatting font style and size,
text alignment, font color and background of the text. Give 5 text formatting tags
used in CSS.
LESSON
Text Formatting Using Cascading Style Sheet
For webpages, CSS is always used in combination with a markup
language(HTML). And with HTML5 omitting the <font> tag, CSS is being used
instead. In this lesson we are going to learn about other text formatting syntaxes
which are considered as advanced typography in CSS used on web pages along with
HTML. Formatting texts on a web page is commonly used not only for decoration but
also to provide emphasis on a subject matter.
Text Decoration
As this property name suggest, it allows you to decorate your text in various
ways. The text-decoration property makes it easy to add lines over, under or through
your text, but bear in mind that it's not a border - the line(s) drawn by the text-
decoration property will always be the same color as the text itself. If you need a line
in a different color below or above your text, you should use the border properties.
It is not recommended to underline text that is not a link, as this often
confuses the reader. Text-decoration property also allows you to apply several values
at once. Refer to codes and output below.
Output:
The value text-decoration: none; is often used to remove underlines from links.
Text Transformation
This property is used to transform text into uppercase, lowercase, or capitalise
the first letter of text.
Keep in mind that no matter how the text is
written, the syntax will always be respected. If the
string or the text is written in lowercase (as shown
in the example above) but the syntax says
uppercase, the output for the text will be shown on
uppercase.
Letter and Word Spacing and Indention
Word-spacing is one of those features that should only be used for headings,
block quotes, or other non body text as it can have a nice visual effect but decreases
the readability. CSS treats every character or set of characters with a space around
them as a 'word'. This property specifies the space between words in a text.
The letter-spacing property is used to control the amount of space between
the letters. Negative values is used in order to get the letters to stand even closer.
Just like with word-spacing, this feature is for headings, block quotes, and so forth,
but is not advised for body text.
The text-indent property is used to specify the indentation of the first line of a
text or a paragraph.
The codes above will have the output below:
Text Shadow
This property adds shadow to text. The text-shadow property has control over
three things - the color, the placement and the blur. This means that there are four
values:
color
x-coordinate (horizontal)
y-coordinate (vertical)
blur radius
You can use either HEX colors of RGB colors when you define the color. The
coordinates are based on the placement of the text and can be either positive or
negative. The amount of blur defines how 'washed-out' your shadow is.
Study the following example and its output:
Output:
Note: Be mindful of the color of the text, the shadow and the background.
ACTIVITIES
Coding: Complete the codes to produce the required output. Use the given guide for
the value of properties to be used. (5pts each)
1. Use text decoration on header to have over line and underline.
2. Set the horizontal and vertical shadow effect to 5px, blur radius to 5px
and the color to gray.
3. Set the paragraph indent to 50px.
4. Use text decoration to remove the underline on the hyperlink.
5. Make the "hello, world!" all caps
6. Put a 5px letter spacing on the word SOURCE:
Debugging: You can use the codes below as reference for the coding activity, however
there are four errors that you have to find. Encircle these errors. (5pts each)
Required Output:
Answer Worksheet number 15-1 and submit your answer to our group
messenger
WRAP–UP
Advanced typography in cascading style sheet can be tricky but once you’ve
learned how to do it, it can be fun as well. Use the following questions as a guide and
make a short summary about the things learned in this module.
What are the three various ways to decorate a text, which can be used
separately or in combination?
We can also transform text in three different ways, what are these?
Which part of the file or page do you use word spacing and letter spacing? And
which part should you never use it?
What is the function of the text indent property?
This property is good for providing emphasis and design at the same time.
What property is this that also adds shadow to the text?
VALUING
Instruction: Read the following questions or statements carefully. Write your
answer on the space provided.
1. As a future programmer or web developer, why do you think it is important
to learn advanced typography using cascading style sheet?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
2. Why do you think it is important to put some design on texts especially if it is
important?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
3. Do you think that learning these text formatting techniques is important in
your future career? Why or why not?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
POST TEST
Instruction: Identify the property that is being described in each question.
_____________ 1. This property adds shadow to the text.
_____________ 2. By using this, you can put underline, over line and strikethrough in
the text.
_____________ 3. With this property you can transform all the lowercase text to
uppercase.
_____________ 4. This is used to control the whitespace on the first line of a
paragraph.
_____________ 5. This property can remove the spaces between letters.
Pretest
1. A
2. C
3. A
4. C
5. B
Activity 1 Coding
1. text-decoration: overline underline ;
2. text-shadow: 5px 5px 5px gray;
3. text-indent: 50px;
4. text-decoration:none
5. text-transform: uppercase;
6. letter-spacing: 5px
Activity 2 Debugging
Post test
1. text shadow
2. text decoration
3. text transform
4. text indent
5. letter spacing
KEY TO CORRECTION
REFERENCES
“CSS3 Tutorial.” Accessed 4:30pm, July 15, 2020. https://css3-
tutorial.net/text/text-decoration/
“CSS Text Decoration.” Accessed 4:30pm July 15, 2020.
https://www.w3schools.com/css/css_text_decoration.asp
“CSS Text Transformation.” Accessed 5:28pm, July 15, 2020.
https://www.w3schools.com/css/css_text_transformation.asp
“Advanced Typography – Word Spacing, Letter Spacing and Text Align!”
Accessed 5:29pm, July 15, 2020. https://css3-tutorial.net/text-
font/advanced-typography/
“Text Indent.” Accessed 9:35am, July 16, 2020. https://css3-
tutorial.net/text/text-indent/
“CSS Text Spacing” Accessed 9:38am July 16, 2020.
https://www.w3schools.com/css/css_text_spacing.asp
“Text Shadow” Accessed 10:30am July 16, 2020. https://css3-
tutorial.net/text-font/text-shadow/
“CSS Text Shadow” Accessed 10:30am, July 16, 2020
https://www.w3schools.com/css/css_text_shadow.asp
