Scribd
Upload
39 views14 pages

TP - CB - VII - Cs - Ch. 5 Using Css in HTML

Uploaded by

nisha.kawale
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
39 views14 pages

TP - CB - VII - Cs - Ch. 5 Using Css in HTML

Uploaded by

nisha.kawale
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/ 14

Teaching Plan

Subject: Computer Studies Std: VII Time Duration: 225 minutes

Chapter: Ch. 5 Using CSS in HTML Term: II

Concepts/Subtopics Teaching Strategies


1. What is CSS? 1. 5Es strategy
2. Using CSS in HTML 2. Jig Saw
3. CSS Selector
4. CSS Properties

5. Using HTML5 Semantic tags

Reference Books: Tech Talk 7 Textbook, Tech Talk 7 Workbook

Resources
Diagnostic Test/Entry Test 1 AS of Diagnostic Test/Entry Test 1
Achievement Test/Exit Test 3 AS of Achievement Test/Exit Test 3
PPT 2 Video NA
Workbook 1 AS of Workbook 1
Quiz NA Graphic Organiser NA
Activity Sheet/Worksheet NA AS of Activity Sheet/Worksheet NA
Weblinks NA Any other NA

CB_2024-25 Using CSS in HTML Page 1 of 14


Teaching Plan

Lesson Goal/ Purpose of the Lesson


Students will learn how to use Cascading Style Sheets (CSS) to change the style of web pages, like colours, layouts, backgrounds, borders,
and fonts.

Prerequisite Knowledge
N/A
Entry Task (Diagnostic Test)
 The Entry Task (Diagnostic Test) is a Baseline Test which assesses the student’s prior/prerequisite knowledge, skill level, and gaps of
missing information.
 The test will be available on the Loop Learning platform for schools enrolled in Loop Learning. The test can be conducted through
Google Forms for schools not yet on Loop Learning.
 Self-learning PPTs and videos for students who score less than 60% will be available on the platform. These resources are designed to
help students bridge their learning gaps.
Entry Task_VII_CS_Ch 5 Using CSS in HTML

Concepts/Sub Topics
 What is CSS?
 Using CSS in HTML
Learning Outcome
Students will be able to:
 to understand the need for CSS
 to know the syntax of a CSS rule
 to use CSS in HTML

CB_2024-25 Using CSS in HTML Page 2 of 14


Teaching Plan

Teaching strategy: 5Es strategy

Vocabulary/Keywords
cascade [TIP Strategy]
Use the Vocab_CB_VII_CS_Ch. 5 Using CSS in HTML
Learning Phase Suggested Activities
Engage Activity:
Show students two simple web pages, one without any formatting (plain HTML) and another with formatted elements.
(styled HTML). PPT1_CB_VII_CS_Ch. 5 Using CSS in HTML
Ask students which web page looks better.
 Discuss with the students the following questions
1. What makes the second webpage more appealing?
2. Why is it important for web pages to look well-organized and aesthetically pleasing?
 Encourage students to share their thoughts and guide them toward understanding the importance of formatting
HTML pages,
Explore  Ask the students how they can format a web page using the attributes of the HTML tags.
 Highlight the drawbacks of using attributes when the number of pages increases, when the style of all web pages
needs to be changed, etc.
 Introduce CSS as the new way of styling web pages and highlight its advantages.
 Help students to explore CSS concepts and syntax through hands-on experience.
Activity:
 Guided Exploration:
1. Ask students to create a web page and style the elements using attributes.
2. Now show a way to style the same using a simple inline CSS rule
3. Discuss with the students about the different ways that were used to style the elements

CB_2024-25 Using CSS in HTML Page 3 of 14


Teaching Plan

Explain Explain the following to the students using the PPT2_CB_VII_CS_Ch. 5 Using CSS in HTML
1. Inform them about what CSS stands for and explain its use.
2. Explain to them about the need for CSS
3. Inform them how separating content (HTML) from style (CSS) allows for better design, code reuse, and easier
maintenance.
4. Demonstrate and explain the syntax of a CSS Rule
5. Introduce them to the basic structure of a CSS rule:
Syntax of a CSS statement
selector {
property: value;
}
6. Use examples to show how CSS properties are defined for different HTML elements.
7. Explain the three ways to apply CSS:
o Inline CSS: Adding style directly within HTML tags.
o Internal CSS: Writing styles inside the <style> tag in the <head> section.
o External CSS: Linking a separate CSS file using the <link> tag.
8. Demonstrate how to make the HTML cleaner by moving styles from inline to internal CSS.
Elaborate Demonstrate including CSS as an external files. Use the same example used earlier for internal stylesheet.
Activity:
 Ask students to create a web page about their favourite hobby or subject. They should apply CSS to style the
