Lesson Plan

REPUBLIC OF THE PHILIPPINES
TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES

CAVITE CAMPUS
Carlos Q. Trinidad Avenue, Salawag, Dasmariñas City, Cavite, Philippines
Telefax: (046) 416-4920
Email: cavite@tup.edu.ph │ Website: www.tup.edu.ph
Introduction to CSS (Cascading Style

Sheets)
Web Development 1
BTTE-CP-4A
October 5, 2022
IPT-C
08:00 a.m. – 11:00 a.m.
Prepared by:
Danica Marge B. Verino

Students Teacher
Checked by:
Prof. Julieta Fajardo

In-Campus Teaching Professor
I. OBJECTIVES
At the end of the lesson, the students should be able to:
1. identify the importance of CSS in websites;

2. differentiate the three types of CSS; and
3. implement CSS Color in website.
II. SUBJECT MATTER
Main Topic : Introduction to CSS (Cascading Style Sheets)

Values Integrated : Creativity, Logical Thinking and Coding Skills
Instructional Materials : PowerPoint Presentation, Google Meet, Codepen
References : Learn CSS. web.dev. (n.d.). Retrieved September 24,

2022, from https://web.dev/learn/css/
: CSS tutorial. (n.d.). Retrieved September 24, 2022, from

https://www.w3schools.com/css/default.asp
: CSS. GeeksforGeeks. (n.d.). Retrieved September 24, 2022, from

https://www.geeksforgeeks.org/css/?ref=lbp
: CodePen feature. (n.d.). Retrieved September 24, 2022,

from https://codepen.io/features/
III. LEARNING ACTIVITIES

A. Preparatory Activities
1. Daily Routine
a. Greetings
b. Classroom Management
c. Prayer
d. Checking of Attendance
e. Energizer
2. Review
The teacher will ask the students about the past lesson:
a. What is HTML?
b. Why we use HTML Style Attribute?
c. Give an example of HTML Formatting Elements
3. Motivation
Title: Guessing Game
Instruction: This activity will be conducted on Google Meet. Students
are required to type their surname first in the comment
box before answering. If your surname was called, you
have 3 seconds to answer. Anyone who tried to answer
without their surname being called will be disqualified and
will have deduction in their activity.
B. Presentation of the Lesson

1. Introduction
Why should we learn CSS?
Styling is an important aspect of any website. It improves the website's standards
and overall appearance, making it easier for users to interact with it. A website
can be created without CSS, but styling is required because no user wants to
interact with a dull and shabby website. Learning CSS is therefore, required for
understanding Web Development.
2. Lesson Proper
CSS (Cascading Style Sheets)
- is used to apply styles to web pages. Cascading Style Sheets are fondly
referred to as CSS. It is used to make web pages presentable. The reason for
using this is to simplify the process of making web pages presentable. It
allows you to apply styles on web pages. More importantly, it enables you to
do this independently of the HTML that makes up each web page.
Basic Format: It is the basic structure of CSS style of a webpage.
body {
background-color: lightgray;
}
h1 {
color: green;
text-align: center;
}
p {
font-family: sans-serif;
font-size: 16px;
}
There are three types of CSS which are given below:
1. The Internal CSS has <style> tag in the <head> section of

the HTML document. This CSS style is an effective way to style single
pages. Using the CSS style for multiple web pages is time-consuming
because we require placing the style on each web page.
Example:
<html>
<head>
<style>
body {
background-color: lightblue;
}
h2 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h2>CSS types</h2>
<p>Cascading Style sheet types: inline, external and internal</p>
</body>
</html>
2. In External CSS, we link the web pages to the external .css file. It is created

by text editor. The CSS is more efficient method for styling a website. By
editing the .css file, we can change the whole site at once.
Example:
HTML CODE
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS CODE
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
3. Inline CSS is used to style a specific HTML element. Add a style attribute to
each HTML tag without using the selectors. Managing a website may
difficult if we use only inline CSS. However, Inline CSS in HTML is useful in
some situations. We have not access the CSS files or to apply styles to
element.
Example:
<html>
<body style="background-color:black;">
<h1 style="color:Red;padding:20px;">CSS Tutorials</h1>
<p style="color:blue;">It will be useful here.</p>
</body>
</html>
CSS COMMENTS
 Comments are used to explain the code, and may help when you
edit the source code at a later date.
 Comments are ignored by browsers.
 A CSS comment is placed inside the <style> element, and starts
with /* and ends with */:
Example:
/* This is a single-line comment */
p {
color: red;
}
 You can add comments wherever you want in the code:
Example:
p {
color: red; /* Set text color to red */
}
 Comments can also span multiple lines:
Example:
/* This is
a multi-line
comment */
p {
color: red;
}
CSS COLORS
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
CSS Color Names
In CSS, a color can be specified by using a predefined color name:
 Tomato
 Orange
 DodgerBlue
 MediumSeaGreen
 Gray
 SlateBlue
 Violet
CSS RGB Colors
RGB Value
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and
255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value
(255) and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Experiment by mixing the RGB values below:
rgb(255, 99, 71)

