MODULE COMPUTER 9
7 WEB DESIGN: Cascading Style Sheet
Mrs. Charissa A. Alinsug – Subject Teacher
BATCH 1
Time Allotment: 4 hours
CONTENT STANDARD:
The learner demonstrates understanding of key concepts of Cascading Style Sheet in HTML.
PERFORMANCE STANDARD:
The learner is able to thoroughly perform commands and tags to apply cascading style sheet in
their webpage.
ESSENTIAL QUESTION:
What is the importance of learning CSS or cascading style sheet in HTML?
ESSENTIAL UNDERSTANDING:
CSS is important because it controls all design-related aspects of your website. Typography,
colors, page layouts and any other visual aspects of your website are all controlled by CSS.
LEARNING COMPETENCIES:
The learner…
lists the ways CSS can be applied to web pages;
learns how CSS manages styles; and
explores CSS syntax.
INTRODUCTION AND FOCUS QUESTION(S)
Hello dear student, I hope you are done with your
previous performance task because in this module we will learn
more about HTML and how to apply design by the use of CSS
or cascading style sheet. What is CSS by the way? Do you have
any idea about it? Think of it this way, imagine a tree without
leaves on it. It looks like dead or no life, right?
In HTML, if we are going to create a page without CSS it
may also be like a dead tree without leaves. But, with the use of
CSS you can now put a life to your page by adding color
background and more.
While doing this module think about this questions: How
essential is it to learn CSS in doing an HMTL projects?
Lesson Coverage
In this lesson, we will discover what Cascading Style Sheet
are and how they are used in a web page.
Lists the ways CSS can be applied to web pages;
Learns how CSS manages styles; and
Explores CSS syntax.
EXPLORE
ACTIVITY 1
Hello students, you’ve been introduced with different types of tags in the previous modules. This time, we will
learn how to apply CSS in your HTML file. But before that please answer the given questions found on page 7 the answer
sheets of this module.
END EXPLORE
Hello Students How did you find the previous activity? I hope you have learned something
that actually could help you in your future endeavor.
Firm-up
Let us know first what CSS is. To have a better understanding please read the discussion starting below.
What is Cascading Style Sheets or (CSS?)
• It is responsible for the appearance, styling, and aesthetics of a web page.
• It is used to create rules that determine how HTML elements will appear.
Page 1
Let’s add background color to your page
Notice the example output
and compare it to the code
on how CSS add life to the
page
Applying css to a web page
There are three ways to apply CSS to our web page, it can be an internal CSS, external CSS, or inline CSS.
Internal CSS
Internal CSS is located within an HTML document. It is often used when you want to define styles that are
unique to that particular web page.
It is identified using the
<style> tag within the
<head> section of the
HTML document.
Page 2
external CSS
External CSS is used to you have multiple web pages that share similar styling.
External styles are defined
by the <link> element
which is located inside the
<head> section of the
Create a new file called style.css. HTML page.
inline CSS
Inline styles can be used in any element in the HTML document.
To apply styling to
an element, simply use
the style attribute.
Using CSS and Not Attributes
Syntax
CSS rules consist of selector and declaration blocks.
• The selector identifies the HTML element to
be styled.
• The declaration block contains the property
and value pairs that determine how the
element will be styled.
Each pair is separated by a semicolon (;). The
declaration block is enclosed in curly braces ({}).
Page 3
Selectors
Element selector selects an HTML element based on its name.
This is how
it should
look in the
browser:
Id Selectors
ID selector is use when you just want to style specific instances of a particular element.
This is how it
should look in the
browser:
CSS ID selectors are indicated by a hash (#) followed by
the ID of the element.
Class Selectors
Class selector points to an HTML element bearing the indicated class attribute.
Follow the example in the next page
Page 4
This is how it
should look in the
browser:
Class selectors are indicated by a period (.) followed by the class name.
Comments
Comments is use as reminders of why you chose those styles or assigned such values.
A CSS comment starts with /*
and ends with */. Comments
are ignored by the browser.
You have just learned how to apply simple CSS to your page. Now please do the next activity.
ACTIVITY 2
In this activity, please compile all your activities from 1-6 HTML file. Add hyperlink to each of the page
horizontally. Make a video while running it to your browser, name it Mod7act2, and submit via messenger. You will
be graded according to this criteria. Content-10, relevance-10, each page link to each other-30. Total-50
END OF FIRM-UP
Hello Students In the activity above you just practiced your skills not just your creativity
in using different devices but your skills in doing it manually. I know you did well Great Job!
DEEPEN
Now that you’re already equipped with the knowledge on how to work with media and
forms, let us now put words into actions by doing this last activity. Always remember to do your
best always
Page 5
ACTIVITY 3
Create a web page that will display the following:
Write an article about how to fight depression
name your page as FIGHT DEPRESSION and underline it and make it color red
put your title in the center
add a background color of your choice to your page; and
add audio background to your page
Your output will be graded based from the scoring guide below:
Content - 20 Points
Correct coding - 15 Points
Design - 15 Points
TOTAL - 50 Points
END OF DEEPEN
You just successfully applied the learning you learned from this module. Well done!
VALUES INTEGRATION – Compassionate love
Like, creating a webpage it is crucial to realize first the basic skills in making a code in order to create a
website.
We all know that mental health condition is a common problem in our society today. By this, let us
realize how special you are and that you can actually appreciate little things you have in life. Please answer the
values integration questions in your answer sheet.
SUMMARY OF THE LESSON
Answer this question during online class:
State one reason why you need to study about HTML aside from being a student.
REFERENCES
Philippine Copyright 2021
www.edulearntechnologies.com
Page 6
MODULE 7 - ANSWER SHEET
Computer 9
Name: Score:
Section: Teacher: Mrs. Charissa A. Alinsug
Style is important, often undervalued because it is so widely misunderstood. Style is what we really want
when we say we want to be fashionable. Style delights because it is always fresh, is a little ode to
ACTIVITY 1 creativity and novelty. It gives a hint of personality.Jul 1, 2005
IS STYLE NECESSARY IN OUR DAILY LIVING?
Write down below your opinion about the statement above.
SCORING RUBRIC
Organization – 10 Content – 10 Relevance - 10
For me , style is important because it reflects our personality. It doesn't really mean that I have to dress up
with beautiful clothes but it's the way that I bring myself up. For me, I feel comfortable with even the cheapest
clothes from second hand shop for as long as I am comfortable wearing it. You can still be stylish even if
you are simply dressed. Again, it's just the way you handle yourself that you got your own style.
VALUES INTEGRATION – Compassionate love
SCORING RUBRIC
Organization – 10 Content – 10 Relevance - 10
Give 5 reasons why you think you are more fortunate than other kids your age?
I think I am more fortunate than other kids my age because I have a loving and supportive family. I believe that being able to
go to school is a privilege that my parents has provided for me. Being able to live and sleep in a safe environment is
also a privilege. Our lifestyle is very simple but my parents made it sure that I get what I needed to aid in my studies. With all these
I am fortunate enough and I hope that other kids can be as fortunate as myself.
Write a short letter to somebody you want to say thank you with.
To my Mother,
Ma, thank you for being my mother and my friend. I know I am not a perfect daughter to you but I love you very
very much. Thank you for raising me, teaching me things, taking care of me and understanding me all these time. You have
showered me with love and affection and I thank you for that. I really hope that we will be together forever. I love you Ma
and thank you very much for everything. God bless us always.
Page 7
