Grade
10
TVL- ICT
COMPUTER PROGRAMMING
QUARTER 4 – MODULE 1
CSS FONTS
Prepared by:
EUGENIO L. MOLINA
Teacher III
Mangaldan National High School
0
QUARTER IV
WEEK 1
I. LEARNING OBJECTIVES
After reading this module you will be able to understand how to set fonts of a content,
available in an HTML element.
II. INTRODUCTION
Choosing the right font has a huge impact on how the readers experience a website.
The right font can create a strong identity for your brand. Using a font that is easy to read is
important. The font adds value to your text. It is also important to choose the correct color and
text size for the font.
III. READINGS/LECTURES
You can set following font properties of an element:
The font-family property is used to change the face of a font.
The font-style property is used to make a font italic or oblique.
The font-variant property is used to create a small-caps effect.
The font-weight property is used to increase or decrease how bold or light a font
appears.
The font-size property is used to increase or decrease the size of a font.
The font property is used as shorthand to specify a number of other font properties.
Set the Font Family
Following is the example, which demonstrates how to set the font family of an element.
Possible value could be any font family name.
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>
1
Output:
Set the Font Style
Following is the example, which demonstrates how to set the font style of an element.
Possible values are normal, italic and oblique.
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>
Output:
Set the Font Variant
The following example demonstrates how to set the font variant of an element. Possible
values are normal and small-caps.
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>
2
Output:
Set the Font Weight
The following example demonstrates how to set the font weight of an element. The
font-weight property provides the functionality to specify how bold a font is. Possible values
could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>
Output:
Set the Font Size
The following example demonstrates how to set the font size of an element. The font-
size property is used to control the size of fonts. Possible values could be xx-small, x-small,
small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
3
<html>
<head>
</head>
<body>
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
</body>
</html>
Output:
Set the Font Size Adjust
The following example demonstrates how to set the font size adjust of an element. This
property enables you to adjust the x-height to make fonts more legible. Possible value could
be any number.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>
Output:
4
Set the Font Stretch
The following example demonstrates how to set the font stretch of an element. This
property relies on the user's computer to have an expanded or condensed version of the
font being used.
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed,
condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>
Output:
Shorthand Property
You can use the font property to set all the font properties at once. For example:
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>
Output:
5
ACTIVITY 1: Identify what font property is given on the following elements.
1. Ultra-condensed 6. Oblique
2. Bold 7. narrower
3. Xx-small 8. Semi-expanded
4. Small-caps 9. normal
5. Lighter 10. italic
SUMMATIVE EVALUATION
A. Identify what is being asked or described by the following. Write your answer
in your answer sheet.
1. This property is used to make a font italic or oblique
2. It is used to change the face of a font.
3. This property is used to increase or decrease how bold or light a font appears.
4. Is used to create a small-caps effect.
5. The _______ property is used as shorthand to specify a number of other font
properties.
6. This property is used to increase or decrease the size of a font.
7. This property relies on the user's computer to have an expanded or condensed
version of the font being used.
8. This property enables you to adjust the x-height to make fonts more legible.
9. Possible values are normal and small-caps.
10. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500,
600, 700, 800, 900.
B. Complete the codes by following the instructions below.
1. Set the font family for the page to "Courier New", and the font family for <h1> to
"Verdana". (5 pts.)
Hint: Use the font-family property.
6
Edit This Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
2. With the font property: Set the <p> to "italic", "20px" and "Verdana". (10 pts)
Hint: The font property contains:
font-style font-variant font-weight font-size/line-height font-family
Edit This Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
KEY ANSWER
1. Font-style 6. Font-size
2. Font-family 7. Font stretch
3. Font-weight 8. Font size adjust
4. Font-variant 9. Font variant
5. Font-property 10. Font weight
7
ANSWER SHEET
NAME: ________________________________________ Score: ____________________
Gr. & Sec: ___________________ Subj. Teacher: _______________________________
References: https://www.tutorialspoint.com/html/html_comments.htm
Learn to Code HTML & CSS –Develop and Style Website by: Shay Howe
