Scribd
Upload
39 views

Introduction To CSS (Cascading Style Sheets) : Technological University of The Philippines Cavite Campus

This document provides an introduction to CSS (Cascading Style Sheets) for a Web Development 1 class. It outlines the objectives of the lesson which are to identify the importance of CSS, differentiate the three types of CSS, and implement CSS color. The lesson proper defines CSS and its basic format. It describes the three types of CSS - internal, external, and inline - and provides examples. It also covers CSS comments and how to specify colors using names, RGB, HEX, HSL, RGBA, and HSLA values with examples given.

Uploaded by

Danica Marge Verino
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views

Introduction To CSS (Cascading Style Sheets) : Technological University of The Philippines Cavite Campus

This document provides an introduction to CSS (Cascading Style Sheets) for a Web Development 1 class. It outlines the objectives of the lesson which are to identify the importance of CSS, differentiate the three types of CSS, and implement CSS color. The lesson proper defines CSS and its basic format. It describes the three types of CSS - internal, external, and inline - and provides examples. It also covers CSS comments and how to specify colors using names, RGB, HEX, HSL, RGBA, and HSLA values with examples given.

Uploaded by

Danica Marge Verino
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

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: [email protected] │ 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:
This should be Sir Arnold, your CT
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>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<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">
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

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

<style>
____
{
_______
red;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</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/
Observation:

* well modulate voice

* deliver the lesson in English, however try to improve your communication skills.
Try watching movies In English or reading articles

* mastery of the subject matter and discuss the lesson well.

* “so”

* cool and confident

You might also like