Class: SS 1
Term: First Term
Week: 5
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: Types, Examples and Classification of Websites
Topic: Website Development Technologies I (Cascading Style Sheet)
Subject Matter: Meaning of Website Development technologies I (Cascading Style Sheet), Meaning and use of CSS, Importance of CSS, CSS Syntax/Rules, Methods of applying CSS, Steps to create a webpage

Specific Objectives

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

Cognitive Domain

• Define CSS in website development.
• Explain the importance of CSS in website development.

Affective Domain

• Appreciate the role of CSS in creating visually appealing and user-friendly websites.
• Demonstrate responsible use of digital tools for web development.

Psychomotor Domain

• Write a CSS statement using the correct syntax/rules.
• Apply different methods of CSS to style a simple webpage.

Social Domain

• Collaborate effectively in groups to create and style a webpage.

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, Book 1
• 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)
• Web browser (e.g., Chrome, Firefox)
• Mobile phone
• Internet Access
• Projector or interactive whiteboard

Rationale for the Lesson

This lesson is important because it introduces students to CSS, a core technology for web design. Understanding CSS enables students to control the presentation and layout of webpages, making them visually appealing and professional. This knowledge is crucial for anyone interested in web development and digital content creation.

Prerequisite/Previous Knowledge

Students should have a basic understanding of HTML (HyperText Markup Language) for structuring webpages.

Lesson Content/Board Summary

Website Development Technologies I (Cascading Style Sheet)

Meaning of Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls the layout, colours, fonts, and overall visual appearance of webpages, separating the content from its design.

Uses of CSS

CSS is used for:

1. Styling HTML elements: Changing colours, fonts, sizes, backgrounds, borders, etc.
2. Layout design: Positioning elements, creating columns, setting margins and padding.
3. Responsive design: Adapting webpages to different screen sizes (desktops, tablets, mobile phones).
4. Creating visual effects: Adding animations, transitions, and interactive elements.
5. Maintaining consistency: Applying a uniform style across multiple pages of a website.

Importance of CSS in Website Development

CSS is important for several reasons:

1. Improved Aesthetics: It makes webpages visually appealing and user-friendly, enhancing the overall user experience.
2. Separation of Concerns: It separates the content (HTML) from the presentation (CSS), making the code cleaner, easier to read, and simpler to maintain.
3. Faster Load Times: By storing styles in external files, CSS allows browsers to cache these files, leading to faster loading times for subsequent pages.
4. Easier Maintenance: Changes to the website’s appearance can be made by editing a single CSS file, rather than modifying every HTML page.
5. Responsive Design: CSS enables websites to adapt and display correctly on various devices and screen sizes, from large desktop monitors to small mobile phones.
6. Enhanced Accessibility: Proper use of CSS can improve the accessibility of webpages for users with disabilities.

CSS Syntax/Rules

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

1. Selector: This points to the HTML element you want to style. It can be an HTML element name (e.g., `p`, `h1`, `body`), an ID (e.g., `#header`), or a class (e.g., `.button`).
2. Declaration Block: This contains one or more declarations, separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Syntax Example:

selector {
  property: value;
  property: value;
}

Example:

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

In this example:

1. `p` is the selector (targets all paragraph elements).
2. `{…}` is the declaration block.
3. `color` is a property, and `blue` is its value.
4. `font-size` is a property, and `16px` is its value.

Methods of Applying CSS

There are three main ways to apply CSS to an HTML document:

1. Inline CSS

   Inline CSS is applied directly to an individual HTML element using the `style` attribute. It is used for unique styling of a single element.

   Example:

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

2. Internal (Embedded) CSS

   Internal CSS is defined within the “ tags in the “ section of an HTML document. It styles a single HTML page.

   Example:

   
   <!DOCTYPE html>
   <html>
   <head>
     <title>Internal CSS Example</title>
     <style>
       body {
         background-color: lightblue;
       }
       h1 {
         color: navy;
         text-align: center;
       }
     </style>
   </head>
   <body>
     <h1>Welcome to My Page</h1>
     <p>This page uses internal CSS.</p>
   </body>
   </html>
   
   

3. External CSS

   External CSS is defined in a separate `.css` file and linked to the HTML document using the “ tag in the “ section. This method is preferred for styling multiple pages of a website, promoting consistency and easier maintenance.

   Example (HTML file – `index.html`):

   
   <!DOCTYPE html>
   <html>
   <head>
     <title>External CSS Example</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <h1>My Styled Website</h1>
     <p>This content is styled by an external CSS file.</p>
   </body>
   </html>
   
   

   Example (CSS file – `styles.css`):

   
   body {
     font-family: Verdana, sans-serif;
     margin: 20px;
   }
   h1 {
     color: #333;
     border-bottom: 2px solid #ccc;
   }
   p {
     line-height: 1.6;
   }
   
   

Steps to Create a Webpage

To create a basic webpage and apply styles:

