COMPUTER SCIENCE

Quarter 1 – Module 1:
Cascading Style Sheet

Self-Learning Module
Learner’s Material
Introductory Message

For the facilitator:

This stand-alone module in Computer Science is intended for distance learning
modality. Learners who could not afford online or face-to-face learning can utilize this
module. It includes a learner-friendly pretest, self-check exercises, additional
activities, and other learning instructions intended to help learners learn even teachers
and learner are geographically remote from each other. This covers topics in Grade
10 in the 1st Quarter with corresponding learning activities for learners to achieve the
most essential learning competencies and lesson objectives. Moreover, each exercise
in this module is designed for independent learning and practice. However, ensure
that the learners’ parents, elder siblings, guardians or relatives at home will guide and
support them as they accomplish its given tasks.
Furthermore, explain to students that taking the tests diligently will allow them to learn
their lessons for their academic progress. Most importantly, remind them to answer
the given activities on a separate answer sheet and handle this module with utmost
care.

For the learner:

This learner-friendly module in Computer Science is specially designed for your

learning needs and progress. Your patience and dedication in reading and answering
its learning exercises will help you successfully cope with lessons. You are free to ask
assistance from your teachers, parents, siblings, friends, and family members whom
you think can help you best. Read each lesson carefully and follow the instructions for
your activities after reading.
Remember to answer the given exercises in a separate sheet of paper. When you are
done, kindly return it to your teacher to check and evaluate your level of competency.

Good luck and God bless.

2
 I Need to Know

In this module, you will be introduced to different learning activities preparing

you to be skillful before you take the plunge into the world of work in a Web
Development Team.
This module is specifically crafted to focus on Cascading Style Sheets or CSS
enriched with learning activities that will assess your level in terms of skills and
knowledge.

After going through this module, you are expected to

1. define Cascading Style Sheet or CSS

2. identify the CSS structure, its capabilities and advantages
3. differentiate embedded, linked and external CSS, and
4. create a simple page using CSS.

I Will Check On This

Read each sentence carefully. Select the letter of the best answer.

1. A simply designed language intended to simplify the process of making web

pages presentable. It allows you to apply styles to web pages.
a. HyperText Markup Language
b. Cascading Style Sheet
c. Photoshop
d. Javascript

2. It is a hidden code used to define the page’s content and helps us

communicate with others on the World Wide Web.
a. HyperText Markup Language
b. Cascading Style Sheet
c. Photoshop
d. Javascript

3. Which of the following statements best describe an external style sheets?

a. An external style sheet may be used if one single HTML page has a
unique style.

3
 b. The external style is defined inside the <style> element, inside the head
section.
c. These are used for isolated changes to a paragraph, picture or other
element.
d. You can apply one external style sheet to unlimited number of pages.

4. All are true about Cascading Style Sheet EXCEPT

a. CSS is considered as clean coding technique, which means search
engines won’t have to struggle to “read” its content.
b. To make a global change simply change the style, and all elements in all
the webpages will be updated automatically.
c. CSS has limited attributes than HTML.
d. CSS saves typing and development time.

5. What is a Syntax?
a. A set of interpretation to text that describes how it is to be structured, laid
out or formatted.
b. Style rules that are interpreted by the browser and then applied to the
corresponding elements in your document.
c. The basic units or building blocks of an HTML file or CSS code that tell
the browser how to display the text or graphics in the document.
d. Provides additional information about the tag.

6. CSS Syntax consists of the following EXCEPT

a. Selector
b. Property
c. Value
d. Angle Brackets

7. It is a simple text editor for Microsoft Windows and a basic text-editing

program which enables computer users to create HTML document.
a. Webpage
b. Notepad ++
c. Website
d. C ++

8. Which of the following symbols and characters is NOT included in a CSS

syntax?
a. : b. ; c. @ d. }

9. It refers to the weight of the attribute you want to apply to the element
property.
a. Selector
b. Property
c. Value
d. Declaration block
4
 10. Differentiate CSS from HTML.
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

Lesson

1 Cascading Style Sheet

Lesson Overview

Cascading Style Sheets, fondly referred to as CSS, is a simply designed

language intended to simplify the process of making web pages presentable. CSS
allows you to apply styles to web pages. More importantly, CSS enables you to do this
independent of the HTML that makes up each web page. CSS is easy to learn and
understood but it provides powerful control over the presentation of an HTML
document.

WHY CSS?

 CSS saves time: You can write CSS once and reuse same sheet in multiple
HTML pages.
 Easy Maintenance: To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
 Search Engines: CSS is considered as clean coding technique, which means
search engines won’t have to struggle to “read” its content.
 Superior styles to HTML: CSS has a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML
attributes.
 Offline Browsing: CSS can store web applications locally with the help of offline
