Department of Education
Division of Nueva Vizcaya
Diocese of Bayombong Educational System (DBES)
Saint Louis School, Solano, Nueva Vizcaya
SAINT JEROME’S ACADEMY OF BAGABAG INC.
San Geronimo, Bagabag, Nueva Vizcaya, 3711
SELF-PACED LEARNING MODULE
Teacher: MICHAEL U. BATUNGBAKAL
Subject: Computer 8
CP #: 09532336441
Name of Student: ____________________________
Year and Section: __________________
Week No.:
I
Inclusive Date: ______________________
SECOND QUARTER MODULE
Good day Class, I hope your enthusiasm and excitement got more ignited and challenged to our new
mode of learning amidst this COVID-19 outbreak. In our Computer Subject, we will focus on Cascading Style
Sheet, CSS Parts and Its Structure. In this subject, your prior knowledge in your Computer Subject will still be
used for you to be able to cope with given tasks/ activities. I hope you will enjoy our lessons.
God bless and let’s get into it!
COMPUTER 8 WEEK 1:
Following the standards set by DepEd and the World Wide Web
Consortium, the subject encompasses topics involving the use of
Hypertext Markup Language in the creation of webpages. As
Content Standard
such, students are expected to properly develop a linked and
functional webpage with proper design.
Performance Standard
At the end of the unit, the students should be able to assemble
multiple webpages linked together Demonstrate the importance
of dividing a website into several webpages
Most Essential Learning Determine the functionality of CSS
Competency(MELCS)
21st Century Learning Skills Creativity, Critical Thinking
Core Values
Excellence, Social Responsibility
REFERENCES:
A. Printed:
Copyright © 2018 by Vibal Group, Inc and Mapua Information Technology, Manila: 1253 G.
Araneta Avenue cor. Ma Clara Street, Talayan Quezon City
B. Online
https://www.w3schools.com/css/css_intro.asp
https://www.hostinger.com/tutorials/what-is-css
1
TOPIC: Cascading Style Sheet /CSS
I. INTRODUCTION:
In the Introduction to HTML module we covered what HTML is, and how it is used to
markup documents. These documents will be readable in a web browser. Headings will look larger
than regular text, paragraphs break onto a new line and have space between them. Links are colored
and underlined to distinguish them from the rest of the text. What you are seeing is the browser's
default styles — very basic styles that the browser applies to HTML to make sure it will be basically
readable even if no explicit styling is specified by the author of the page.
Below are the Learning Targets/ Specific Objectives:
1. Discuss the functions of CSS.
2. Apply CSS in designing Webpages.
Exploration of Prior Knowledge
Directions: Fill in the K-W-H-L Chart below to assess your prior knowledge and
of the topic, Evolution of Information and Communication Technology.
What I Know
What I Want to Find
Out
How I Can Learn
More
understanding
What I Have Learned
Skills I expect to use:
PROCESS QUESTIONS/ FOCUS QUESTIONS:
Below are the key guide questions that you should remember as you perform all the activities in this
lesson. You should be able to answer them at the end of the week.
1. Why use Cascading Style Sheets (CSS)?
____________________________________________________________________________________________
________________________________________________________________________________
SHORT EXERCISES/DRILLS:
1. Search for any website in your web browser and inspect the elements and list down 5 CSS code.
___________________________________________________________________________________________________
____________________________________________________________________________________
CONTENTDISCUSSION:
CSS
CSSororCascading
CascadingStyle
StyleSheet
Sheetisisdesigned
designedprimarily
primarilytotoenable
enablethe
theseparation
separationofofpresentation
presentationand
andcontent,
including
such
as the such
layout,
and fonts.
This
canseparation
improve content
accessibility,
content, aspects
including
aspects
as colors,
the layout,
colors,
andseparation
fonts. This
can improve
contentprovide
more
flexibilityprovide
and control
the specification
of presentation
characteristics,
enable multiple
HTML pages to
accessibility,
moreinflexibility
and control
in the specification
of presentation
characteristics,
share
formatting
specifying
relevant
CSS inby
a separate.css
file,relevant
and reduce
and repetition
enable
multiple by
HTML
pages the
to share
formatting
specifying the
CSS complexity
in a separate.css
file, and in the
structural
content. and repetition in the structural content.
reduce complexity
What is CSS?
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document
written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how
elements should be rendered on screen, on paper, in speech, or on other media.
CSS is among the core languages of the open web and is standardized across Web browsers according
to W3C specifications. Previously, development of various parts of CSS specification was done synchronously,
which allowed versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, CSS3.
However, CSS4 has never become an official version.
From CSS3, the scope of the specification increased significantly and the progress on different CSS
modules started to differ so much, that it became more effective to develop and release recommendations
2
separately per module. Instead of versioning the CSS specification, W3C now periodically takes a snapshot of the
latest stable state of the CSS specification.
What is CSS for?
 As we have mentioned before, CSS is a language for specifying how documents are presented to users how
they are styled, laid out, etc.
 A document is usually a text file structured using a markup language HTML is the most common markup
language, but you may also come across other markup languages such as SVG or XML.
 Presenting a document to a user means converting it into a form usable by your audience. Browsers,
like Firefox, Chrome, or Edge , are designed to present documents visually, for example, on a computer
screen, projector or printer.
A browser is sometimes called a user agent, which
basically means a computer program that represents a person
inside a computer system. Browsers are the main type of user
agent we think of when talking about CSS, however, it is not the
only one. There are other user agents available such as those
which convert HTML and CSS documents into PDFs to be
printed.
CSS can be used for very basic document text styling for
example changing the color and size of headings and links. It can
be used to create layout for example turning a single column of
text into a layout with a main content area and a sidebar for
related information. It can even be used for effects such
as animation.
CSS Syntax
A CSS rule consists of a selector and a declaration block
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.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly
braces.
Example:
In this example all <p> elements will be center-aligned, with a red text color:
Example Explained:
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
3
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)
This page will explain the most basic CSS selectors.
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example:
Here, all <p> elements on the page will be center-aligned, with a red text color:
The CSS ID Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
Example:
The CSS rule below will be applied to the HTML element with id="para1":
Note: An id name cannot start with a number!
Revised Knowledge
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is
designed to enable the separation of presentation and content, including layout, colors, and fonts.
Final Knowledge
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide
Web, alongside HTML and JavaScript.
4
Diocese of Bayombong Educational System (DBES)
SAINT JEROME’S ACADEMY OF BAGABAG, INC.
San Geronimo, Bagabag, Nueva Vizcaya 3711
E-mail: stjeromeacademy1951@gmail.com
o0o
ANSWER SHEET
Computer 8
Teacher: Michael U. Batungbakal
FIRST QUARTER
Name of Student: ____________________________
Week No.:
I
Year and Section: __________________
Inclusive Date: ______________________
MODULE 1: Cascading Style Sheet /CSS
ACTIVITY 1: Directions: Write T if the statement is true and F if the statement is false.
1. Cascading Style Sheet stands for?
2. The selector contains one or more declarations separated by semicolons?
3. The CSS Selector is uses for the id attribute of an HTML element to select a specific element?
4. P is a selector of CSS it points to the HTML element you want to style: <p>?
5. CSS is a selectors is using to "find" or select the HTML elements you want to style.
6. A document is a usually a text file structured using a markup language ?
7. A Multiple CSS is a declarations to separate a semicolons, and declaration blocks are surrounded by
curly brace?
8. A CSS selectors are have a five categories?
9. A text-align is a property and the center is the property is a value?
10. H1 means the declaration?
5