Example:
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
CSS HEX Colors
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and
BB (blue) hexadecimal integers specify the components of the color.
HEX Value
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and
ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value
(ff) and the others are set to the lowest value (00).
To display black, set all values to 00, like this: #000000.
To display white, set all values to ff, like this: #ffffff.
Experiment by mixing the HEX values below:
#ff6347
Example:
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
CSS HSL Colors
HSL stands for hue, saturation, and lightness.
HSL Value
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the
form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240
is blue.
Saturation is a percentage value. 0% means a shade of gray, and 100% is the full
color.
Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is
white
Experiment by mixing the HSL values below:
hsl(0, 100%, 50%)
Example:
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Saturation
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray.
50% is 50% gray, but you can still see the color.
0% is completely gray; you can no longer see the color.
Example:
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Lightness
The lightness of a color can be described as how much light you want to give the
color, where 0% means no light (black), 50% means 50% light (neither dark nor
light) and 100% means full lightness (white).
Example:
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
3. Application
The teacher will ask the students to answer the activity using the sample code
below. They can use CodePen to run their code, after they answer the activity,
they should screenshot their answer and turn in it on the link provided. The
allotted time for this activity will be 10 minutes.
1. Add an external style sheet with the URL: "mystyle.css". (2 points)
<head>
_____
</head>
<body>
<p>This is a paragraph</p>
</body>
2. Set the page's background color to red, by using an inline style. (1 point)
_____
<body ="background-color: red">
</body>
3. Set the page's background color to red. (2 points)
<style>
____
{
_______
red;
}
</style>
<body>
</body>
Key to Correction of Application
1. <link rel="stylesheet" href="mystyle.css">

2. style
3. body and background-color:
4. Generalization
 What are the three (3) types of CSS?
 Give me an example of CSS Color.
 Why do we need to learn CSS?
Three types of CSS

1. Internal CSS
2. External CSS
3. Inline CSS
CSS COLOR
 Color names
 RGB
 HEX
 HSL
IV. EVALUATION
Direction: The teacher will give 5-item quiz via Google forms. Read the questions
carefully and choose the letter that best describe the answer.
1. What does CSS stand for?

a. Computer Style Sheet
b. Cascading Style Sheet
c. Creative Style Sheet
d. Colorful Style Sheet
2. What is the correct HTML for referring to an external style sheet?
a. <link rel = “stylesheet” type=”text/css” href=”mystyle.css”>
b. <stylesheet>mystyle.css</stylesheet>
c. <style src=”mystyle.css”>
d. */Stylesheet/*
3. How do you insert a comment in CSS file?
a. /*this is a comment*/
b. //this is a comment
c. */this is a comment/*
d. //this is a comment//
4. It is describe as the intensity of color.
a. Lightness
b. Darkness
c. Saturation
d. Value
5. Each parameter (red, green, and blue) defines the intensity of the color between 0 and
255.
a. CSS Color names
b. CSS Hex Colors
c. CSS HSL Colors
d. CSS RGB Colors
Key to Correction
1. B
2. A
3. A
4. C
5. D
V. ASSIGNMENT
A. Follow-up Assignment
Direction: Create a simple website and implement 1 CSS style of your choice.
Submit your assignment in Google Classroom. Submission is until the next week,
Monday October 10, 2022, 11:59 p.m.
B. Advance Assignment
Direction: Search for the following questions:
1. What is CSS Backgrounds?
2. What are the Do’s and Don’ts in choosing CSS Background?
Use Microsoft Word and save your work in a pdf file format. Submission of
assignment is until Monday October 10, 2022, 11:59 pm only.
REFERENCES:
Learn CSS. web.dev. (n.d.). Retrieved September 24, 2022, from

https://web.dev/learn/css/
CSS tutorial. (n.d.). Retrieved September 24, 2022, from

https://www.w3schools.com/css/default.asp
CSS. GeeksforGeeks. (n.d.). Retrieved September 24, 2022, from https://www.geeksforgeeks.org/css/?

ref=lbp
CodePen feature. (n.d.). Retrieved September 24, 2022, from

https://codepen.io/features/

Lesson Plan

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson Plan

Uploaded by

Copyright:

Available Formats

REPUBLIC OF THE PHILIPPINES

TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES

Introduction to CSS (Cascading Style

Danica Marge B. Verino

Prof. Julieta Fajardo

1. identify the importance of CSS in websites;

II. SUBJECT MATTER

Main Topic : Introduction to CSS (Cascading Style Sheets)

References : Learn CSS. web.dev. (n.d.). Retrieved September 24,

: CSS tutorial. (n.d.). Retrieved September 24, 2022, from

: CSS. GeeksforGeeks. (n.d.). Retrieved September 24, 2022, from

: CodePen feature. (n.d.). Retrieved September 24, 2022,

III. LEARNING ACTIVITIES

B. Presentation of the Lesson

1. The Internal CSS has <style> tag in the <head> section of

2. In External CSS, we link the web pages to the external .css file. It is created

 Comments can also span multiple lines:

In CSS, a color can be specified as an RGB value, using this formula:

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

hsl(0, 100%, 50%)

1. Add an external style sheet with the URL: "mystyle.css". (2 points)

3. Set the page's background color to red. (2 points)

Key to Correction of Application

1. <link rel="stylesheet" href="mystyle.css">

Three types of CSS

1. What does CSS stand for?

Learn CSS. web.dev. (n.d.). Retrieved September 24, 2022, from

CSS tutorial. (n.d.). Retrieved September 24, 2022, from

CSS. GeeksforGeeks. (n.d.). Retrieved September 24, 2022, from https://www.geeksforgeeks.org/css/?

CodePen feature. (n.d.). Retrieved September 24, 2022, from

You might also like