Scribd
Upload
5 views

Grade6 StylingTextCSS

Uploaded by

keitakeshima29
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Grade6 StylingTextCSS

Uploaded by

keitakeshima29
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

D- WHIZ in Web Designing using HTML and CSS for Grade 6

Immaculate Heart of Mary College- Quezon City

4TH
OVERVIEW QUARTER

Styling Text with CSS

Objectives:

 Learn how CSS helps to style in a web page; and


 Use different methods in applying a style sheet;

Materials:

 DWHIZ BOOK in Web Designing using HTML and CSS3


 Desktop or Laptop
 Notepad ++

ENGAGE

1. What makes the cover of the magazines eye catching aside from the
pictures?
D- WHIZ in Web Designing using HTML and CSS for Grade 6

Immaculate Heart of Mary College- Quezon City

2. What is the importance of lettering or styling text?

EXPLAIN
Choosing a Font Family

Choosing what kind of font you will use on your webpage will have a
big impact on its readability. You may lose your visitors if they will have
trouble reading your page.

Although there are no hard and fast rules regarding this matter, you
should remember that you don’t have the same control on the contents that
are supposed to be displayed online over things that you have to print. For
example, you may use on your web page but it isn’t guarantee that it will
displayed properly, because your viewers don’t have it installed in their
computers. To work around this issue, you can specify a font-family rather
than an individual font.

Choosing a Font Family

Choosing what kind of font you will use on your webpage will have a
big impact on its readability. You may lose your visitors if they will have
trouble reading your page.

Although there are no hard and fast rules regarding this matter, you
should remember that you don’t have the same control on the contents that
are supposed to be displayed online over things that you have to print. For
example, you may use on your web page but it isn’t guarantee that it will
displayed properly, because your viewers don’t have it installed in their
computers. To work around this issue, you can specify a font-family rather
than an individual font.

What is a Font- Family?

A Font- Family is a set of fonts with the same typeface but with
different sizes, weights, and slants. It is listed in order of preference. If the
computer displaying your page does not have the first font in the list, it will
check the second alternative font, and then the third, and so on until it finds
a match. Here’s how you can specify a font- family using a style- sheet:

H1 { font- Family: Arial Black”;} – specifies a single font using css

H1 { font- Family: Courier New”, “Courier”, monospace;}- specifies fonts with


alternatives

<p style=”font-family: Courier New, Courier, monospace”>

In the inline style sheet, the quotation marks are placed around the entire
style rule.

There are few generic font types that are most


generally available in all PCs. These are: Serif, Sans-
Serif, cursive, fantasy and monospace. Here’s how
they are displayed in a webpage.
D- WHIZ in Web Designing using HTML and CSS for Grade 6

Immaculate Heart of Mary College- Quezon City

You can be assured that at least you will get the last choice by specifying a
font type as your final font, in case the browser cannot display any of your
preferences. Below are some common groups o font families according to
their similar appearances:

 Arial Black, Helvetica Bold


 Arial, Helvetica, sans- serif
 Verdana, Geneva, Arial, Helvetica, san- serif
 Times new roman, Times, serif
 Courier new, courier, monospace
 Georgia, Times new Roman, Times, serif
 Zapf- Chancery, cursive
 Western, Fantasy

EXPLORE
Demonstration:

Specifying font- family in CSS


D- WHIZ in Web Designing using HTML and CSS for Grade 6

Immaculate Heart of Mary College- Quezon City

To ensure that the browser will use your preferred font and will appear
properly when displayed in any computer screen, you may specify it using
the font- family property of your style sheet.

1. Create new external style sheet in Notepad.


2. Type the following style rule:

H2{ font-family:” Trajan pro”, “times new roman”, serif;}/*for main


heading*/

H3{ font- family: ”century gothic”, cursive;} /* for sub- heading*/

H4{ font-family: “Arial Black”;} /*for paragraph*/

P{ font- Family: “Courier”, sans- serif;}/*for paragraphs*/

Ul{ font- family: “Courier”, sans- serif;} /* for bulleted list*/

3. Save this external style sheet as font- Family.css


4. Open the climate- change- anchor.html file in notepad.
5. Apply your font- family.css style sheet file by inserting a <link> tag in
your html document similar to this:

<head>
<title>Science World </title>
<meta charset= “utf-8”>
<link rel=”stylesheet” type=”text/css” href=”fontfamily.css”>
</head>
6. Save this html documents as climate-change-fontfamily.html.
7. Test in a browser.

Sample Output:

EXTEND
Coronavirus disease (COVID-19) is an infectious disease caused by a
newly discovered coronavirus. Most people who fall sick with COVID-19 will
D- WHIZ in Web Designing using HTML and CSS for Grade 6

Immaculate Heart of Mary College- Quezon City

experience mild to moderate symptoms and recover without special


treatment.

The virus that causes COVID-19 is mainly transmitted through droplets


generated when an infected person coughs, sneezes, or exhales. These
droplets are too heavy to hang in the air, and quickly fall on floors or
surfaces.

You can be infected by breathing in the virus if you are within close proximity
of someone who has COVID-19, or by touching a contaminated surface and
then your eyes, nose or mouth.

EVALUATE
Instructions: Create and design a webpage with a theme “Ways how to
prevent COVID - 19” using style paragraph CSS in Notepad ++.

Observe the given criteria below:

Criteria Exemplary Acceptable Developing Needs


( 10 pts) (8 pts) (5 pts) Improvement
( 3 pts)
Codes The code is The codes is fairly The code is The code is
( 10 pts.) exceptionally well easy to read and poorly organized limited, cluttered
organized and very understand. and very difficult and confusing.
easy to follow and to read.
understand.

Layout & The webpage works The webpage The webpage The webpage is
Design and meets all of the works and meets works and meets not functioning
(10 pts) specifications. most of the some of the and did not meet
Extremely clear specifications. specification. the specifications,
structure, layout and Structure, layout Structure, layout structure, layout
format of the page; and format of the and format of the and format of the
Text and images flow page are fairly page are not so page. No clear text
together smoothly; clear. Text and clear. Text and links and images
color and fonts ( face links and images links and images applied.
style) effective to flow together; are cluttered and
support design and color and fonts confusing: colors
content.. ( face style ) and fonts ( face
support purpose style) used
and message. randomly.

You might also like