1. Open a Text Editor: Start a text editor application on your computer (e.g., Notepad on Windows, TextEdit on Mac, or more advanced editors like VS Code).
2. Write the HTML Structure: Type the basic HTML elements to create the page structure. This includes “, “, “, `
3. Add Content: Insert text, images, or other content into the HTML file using appropriate HTML elements (e.g., `

   ` for paragraphs, `

   ` for main headings, `` for images).

4. Save the File: Save the file with an `.html` extension (e.g., `mywebpage.html`).
5. Apply CSS (using any method):
   1. Inline: Add `style` attributes directly to HTML tags.
   2. Internal: Add “ tags within the “ section of your HTML file.
   3. External: Create a separate `.css` file, write your styles there, and link it to your HTML file using “ in the “.
6. View in Browser: Open the saved HTML file with a web browser to see your webpage and its applied styles.

Teaching Methods/Instructional Techniques

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

Instructional Procedures

Step 1: Introduction

Time: 5 minutes

Teaching Skill: Questioning/Recap

Teacher’s Activity: The teacher asks students to recall what HTML is and its purpose in web development. The teacher then introduces CSS as the technology used to make HTML pages look good.

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

Learning Point: HTML and CSS connection

Step 2: Meaning of CSS

Time: 10 minutes

Teaching Skill: Explanation/Definition

Teacher’s Activity: The teacher explains the meaning of Cascading Style Sheets (CSS), defining it as a language for styling HTML documents. The teacher uses simple analogies to differentiate between HTML (structure) and CSS (appearance).

Pupils’ Activity: Pupils listen, ask questions for clarification, and contribute to the discussion.

Learning Point: Definition of CSS

Step 3: Uses and Importance of CSS

Time: 10 minutes

Teaching Skill: Explanation/Discussion

Teacher’s Activity: The teacher discusses the various uses of CSS, such as styling text, colours, layouts, and responsive design. The teacher then explains the importance of CSS in website development, highlighting improved aesthetics, separation of concerns, and easier maintenance.

Pupils’ Activity: Pupils listen, take notes, and share their understanding of why CSS is important for websites.

Learning Point: CSS uses and importance

Step 4: CSS Syntax/Rules

Time: 10 minutes

Teaching Skill: Demonstration/Explanation

Teacher’s Activity: The teacher explains the basic CSS syntax, breaking it down into selectors, properties, and values. The teacher writes simple CSS rules on the board or projects them, explaining each part with clear examples.

Pupils’ Activity: Pupils observe the syntax, copy examples, and ask questions about how to write CSS rules.

Learning Point: Basic CSS syntax

Step 5: Methods of Applying CSS

Time: 10 minutes

Teaching Skill: Demonstration/Explanation

Teacher’s Activity: The teacher demonstrates and explains the three methods of applying CSS: inline, internal, and external. For external CSS, the teacher shows how to link a separate `.css` file to an HTML document.

Pupils’ Activity: Pupils observe the different application methods and discuss their advantages and disadvantages.

Learning Point: CSS application methods

Step 6: Steps to Create a Webpage (Practical Application)

Time: 5 minutes

Teaching Skill: Guided Practice/Group Work

Teacher’s Activity: The teacher guides students to work in groups. Each group is tasked with creating a simple HTML webpage and styling it using one of the CSS application methods discussed. The teacher provides basic instructions and monitors their progress.

Pupils’ Activity: Students work in groups to create and style a basic webpage, applying the CSS concepts learned.

Learning Point: Webpage creation and styling

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 is CSS and what is its primary role in web development?
2. Mention two reasons why CSS is important for website development.
3. Write a simple CSS rule to change the text colour of a paragraph to green.
4. Name the three methods of applying CSS to an HTML document.

Pupils’ Activity: Pupils answer orally and in writing.

Learning Point: Understanding CSS concepts

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 CSS meaning, uses, importance, syntax, and application methods into their notebooks.

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

Learning Point: Recording key CSS information

Step 9: Conclusion

Time: 5 minutes

Teaching Skill: Summarisation

Teacher’s Activity: The teacher summarises the key points of the lesson, reiterating the importance of CSS for creating attractive and functional webpages. The teacher encourages students to continue practicing web development.

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

Learning Point: CSS lesson consolidation

Continuous Assessment/Further Study

Type: Homework/Practice Exercise

Instruction: Answer the following questions and perform the practical task.

1. Explain the difference between inline, internal, and external CSS.
2. Create a simple HTML webpage about your school. Apply different styles (e.g., font colour, background colour, text alignment) to various elements using all three methods of CSS application.
3. Search the internet for examples of websites that effectively use CSS for their design. Be prepared to discuss your findings in the next class.

Lesson Keywords

• CSS – Cascading Style Sheets, a language for styling web pages.
• Selector – Part of a CSS rule that points to the HTML element to be styled.
• Property – A specific style attribute (e.g., `color`, `font-size`).
• Value – The setting for a CSS property (e.g., `blue`, `16px`).
• Declaration Block – Contains one or more CSS declarations.
• Inline CSS – CSS applied directly to an HTML element using the `style` attribute.
• Internal CSS – CSS defined within “ tags in the “ section of an HTML document.
• External CSS – CSS defined in a separate `.css` file and linked to the HTML document.

Differentiation

Support for struggling learners: Provide pre-written HTML templates for them to practice applying CSS. Offer simplified CSS properties and values to start with. Pair them with more advanced students for guided practice.

Extension for advanced learners: Challenge them to explore more advanced CSS properties like `border-radius`, `box-shadow`, or basic responsive design concepts using media queries. Encourage them to create a multi-page website with a consistent external stylesheet.

Suggested Lesson Videos

YouTube search for “CSS tutorial for beginners SS1 Digital Technologies”