| Full lesson | Create for a teacher a set of content for giving a lesson, beginning with the lesson plan. Each new block of materials must begin with an H1 heading (other subheaders must be H2, H3, etc). When you describe required pictures, write those descriptions in curly brackets, for example: {A picture of a triangle} |
| Which subject | Design and technology |
| What topic | Basics of Cascading Style Sheets (CSS) |
| What length (min) | 30 |
| What age group | Year or Grade 11 |
| Class size | 20 |
| What curriculum | |
| Include full script | |
| Check previous homework | |
| Ask some students to presents their homework | |
| Add a physical break | |
| Add group activities | |
| Include homework | |
| Show correct answers | |
| Prepare slide templates | |
| Number of slides | 5 |
| Create fill-in cards for students | |
| Create creative backup tasks for unexpected moments |
Basics of Cascading Style Sheets (CSS)
Year or Grade 11
Design and Technology
30 minutes
20 students
This lesson aligns with the national curriculum for Design and Technology, focusing on digital technologies and coding literacy.
| Step Number | Step Title | Length | Details |
|---|---|---|---|
| 1 | Introduction to CSS | 5 minutes | Briefly explain what CSS is and its importance in web design. Use examples to illustrate. |
| 2 | Key CSS Properties | 10 minutes | Introduce basic properties (like color, font-size, margin) using slides and examples. |
| 3 | Printable Cards Activity | 5 minutes | Distribute printable CSS concept cards for students to fill out during the lesson. |
| 4 | Hands-on Practice | 5 minutes | Students apply CSS styles to sample HTML code on their computers using the concepts learned. |
| 5 | Collect/Check CSS Cards | 5 minutes | Randomly collect or check the filled-out cards to assess understanding and provide feedback. |
| 6 | Conclusion and Q&A | 5 minutes | Recap key points and address any remaining questions students may have. |
Students will be required to create a simple web page styled with CSS. This work should be submitted via the online learning platform. Homework will be checked anonymously without class presentations.
"Good morning class! Today we will be diving into the Basics of Cascading Style Sheets, or CSS. To start, can anyone tell me what they think CSS is? [Pause for responses] That's right! CSS is a stylesheet language that describes how HTML elements are to be displayed on the screen, in print, or in other media.
CSS allows us to separate content from design, which makes web pages easier to maintain. For example, think about your favorite websites – they look great because of the styles applied through CSS. Let’s look at a couple of visuals. [Show examples of websites, highlighting how CSS impacts their appearance]"
"Now that we have a basic idea of what CSS is, let's discuss some key CSS properties.
First, we have the color property. This property defines the color of your text. For example, if you write color: red;, your text will become red.
Next, we have font-size. This adjusts the size of the text. So, if you want your text big, you could use font-size: 20px;.
Another important property is margin. This creates space around elements, like so: margin: 10px;. It helps in spacing out elements on your page to look clean and organized.
Let’s look at some slides that demonstrate these properties in action. [Show slides with code snippets and visual representations]"
"Now, to help us remember what we’ve just learned, I will be handing out CSS concept cards. Each card will have a CSS property on one side and a description on the other.
As we go through the lesson, I want you to fill out these cards with examples or use cases for each property. You can refer back to our previous discussion and the slides. Let’s get started! [Distribute cards and give students a moment to write]"
"Now, let’s put our knowledge into practice! I want each of you to open the sample HTML code on your laptops.
Using the CSS properties we've discussed, I want you to style your HTML page. Try changing the color of the text, adjusting the font size, and adding some margins to see how it looks.
Remember, you’re free to experiment and see the results instantly! If you have any questions, raise your hand and I’ll come around to help. [Walk around the classroom and provide support]"
"All right, time's up! Please make sure you’ve completed your concept cards. I will now randomly collect a few of these cards to check your understanding and provide some feedback.
If you don't mind, please pass your cards to the front. [Collect cards and glance through them] Great job, everyone! I can see a lot of creativity in how you understood the properties."
"To wrap up, let’s recap what we learned today. We talked about the purpose of CSS, some key properties like color, font-size, and margin, and practiced applying these styles to HTML.
Does anyone have any questions before we finish? [Pause for questions] Thank you for your great participation today!
For your homework, I’d like you to create a simple web page styled with CSS. Make sure to submit it via our online learning platform. I can’t wait to see your creations!"
| Question | Answer |
|---|---|
| What does CSS stand for? | |
| What is the primary purpose of CSS? | |
| How does CSS enhance the appearance of a web page? | |
| Name one key CSS property discussed in the lesson. | |
What does the color property do in CSS? |
|
How can the font-size property be used to change text appearance? |
|
What effect does the margin property have on elements? |
|
| Why is it important to separate content from design in web pages? | |
Can you provide an example of a CSS declaration using the color property? |
|
| What was the activity involving CSS concept cards designed to do? | |
| How did we practice applying CSS styles in class? | |
| What should you do with your completed CSS concept cards? | |
| What is expected of you for your homework assignment? | |
| What did you learn about CSS that you found most interesting? | |
| Do you have any questions about CSS before we conclude? |