page using:
o Inline CSS for one element (e.g., changing the colour of one heading).
o Internal CSS to style multiple elements on the page (e.g., paragraphs, lists).
 Introduce external CSS by creating a separate .css file and linking it to their HTML page.
 Encourage creativity while ensuring they follow the correct syntax and structure.
Evaluate Assess students' understanding and application of CSS.

CB_2024-25 Using CSS in HTML Page 4 of 14


Teaching Plan

Peer Review: Have students swap their web pages with a partner. They will review each other's work by
checking:
o Does the CSS follow the correct syntax?
o Are the elements styled as expected?
o Did they use inline, internal, or external CSS appropriately?
Review each student's work and provide constructive feedback on their understanding of CSS rules and styles.
Assessment:
 Monitor student progress during the Explore and Elaborate phases. Check their understanding through
questions and practical tasks.
 Review the final web page they create, checking for the correct use of inline, internal, or external CSS, and
understanding of CSS syntax.
Use Exit Task 1 (on loop for individual assessment)

Homework
Instruct students to complete ‘Activity 1’ from the textbook at home.

Concepts/Sub Topics
 CSS Selectors
Learning Outcome
Students will be able to:
Academic Skills:
 understand the purpose of CSS selectors.
 identify the different types of CSS selectors
 differentiate between Element, ID, and Class Selectors in CSS.
 apply different CSS selectors to an HTML document.

CB_2024-25 Using CSS in HTML Page 5 of 14


Teaching Plan

Social/Life Skills:
 respect each other’s view
 help each other in understanding the content
 share the information
 improve communication ability
 develop concern towards the members of the group
 develop patience among students to lend their ears to others in the group
 develop integration attitude in the students

Teaching strategy: Jigsaw strategy

Vocabulary/Keywords
NA
Preparation and Presentation Phase
Phase 1: Classroom Activity preparation by teacher in the classroom
Teacher’s Activity:
 Introduce CSS as the language for styling web pages and explain that selectors are used to determine which HTML elements are
styled.
 Ask students
i. Why do we need selectors in CSS?
ii. Can we apply different styles to different parts of a webpage?
 Introduce the three main types of selectors:
o Element Selector: Targets all HTML elements of a specific type (e.g., all <h2> tags).
o ID Selector: Targets one unique element with a specific id attribute.
o Class Selector: Targets multiple elements sharing a common class attribute.

CB_2024-25 Using CSS in HTML Page 6 of 14


Teaching Plan

 Demonstrate and explain with the help of examples about the three types of CSS selectors:
 Element Selector: h2 { color: red; }
 ID Selector: #header { background-color: blue; }
 Class Selector: .paragraph { font-size: 16px; }
Phase 2: Focus on Students Activity
Divide the class into three groups:

1. Element Selector Group


2. ID Selector Group
3. Class Selector Group
 Each group will study their assigned selector type and become the "expert" on it. The group should cover the following information
about their assigned selector:

i. The definition.
ii. Syntax and structure.
iii. Examples of how to use that selector in CSS.
iv. A simple task to complete as a group (e.g., write HTML and CSS using their selector type).

 Ask the groups to perform the following tasks to deepen their understanding on the topic.

i. Style all <h2> elements in a webpage. (Element Selector Group)


ii. Style a specific section like a header or footer using IDs (ID Selector Group)
iii. Style a group of paragraphs with a common style using classes (Class Selector Group)
 Each group will write code snippets using a text editor and test them in a browser.
Phase 3: Performance/ Evaluation
1. Form new mixed groups where each group contains one member from each of the previous groups.

CB_2024-25 Using CSS in HTML Page 7 of 14


Teaching Plan

