Scribd
Upload
454 views

Grade 10: Introduction To Css (Cascading Styling Sheet)

- The document is a lesson plan on introducing CSS (Cascading Style Sheets) to grade 10 students. - It covers the basic concepts of CSS including what CSS is, CSS syntax, different CSS selectors, and the three different ways to insert CSS - external, internal, and inline styles. - The lesson includes expectations, pre-test/post-test questions, explanations of key concepts, example code, and an activity for students.

Uploaded by

Hazel Mjkristell Basallote France
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
454 views

Grade 10: Introduction To Css (Cascading Styling Sheet)

- The document is a lesson plan on introducing CSS (Cascading Style Sheets) to grade 10 students. - It covers the basic concepts of CSS including what CSS is, CSS syntax, different CSS selectors, and the three different ways to insert CSS - external, internal, and inline styles. - The lesson includes expectations, pre-test/post-test questions, explanations of key concepts, example code, and an activity for students.

Uploaded by

Hazel Mjkristell Basallote France
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Department of Education

Region V
Division of City Schools
Naga City
DON LEON Q. MERCADO HIGH SCHOOL

INTRODUCTION TO CSS
(Cascading Styling Sheet)
GRADE 10
Quarter 3 Week 1 Module 1

Learning Competency:

LESSON 1

• Know about CSS (Cascading Stylling Sheet)


• Understand and describe about CSS elements
DIVISION OF CITY SCHOOLS – NAGA CITY
DEPARTMENT OF EDUCATION
K TO 12 BASIC EDUCATION CURRICULUM JUNIOR HIGH SCHOOL TECHNICAL LIVELIHOOD
EDUCATION AND SENIOR HIGH SCHOOL - TECHNICAL-VOCATIONAL-LIVELIHOOD TRACK
INFORMATION AND COMMUNICATIONS TECHNOLOGY –PROGRAMMING JAVA NC II

INTRODUCTION TO
CSS
JUNIOR HIGH SCHOOL
GRADE 10

HOW TO USE THIS MODULE?

Before starting the module, I want you to set aside other tasks that will disturb you while
enjoying the lessons. Read the simple instructions below to successfully enjoy the
objectives of this kit. Have fun!
1. Follow carefully all the contents and instructions indicated in every page of this module
and follow the given instructions for each of the given learning outcome/s.
2. As you read, you can also do the hands-on to check if you were able to follow the
basic programming procedure.
3. Demonstrate what you have learned by doing what the Activity required you to do so.
4. Analyze conceptually the posttest and apply what you have learned.
5. Enjoy studying!

PARTS OF THE MODULE


Before starting the module, I want you to set aside other tasks that will disturb you while
enjoying the lessons. Read the simple instructions below to successfully enjoy the
objectives of this kit. Have fun!
1. Follow carefully all the contents and instructions indicated in every page of this module
and follow the given instructions for each of the given learning outcome/s.
2. As you read, you can also do the hands-on to check if you were able to follow the
basic programming procedure.
3. Demonstrate what you have learned by doing what the Activity required you to do so.
4. Analyze conceptually the posttest and apply what you have learned.
5. Enjoy studying!
• Expectations - These are what you will be able to know after completing the lessons in
the module.
• Pre-test - This will measure your prior knowledge and the concepts to be mastered
throughout the lesson.
• Technical terms - A word that has a specific meaning within a specific field of
expertise.
• Looking Back to your Lesson - This section will measure what learnings and skills did
you understand from the previous lesson.
• Brief Introduction- This section will give you an overview of the lesson.
• Activities - This is a set of activities you will perform with a partner.
• Remember - This section summarizes the concepts and applications of the lessons.
• Check your Understanding- It will verify how you learned from the lesson.
• Post-test - This will measure how much you have learned from the entire module.
INTRODUCTION TO CSS (Cascading Style Sheets)

, LESSON 1
OVERVIEW OF CASCADING STYLING SHEET

EXPECTATIONS:

