Steps for Creating and Styling a Webpage with HTML and CSS for SS 1

Class: SS 1
Term: First Term
Week: 6
Age: 15 years
Duration: 60 minutes
Subject: Digital Technologies
Curriculum Theme: Web Development and Management
Focal competence: Using CSS to create and style a static website
Key competencies/values: Information Literacy; Innovation
Skills:

• Creating and styling websites

Previous Lesson: CSS, Uses, Importance, Syntax, Application Methods and Webpage Creation
Topic: Website Development Technologies I (Cascading Style Sheet): Steps To Create A Webpage
Subject Matter: Steps to create a webpage, Steps to style a webpage, Create a static webpage and apply CSS statements to

Specific Objectives

By the end of the lesson, pupils/students should be able to:

Cognitive Domain

• Explain the methods of applying CSS.

Psychomotor Domain

• Create a static webpage.
• Apply CSS statements to style the page.
• Use the inline and internal methods to style a webpage by changing its layout and background colour.

Reference Materials

The following resources were used in planning this lesson:

• 2025 New Revised Senior Secondary Education Curriculum (SSEC)
• Relevant State Unified Scheme of Work
• Digital Technologies for Senior Secondary Schools 1 textbook
• The HeadTeacher Scheme of work For The New Revised Senior Secondary Education Curriculum (SSEC)

Instructional Materials

The teacher will teach this lesson with the aid of:

• Computer installed with a text editor (e.g., Notepad++, VS Code)
• Computer installed with a web browser (e.g., Chrome, Firefox)
• Mobile phone (for demonstration of web page viewing)
• Internet Access (for resource access if needed)
• Projector (to display code and browser output)
• Whiteboard and markers

Rationale for the Lesson

This lesson provides students with foundational knowledge and practical skills in web development, specifically in creating and styling webpages. Understanding HTML and CSS is essential for anyone interested in building websites, digital content creation, or pursuing careers in technology. It empowers students to design and present information effectively online.

Prerequisite/Previous Knowledge

Students should have basic knowledge of computer operations, file management, and an understanding of what the internet and websites are. They should also have a basic understanding of HTML structure from previous lessons.

Lesson Content/Board Summary

Website Development Technologies I (Cascading Style Sheet): Steps To Create A Webpage

Steps to Create a Webpage

Creating a basic webpage involves writing the content using HTML and then saving and viewing it.

1. Write HTML Code: Use a text editor (like Notepad on Windows, TextEdit on Mac, or more advanced editors like VS Code) to write the HTML structure and content of your webpage.
2. Name and Save the File: Save your file with an .html or .htm extension (e.g., index.html, mypage.html). This tells the computer that it is a web document.
3. Open the File in a Web Browser: Navigate to the saved file location and double-click the .html file. It will automatically open in your default web browser (e.g., Chrome, Firefox, Edge), displaying your webpage.

Understanding Cascading Style Sheets (CSS)

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML. CSS separates the content of a webpage from its visual presentation, making it easier to manage and update the design.

1. Purpose of CSS: CSS is used to style the layout of web pages, including colours, fonts, spacing, background images, and responsive design for different screen sizes.

CSS Syntax/Rules

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

1. Selector: Points to the HTML element you want to style (e.g., p for paragraphs, h1 for headings).
2. Declaration Block: Contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Example:

p {
  color: blue;
  font-size: 16px;
}

In this example:

1. p is the selector.
2. color is a property, and blue is its value.
3. font-size is a property, and 16px is its value.

Methods of Applying CSS to a Webpage

CSS can be applied to an HTML document in several ways, but we will focus on Inline and Internal methods.

1. Inline CSS

   Inline CSS is used to apply a unique style to a single HTML element. It is written directly within the HTML tag using the style attribute.

   Syntax: <element style="property: value;">Content</element>

   Example:

   <p style="color: red; font-size: 20px;">This is a red, large paragraph.</p>

2. Internal CSS (Embedded CSS)

   Internal CSS is used to define styles for a single HTML page. It is placed within a <style> tag in the <head> section of the HTML document.

   Syntax:

   <head>
     <style>
       selector {
         property: value;
       }
     </style>
   </head>

   Example:

   <head>
     <style>
       body {
         background-color: lightblue;
       }
       h1 {
         color: navy;
         text-align: center;
       }
     </style>
   </head>
   <body>
     <h1>Welcome to My Page</h1>
   </body>

Styling a Static Webpage with CSS Statements

Once you have created your HTML webpage, you can apply CSS statements to style its appearance.