2. Each student now becomes a teacher and shares their knowledge on their assigned CSS selector that must include the following
guidelines:
1. Explain the selector.
2. Provide examples.
3. Demonstrate the code they worked on as a group.
3. Create mixed groups, and ask students to work together to create an HTML file that uses all three types of selectors (Element, ID, and
Class).
4. Independent Work:
Ask each student tol create their own HTML page with at least one style using each selector type. For example:
1. Style all <p> elements using the element selector.
2. Style a specific section using the ID selector.
3. Style multiple elements using a class selector.
Ask them to perform the following tasks
1. Set the background of the page using an element selector.
2. Assign an ID to the page’s header and style it uniquely.
3. Style different sections with class selectors (e.g., different font styles for paragraphs).
5. Ask students the following questions to verify their understanding on the topic:
1. What they found interesting about CSS selectors.
2. Any challenges they faced.
6. Based on their responses, Go over the key points of Element, ID, and Class selectors, and answer any remaining questions.
7. Give examples of cases where a particular selector is useful.
Assessment:
 During group work, observe students’ participation and understanding.
 Assess the HTML pages created by students to ensure they have correctly used each selector type.

CB_2024-25 Using CSS in HTML Page 8 of 14


Teaching Plan

Concepts/Sub Topics
 CSS Properties
Learning Outcome
Students will be able to:
Academic Skills:
 change the background style using CSS
 change the text style using CSS
 change the font style using CSS
 control the display and layout of HTML tables
 customise the style of hyperlinks by using CSS properties
Social/Life Skills:
 respect each other’s view
 help each other in understanding the content
 share the information
 improve communication ability
 develop concern towards the members of the group
 develop patience among students to lend their ears to others in the group
 develop integration attitude in the students

Teaching strategy: Jigsaw strategy

Vocabulary/Keywords
NA

CB_2024-25 Using CSS in HTML Page 9 of 14


Teaching Plan

Preparation and Presentation Phase


Phase 1: Classroom Activity preparation by teacher in the classroom
Group Formation: Divide the class into 5 groups. Each group will be assigned one set of CSS properties to learn in detail.
 Group 1: Background Properties
 Group 2: Text Properties
 Group 3: Font Properties
 Group 4: Table Properties
 Group 5: Hyperlink Properties
Phase 2: Focus on Students Activity
1. Ask each group to study the content related to their assigned CSS property. They need to understand the concept and practice it
using the provided HTML and CSS files.
2. Provide each group with a simple example in the form of code to work on. For instance, Group 1 will add background color and image
properties to the HTML file.
Group 1 (Background Properties): Modify background colors and images.
Group 2 (Text Properties): Apply text color, alignment, and transformations.
Group 3 (Font Properties): Change font family, size, and weight.
Group 4 (Table Properties): Customize table borders, padding, and alignment.
Group 5 (Hyperlink Properties): Style hyperlinks and apply hover effects.
3. After the expert groups have learned their assigned CSS properties, form new groups where each member represents a different
original group. For example, a student from Group 1 (Background Properties) will join students from other groups to form a mixed
group.
4. Ask each student to explain what they learned in their expert group to the other members of their new group.
5. Ask each new group will create a simple web page using HTML and CSS that combines all the properties learned from each member.
The page will include background styles, text formatting, fonts, tables, and hyperlinks.
6. Each group will present their webpage to the class, showcasing how they applied the CSS properties.

CB_2024-25 Using CSS in HTML Page 10 of 14


Teaching Plan

Phase 3: Performance/ Evaluation


 Ask students the following questions to test their understanding on the topic.
 Ask students what they found challenging and what they enjoyed about the activity.
 Discuss how CSS helps improve the look and functionality of a webpage.
Assessment:
 Observe students’ participation during the group work.
 Review the final web page created by each group to check for correct usage of CSS properties.
 Ask students to try out the Activity 2 and Activity 3 given in the textbook.
 Homework: Ask students to individually style a webpage about their favourite hobby using at least 3 different CSS properties they
learned.
 Use Exit Task 2 (on loop for individual assessment)

Concepts/Sub Topics
 Using HTML 5 Semantic tags
Learning Outcome
Students will be able to:
Academic Skills:
 understand the purpose and function of semantic tags in HTML5.
 identify key HTML5 semantic tags like <header>, <nav>, <section>, <article>, <aside>, and <footer>.
 create a well-structured web page using semantic tags.
 define the web page layout using HTML5 semantic tags
Social/Life Skills:
 respect each other’s view

CB_2024-25 Using CSS in HTML Page 11 of 14


