Lesson 11: Styling Elements with CSS

Web Lab

Overview

This lesson continues the introduction to CSS style properties, this time focusing more on non-text elements. Students begin this lesson by looking at a website about Desserts of the World. They investigate and modify the new CSS styles on this website, adding their own styles to the page. After working on the Desserts page, students apply their knowledge of new CSS properties to do more styling of their personal websites.

Objectives

Students will be able to:

  • Use CSS properties to change the size, position, and borders of elements.
  • Create a CSS rule-set for the body element that impacts all elements on the page.

Introduced Code

Warm Up (5 minutes)

Discuss: What Styles Do You Want?

  1. Yesterday we styled text elements. What other ways do you wish you could style your page?
  2. Today we are going to learn more properties we can use to style our web pages. Hopefully some of them allow you to add some of the styles we listed in this discussion.

Activity (40 minutes)

Web Lab: Styling Elements with CSS

  1. Go to code.org Lesson 11
  2. Do Level 1 together as a class
  3. Do Levels 2-3 on your own
  4. Do Level 4 together as a class
  5. Do Levels 5-11 on your own
  6. Do Level 12 together as a class
  7. Do Level 13 on your own

Wrap Up (5 minutes)

  1. Add the new properties you learned to the CSS Properties page in your journal and to the class poster.
  2. Reflect on your development of the five practices of CS Discoveries (Problem Solving, Persistence, Creativity, Collaboration, Communication). Choose one of the following to write about.
    1. Choose one of the five practices in which you believe you demonstrated growth in this lesson. Write something you did that exemplified this practice.
    2. Choose one practice you think you can continue to grow in. What’s one thing you’d like to do better?
    3. Choose one practice you thought was especially important for the activity we completed today. What made it so important?

Leave a Reply

Your email address will not be published. Required fields are marked *