1. Changing Colour

   1. Background Colour: The background-color property sets the background colour of an element.

      Example: body { background-color: #f0f8ff; } (for a light blue background)

   2. Text Colour: The color property sets the colour of the text.

      Example: p { color: darkgreen; } (for dark green text)

2. Applying Page Margins

   Margins create space around elements, outside of any defined borders. You can control the top, bottom, left, and right margins.

   1. Margin Top: margin-top: 20px;
   2. Margin Bottom: margin-bottom: 15px;
   3. Margin Left: margin-left: 30px;
   4. Margin Right: margin-right: 30px;
   5. Shorthand for Margins: margin: 20px 30px 15px 30px; (top, right, bottom, left)

   Example: body { margin: 20px; } (applies 20px margin to all sides of the body)

3. Changing Text Font

   1. Font Size: The font-size property sets the size of the text.

      Example: h2 { font-size: 24px; }

   2. Font Style (Family): The font-family property sets the font for text.

      Example: body { font-family: Arial, sans-serif; }

4. Aligning Text

   The text-align property specifies the horizontal alignment of text within an element.

   1. Left Alignment: text-align: left; (default)
   2. Center Alignment: text-align: center;
   3. Right Alignment: text-align: right;

   Example: h1 { text-align: center; }

Teaching Methods/Instructional Techniques

Discussion, Demonstration, Guided Practice, Question and Answer, Explanation, Practical Activity, Group Work

Instructional Procedures

Step 1: Introduction

Time: 5 minutes

Teaching Skill: Questioning/Recall

Teacher’s Activity: The teacher greets the students and asks them to recall what HTML is used for in web development. The teacher then introduces CSS as the language for styling webpages.

Pupils’ Activity: Pupils respond to questions about HTML and listen attentively to the introduction of CSS.

Learning Point: HTML and CSS roles

Step 2: Steps to Create a Webpage

Time: 10 minutes

Teaching Skill: Explanation/Demonstration

Teacher’s Activity: The teacher explains and demonstrates the steps to create a basic HTML webpage: writing code in a text editor, saving with a .html extension, and opening it in a web browser. The teacher shows a simple HTML page.

Pupils’ Activity: Pupils observe the demonstration and ask questions for clarification.

Learning Point: Webpage creation process

Step 3: Understanding CSS and its Syntax

Time: 10 minutes

Teaching Skill: Explanation/Discussion

Teacher’s Activity: The teacher explains what CSS is, its purpose in styling webpages, and introduces the basic CSS syntax (selector, property, value). The teacher writes examples on the board.

Pupils’ Activity: Pupils listen, take notes, and participate in a brief discussion on CSS syntax/rules.

Learning Point: CSS definition and syntax

Step 4: Methods of Applying CSS (Inline and Internal)

Time: 10 minutes

Teaching Skill: Explanation/Demonstration

Teacher’s Activity: The teacher explains and demonstrates the inline and internal methods of applying CSS, showing how to embed styles directly in HTML elements or within the <head> section. The teacher provides clear examples for each.

Pupils’ Activity: Pupils observe the demonstrations and note the differences between inline and internal CSS.

Learning Point: Inline and internal CSS

Step 5: Styling Webpage Layout (Colours, Margins)

Time: 10 minutes

Teaching Skill: Guided Practice/Demonstration

Teacher’s Activity: The teacher guides students to work in groups. The teacher demonstrates how to change background colour, text colour, and apply page margins using both inline and internal CSS methods. Students follow along on their computers (if available) or observe closely.

Pupils’ Activity: Students participate in group work, attempting to apply the demonstrated styles or discussing the steps.

Learning Point: Layout styling with CSS

Step 6: Styling Text Properties (Font, Alignment)

Time: 5 minutes

Teaching Skill: Guided Practice/Demonstration

Teacher’s Activity: The teacher continues the practical session, demonstrating how to change text font (size, style) and align text (left, center, right) using CSS. The teacher ensures students understand the properties and values.

Pupils’ Activity: Students observe and ask questions, practicing the new styling techniques.

Learning Point: Text styling with CSS

Step 7: Evaluation/Review

Time: 5 minutes

Teaching Skill: Questioning/Assessment

Teacher’s Activity: The teacher evaluates the learning by asking the following questions:

1. What are the basic steps to create a webpage?
2. Mention two methods of applying CSS to an HTML document.
3. How would you change the background colour of a webpage using internal CSS?
4. Which CSS property is used to align text to the center?

Pupils’ Activity: Pupils answer orally and in writing.

Learning Point: Webpage creation and styling

Step 8: Note-Taking

Time: 10 minutes

Teaching Skill: Guided Writing

Teacher’s Activity: The teacher guides pupils/students to copy the essential Board Summary notes on creating and styling webpages with HTML and CSS into their notebooks.

Pupils’ Activity: Pupils/students copy the notes carefully into their notebooks.

Learning Point: Recording lesson content

Step 9: Conclusion

Time: 5 minutes

Teaching Skill: Consolidation

Teacher’s Activity: The teacher summarises the key points of the lesson, reiterating the importance of HTML for structure and CSS for styling. The teacher encourages students to practice creating and styling their own simple webpages.

Pupils’ Activity: Pupils listen and ask any final questions.

Learning Point: Reinforcement of web styling

Continuous Assessment/Further Study

Type: Homework/Practice Exercise

Instruction: Create a simple HTML webpage with the following features, applying styles using either inline or internal CSS:

1. A main heading (e.g., “My First Styled Page”).
2. A paragraph of text describing your favourite hobby.
3. Change the background colour of the page to light blue.
4. Change the text colour of the main heading to dark blue and align it to the center.
5. Set the font size of the paragraph text to 18px and use a sans-serif font family.
6. Apply a margin of 15px around the entire page body.

Lesson Keywords

• HTML – HyperText Markup Language, used for structuring web content.
• CSS – Cascading Style Sheets, used for styling the presentation of web pages.
• Selector – A CSS pattern used to select the HTML elements you want to style.
• Property – A specific characteristic of an HTML element that can be styled (e.g., color, font-size).
• Value – The setting applied to a CSS property (e.g., blue for color, 16px for font-size).
• Inline CSS – CSS applied directly to an HTML element using the style attribute.
• Internal CSS – CSS placed within a <style> tag in the <head> section of an HTML document.
• Static Webpage – A webpage that displays the same content to every user, without dynamic changes.

Differentiation

For struggling learners: Provide pre-written HTML templates and guide them step-by-step through applying simple inline CSS properties like changing text colour or background colour. Offer one-on-one support during practical sessions.

For advanced learners: Challenge them to explore additional CSS properties (e.g., border, padding) or research the external CSS method. Encourage them to create a more complex page layout with multiple styled elements.

Suggested Lesson Videos

For further understanding, students can search on YouTube for:

• HTML CSS tutorial for beginners SS1
• how to create a webpage with html and css
• inline vs internal css explanation