Teaching Plan

 help each other in understanding the content


 share the information
 improve communication ability
 develop concern towards the members of the group
 develop patience among students to lend their ears to others in the group
 develop integration attitude in the students

Teaching strategy: Jigsaw strategy

Vocabulary/Keywords
layout, semantic (Use the Vocab_CB_VII_CS_Ch. 5 Using CSS in HTML)
Preparation and Presentation Phase
Phase 1: Classroom Activity preparation by teacher in the classroom
 Introduce the students to HTML5 semantic tags.
 Explain how they help organize the structure of a webpage and make it more understandable for both the browser and users.
 Demonstrate and explain the use of semantic tags such as <header> for a page’s title, <nav> for a navigation bar, and <footer> for
page-end information.
 Show a simple webpage using only <div> tags, and then show the same webpage using semantic tags, pointing out how semantic tags
make the page easier to read and organize.
 Divide the class into 6 groups.
 Each group will be responsible for learning one HTML5 semantic tag in detail.
Group 1: <header> Group 2: <nav> Group 3: <section> Group 4: <article> Group 5: <aside> Group 6: <footer>
Phase 2: Focus on Students Activity
Group Learning:
1. Each group will learn about their assigned semantic tag.

CB_2024-25 Using CSS in HTML Page 12 of 14


Teaching Plan

i. Explanation of what their tag does.


ii. Syntax and example usage of the tag.
iii. How to style it using CSS (e.g., changing background color, padding, etc.).
2. Each group will work on modifying a provided HTML file to implement their semantic tag.
Group 1 (Header): Add a <header> section with a website title and style it with a green background and centered text.
Group 2: <nav>: Add a <nav> section under the <header>, which contains a navigation bar with links like "Home", "About Us", and
"Contact". Style it with a blue background, and ensure the links are displayed horizontally and centered.
Group 3: <section>: Add a <section> below the <nav> to contain the main content, such as a "Welcome" or "Our Services" section.
Style the section with a light gray background, padding for space, and some margin for separation from other sections.
Group 4: <article>: Add an <article> element below the <section>, which contains a self-contained piece of content such as a blog
post or news update. Style the <article> with a white background, padding, and a border to make it stand out.
Group 5: <aside>: Add an <aside> section next to the main content, containing additional or related information (e.g., a sidebar with
tips or related links).
Style the <aside> with a light background color and position it to the right or left of the main content, making it stand out.
Group 6 (Footer): Add a <footer> section with copyright information and apply a background color.

ReGroup and Share Knowledge:

1. After the expert groups have learned their tag, form mixed groups where each group will have one member from each original group.
2. In the new groups, each student will teach their peers about the semantic tag they studied. They will explain:
o What the tag does.
o How it is used in a webpage.
o How it can be styled using CSS.
3. Each mixed group will now work together to build a complete web page that uses all the semantic tags (header, nav, section, article,
aside, footer). They will apply CSS styling as they go along, referring to the CSS file.

CB_2024-25 Using CSS in HTML Page 13 of 14


Teaching Plan

Phase 3: Performance/ Evaluation


 Ask each group to present their webpage to the class, demonstrating how they used semantic tags to organize and style the
webpage.
 Discuss with the students what they found easy or difficult about using semantic tags.
Highlight how semantic tags improve webpage structure, readability, and accessibility.
Assessment:
 Evaluate each group’s participation and collaboration during the group work.
 Review the final webpage produced by each group, ensuring that they correctly applied their assigned semantic tag.
 Ask students to individually create a small webpage about their favourite hobby or topic using at least three semantic tags (e.g.,
header, section, footer).
 Use Exit Task 3 (on loop for individual assessment)

NOTE FOR THE TEACHER


 The Exit Task (Achievement Test) is a Benchmark Test, which is an interim assessment [between formative and summative assessments] to
identify the student’s academic progress.
 Inform the students well in advance to revise the chapter.
 The text will be available on the Loop platform for schools enrolled in Loop Learning. For schools not yet on Loop, the test can be
conducted through Google Forms.
 More than 75% of students should score 60% or more than 60% marks.
 The test result gives accurate information on the student’s strengths and weaknesses. Analyse the test results and give feedback to the
students, understand which part of the chapter needs to be retaught, and which students require assistance for enhancement
[remediation] or guidance for enrichment [high achievement].

CB_2024-25 Using CSS in HTML Page 14 of 14

You might also like