cache. Using of this we can view offline websites.

CSS Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied
to the corresponding elements in your document.
A style rule set consists of a selector and declaration block.

5
  The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated by a
colon.

For Example:

1. color is property and blue is value.

2. font size is property and 12px is value.

 The property is the style attribute you want to modify.

 The value is the weight of the attribute you want to apply to the element
Property.

 A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.

Example:

In the following example all p elements will be center-aligned, with a blue text color:

p{
color: blue;
text-align: center;
}

6
 Three kinds of Cascading Style Sheet

Kinds of CSS Description

1. External Style Sheet These are the most global of the three kinds
of CSS because you can apply the same one
to an unlimited number of pages. External
CSS file has a .css extension.
Ex. <link rel=”CSS” title= “Default”
href=”style.css” type=”text/css”>

2. Embedded or Internal Style These are used for creating a document-

Sheet wide style rule placed within an HTML
document, between the
<head> and </head>.
Ex. <style type=”text/css”>

3. Inline Style Sheet These are used for isolated changes to a

headline, paragraph, picture or other
element.
Ex. <p style=“background-color:
gray;”>

I Will Do This

Use your HTML Code Play application to write an HTML code with the same
output/format as below. No specifications required for title, heading size and font face.
Write your code in a separate paper.

7
 I Learned This

Fill-in the blanks. Select your answer from the word box.

Inline Style Sheet HyperText Markup Language External Style Sheet

Cascading Style Sheet CSS Syntax Embedded Style Sheet

I have learned that 1.____________ is a simply designed language intended to

simplify the process of making web pages more presentable by applying styles. CSS
comprises of style rules or what we called 2. ____________ that are interpreted by
the browser and then applied to the corresponding elements in your document. 3.
There are three kinds of CSS, the most global kind is 3. ____________ because it can
be applied to several number of pages, 4. ____________ are used for isolated
changes to a headline, paragraph, images or other element and lastly 5.
____________, which are used for creating a document-wide style rule placed within
an HTML document between the <head> and </head>.

I Practice This

Practice the following codes using your HTML Code Play and see the output. Identify
what kind of CSS is used.

1. 2.

<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<head> <head>
<title>Paragraphs</title> <title>Paragraphs</title>
</head> <style type="text/css">
<body> p { font-family: Arial; color: red; }
<p>This is the first paragraph.</p> </style>
<p>This is the second paragraph.</p> </head>
<p style="font-family: Arial; color: <body>
red;">This is the third paragraph.</p> <p>This is the first paragraph.</p>
</body> <p>This is the second paragraph.</p>
</html> <p>This is the third paragraph.</p>
</body>
</html>

8
 I Apply This

Identify the different parts of a CSS Syntax/Structure and select your answer from the
box below. Write the letter only.

2. 3.

1. p { A. Semi Colon F. Property

B. Curly Brace G. Colon
4. color: red; C. Selector
D. Value
5. } E. Declaration Block

6. 7.

I Test Myself

CSS Debugging. Below is an example of a CSS Code with its output, identify the
error of each line and mark  if it is correct and x if it is otherwise.

___1. <?DOCTYPE Html>

___2. <html>
___3. <head>
___4. <style link rel = “text/css”>
___5. body
___6. { background-color: lightblue }
___7. H7 { color: darkgreen;
___8. text-align: center; }
___9. p
___10. { font-family: verdana;
___11. font-size: 20px; }
___12. </style>>
___13. </head>
___14. <body>
___15. <h2>My First CSS Example</h1>
___16. pThis is a paragraph.</p>
___17. <body>
___18. </html>

9
 Post Test

True or False. Write T if the statement is correct and F if it is otherwise.

1. CSS defines how HTML elements are to be displayed.

2. External style sheets enable you to change the appearance and layout of all the
pages in a Web site, just by editing one single file.
3. CSS is used to define the page’s content while HTML is used to define how the
content and webpage will look.
4. External CSS file has .html file extension.
5. Each declaration consists of a property and a value separated by a semi colon.
6. An external style sheet can be written in any text editor. The file should not
contain any html tags.
7. This is an example of an Internal Style Sheet: <p style="color:sienna;margin-
left:20px">This is a paragraph.</p>.
8. The color can be specified by a color name, an RYB value or a hexadecimal
value.
9. The text-align property is used to set the horizontal alignment of a text.
10. It is a simple text editor for Microsoft Windows and a basic text-editing program
which enables computer users to create HTML document.

REFERENCES

https://www.geeksforgeeks.org/css-introduction/
Web Design by Info Tech Learning Publications, pages 112-119
https://www.w3schools.com/css/

For inquiries and clarifications:

Hannah Marie Jolo-Dojoles

09173003745 / 09479469720

10