COMPUT

ER
Guide Questions

Lesson Overview
Objectives
Evaluation

Discussion
Activity

LESSON 2:
EXPLORING
CASCADING
STYLE SHEETS

-RIZALYN D. NUGUIT, LPT

 01 -A language
02 used for
designing
03 HTML
-Hakon Wium
Lie
documents. 1. External Style
04 2. Internal Style
Guide Questions

What is Cascading
Objectives
Evaluation

Discussion

3. Inline Style{property:

REVIE
Selector
Activity

Who
Style developed
Sheet?
value;}

CCS?What are the 3

What
CSS is the CSS
Style?
Syntax?
HTML HTML + CSS
HTML HTML + CSS
 COMPUT
ER
Guide Questions

Lesson Overview
Objectives
Evaluation

Discussion
Activity

LESSON 2:
EXPLORING
CASCADING
STYLE SHEETS

-RIZALYN D. NUGUIT, LPT

 c m e t h o d s h e lp s in
si
Learning the ba w h e n s t y l in g a
y
Guide Questions

enc
developing effici

Lesson Overview
Objectives
Evaluation

Discussion
Activity

web page. d e n t s w i ll l e a r n
h e st u
In this lesson, t ic m e t h o d s that
nt b a s
the basic differe f il e t o a dding
a C S S
include saving
comments
 LESSON 2: Exploring Cascading Style Sheet

Recognize the basic

methods when
Objective 1:
creating a website
Guide Questions
Evaluation

Discussion

Objectives
Activity

Overview
Lesson
Develop
Objective
efficiency2:when
performing tasks.
 Guide Questions
Evaluation

Objectives
Discussion

Overview
Activity

1 2
What are the How do we develop
basic efficiency in
commands performing our tasks?
when creating a
website?
 ACTIVITY WHAT’S NEW?
TASK: Install Notepad++ by
following the installation methods.

Mechanics: The teacher will provide

Evaluation

installer What
for each group,
makes and the
a RELATION A

Guide Questions

Objectives
Discussion
group who finished the installation

Overview
FUNCTION?
Activity

process at a short period of time will

be declared as the WINNER.
 NOTEPAD++ WHAT’S NEW?
 It is a free text editor and source code editor for
use with Microsoft windows.
Evaluation

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity

You can download here:

https://notepad-plus-plus.org/downloads/v8.4.8/
Evaluation HOW TO INSTALL NOTEPAD++
WHAT’S NEW?

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity
Evaluation HOW TO INSTALL NOTEPAD++
WHAT’S NEW?

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity
Evaluation HOW TO INSTALL NOTEPAD++
WHAT’S NEW?

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity
Evaluation HOW TO INSTALL NOTEPAD++
WHAT’S NEW?

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity
Evaluation HOW TO INSTALL NOTEPAD++
WHAT’S NEW?

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity
Evaluation HOW TO INSTALL NOTEPAD++
WHAT’S NEW?

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity
Evaluation HOW TO INSTALL NOTEPAD++
WHAT’S NEW?

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity
Evaluation HOW TO INSTALL NOTEPAD++
WHAT’S NEW?

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity
 Guide Questions
Evaluation

Objectives
Discussion

Overview
Activity

1 2
What are the How do we develop
basic efficiency in
commands performing our tasks?
when creating a
website?
 SAVE A FILE WHAT’S
IN NOTEPAD++
NEW?
• Type .css after the file name. For example, style.css
Evaluation

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity

 Click the dropdown arrow on the right side of the

Save as type bar, and scroll down to Cascade
style Sheets File.
 SAVE A FILE WHAT’S
IN NOTEPAD++
NEW?
Upon clicking the Save Button or pressing the Enter
key, the CSS file is represented by a gear icon.
Evaluation

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity
 SAVE A FILE WHAT’S
IN NOTEPAD++
NEW?
As we create our website, we will be working on
HTML and CSS files. This means multiple tab are
open.
To save the files at once, the SAVE ALL command is
Evaluation

What makes a RELATION A

Guide Questions
very useful in this case.

Objectives
Discussion

Overview
FUNCTION?
Activity

 Go to the File Tab

 Then, click the SAVE ALL command or
 Press Ctrl+Shift+S on the keyboard
 COLOR CODING
WHAT’S NEW?
As we saved the CSS file, we will see that the styles
have their own color.
 Body selector is in color blue.
 Font- Family property is in gray.
Evaluation

 Special characters What makes a RELATION A

Guide Questions
(curly braces, colon,

Objectives
Discussion

Overview
FUNCTION?
Activity

semicolon) as well as the value are black.

These colors serve as our guide as we type in our styles.

 FILE MANAGEMENT
WHAT’S NEW?
A common and best practice when working on a
website is to:
 Place all files in one (1) folder that is our main
folder
Evaluation

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity

In here, we place the HTML and CSS files, as well

as the subfolders for all media files (e.g., photos and
videos).

This way, we can easily retrieve them as we work on our

website.
 FORMAT WHAT’S NEW?
We also follow a format when we write CSS styles,
which help us navigate and review our codes.
Evaluation

What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?
Activity

• In this example, the body and p selectors are

vertically aligned.
• The declarations (font- family and text- align)
are indented and each is place in the next lign.
 COMMENTS WHAT’S NEW?
Comments are descriptions or simple notes in the
source codes.

• These may be used on a single line or multiple

Evaluation

What makes a RELATION A

Guide Questions
lines, as long as we enclose them within the

Objectives
Discussion

Overview
FUNCTION?
Activity

comment characters.
• They also have no effect on the output of a web
page or a document.
• Adding comments in our source code can help us
organize our codes as we create our websites.
Syntax: /*your comment*/

Example: /*Main font style*/

 o u r w e b s i t e s , we
 As we create s / m e t h o d s in
n iq u e
learned the tech & e ff i c ient
fe c t i v e
creating an ef r l y a r r a nge,
p r o p e
website are to

Guide Questions
Evaluation

u r f il e s

Objectives
Discussion

n i z e o

Overview
d o r g a
Activity

quickly save, an
& codes.
1 2 energy, and effort.
 To save time, i e n c y . W e a re
valu e e f f i c
What areW thehen weHow do we developources are
s t ha t o u r r e s
basic consciou efficiency in
w e w a n t t o p r oduce
commands Thus, our tasks?
limited. performing
when creating a t on time.
outpu
website?
ASSIGNMENT WHAT’S NEW?
TITLE: MY FIRST WEBSITE

Direction: Create your first webpage which is entitled My First Website using Notepad++
by applying the Methods that you have learned, use the given codes below.

Evaluation
What makes a RELATION A

Guide Questions

Objectives
Discussion

Overview
FUNCTION?

Activity