Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
67 views

Computer 9: WEB DESIGN: Cascading Style Sheet

The document discusses applying CSS to HTML pages. It explains the different ways CSS can be applied, such as internally, externally, and inline. It also covers CSS syntax including selectors, properties, and values. Students are instructed to complete activities applying CSS they learned.

Uploaded by

coalie galaxy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

Computer 9: WEB DESIGN: Cascading Style Sheet

The document discusses applying CSS to HTML pages. It explains the different ways CSS can be applied, such as internally, externally, and inline. It also covers CSS syntax including selectors, properties, and values. Students are instructed to complete activities applying CSS they learned.

Uploaded by

coalie galaxy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like