At the end of the lesson, the student should be able to:

 Understand how to use CSS in your HTML page


 Understand the basic elements of CSS

TECHNICAL TERMS:

CSS – Cascading Styling Sheet


HTML – Hypertext Mark Up Language
CSS Selector – selects the elements you want to style

LOOKING BACK TO YOUR LESSON


What have you learned from your Grade 9 lessons ? What lesson/s you love the most? and you love
the least?
PRE-TEST
Multiple Choice: Choose the letter of the correct answer .

1. What is the right syntax for CSS?

A. {color:blue;font- size: 12px;}


B. { color: red;
text-align: center;
C. p {
text-align: center;
color: red
}
D. None of the above

2. What does CSS stand for?

A. Computer Style Sheets


B. Cascading Style Sheets
C. Creative Style Sheet
D. Colorful Style Sheet

3. What does HTML stands for?

A. Hypermart Message Language


B. Hypertext Mark Up Langauge
C. Hpertext Mark Up Late

4. A CSS comment is placed inside the _________element.


A. <Head>
B. <Body>
C. <STYLE>
D. <P>

5. Where in an HTML document is the correct place to refer to an external style


sheet?

A. <head> B. <P>

c. <BODY> D. None of the above


INTRODUCTION TO CSS
CSS is the language we use to style a Web page.

What is CSS?

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files

A CSS rule consists of a selector and a declaration block.

CSS Syntax

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style.
We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)


 Combinator selector (select elements based on a specific relationship
between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute
value)

The element selector selects HTML elements based on the element name.

Here, all <p> elements on the page will be center-aligned, with a red text color:

Example:

p {
text-align: center;
color: red;
}

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS

External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file!

Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.

Example:
External styles are defined within the <link> element, inside the
<head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be written in any text editor, and must be saved
with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

Example:
Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Inline CSS
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

Example:
Inline styles are defined within the "style" attribute of the relevant
element:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</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;
}

Comments can also span multiple lines:

/* This is
a multi-line
comment */
p {
color: red;
}

HTML and CSS Comments


From the HTML tutorial, you learned that you can add comments to your HTML
source by using the <!--...--> syntax.

In the following example, we use a combination of HTML and CSS comments:

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->


<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

OUTPUT:
ACTIVITY 1

1. Write does CSS stands for?.

2. What is the correct HTML for referring to an external style sheet?

3. Where in an HTML document is the correct place to refer to an external style sheet?

4. Which HTML tag is used to define an internal style sheet?

5. Which HTML attribute is used to define inline styles?

6. How do you insert a comment in a CSS file?

7. Which property is used to change the background color?


Performance Task No. 1

Direction: Try to solve an exercise by editing some code. Write your answer in
separate sheet .The output must show to change the color of all <p> elements to "red".

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
POST TEST

Multiple Choice: Choose the letter of the correct answer .

1. What is the right syntax for CSS?

A. {color:blue;font- size: 12px;}


B. { color: red;
text-align: center;
C. p {
text-align: center;
color: red
}
D. None of the above

2. What does CSS stand for?

A. Computer Style Sheets


B. Cascading Style Sheets
C. Creative Style Sheet
D. Colorful Style Sheet

3. What does HTML stands for?

A. Hypermart Message Language


B. Hypertext Mark Up Langauge
C. Hpertext Mark Up Late

4. A CSS comment is placed inside the _________element.


A. <Head>
B. <Body>
C. <STYLE>
D. <P>

5. Where in an HTML document is the correct place to refer to an external style


sheet?

A. <head>

B. <P>

c. <BODY> D. None of the above


LESSON 1 - Let’s do the checking

PRE-TEST AND POST TEST

1. A
2. B
3. B
4. C
5. A

ACTIVITY 1
1. Cascading Styl Sheets
2. <link rel="stylesheet" href="mystyle.css">
3. In the Head Section
4. <STYLE>
5. Font
6. /* This is a single-line comment */
7. bgcolor

PREPARED BY:
HAZEL B. FRANCE
Teacher

You might also like