Lesson 9: Styling Elements with CSS
45 minutes
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 their personal websites.
Question of the Day: How can we style the images and layouts of our pages?
Standards
AP - Algorithms & Programming
- 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
Agenda
Objectives
Students will be able to:
- Create a CSS rule-set for the body element that impacts all elements on the page.
- Use CSS properties to change the size, position, and borders of elements.
Preparation
- Check the "Teacher's Lounge" forum for verified teachers to find additional strategies or resources shared by fellow teachers
- If you are teaching virtually, consider checking our Virtual Lesson Modifications
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the teachers
- Body Styling
- Layout Properties - Resource Page
- Styling Elements with CSS - Slides
Teaching Guide
Warm Up (5 minutes)
Discuss: What Styles Do You Want?
Display: Send students to the sample web page in Code Studio or display it on the board.
Prompt: What are two CSS styles on this page that you already know? What are two styles on the page that you don’t know how to code yet?
Discuss: Have students share different stylings on the page.
Discussion Goal: This discussion serves as a review of the CSS properties students have already learned and showcases some of the new properties they will be learning in this lesson. Some of the new properties showcased are:
- Adding background colors to things
- Being able to move things around on the page (the images to the left of the text)
- Being able to add borders to and round corners of images
Remarks
Today we are going to learn more properties we can use to style our web pages, which will allow you to add some of the styles we listed in this discussion.
Question of the Day: How can we style the images and layouts of our pages?
Activity (35 minutes)
Web Lab: Styling Elements with CSS
Transition: Send students to Code Studio.
Guide to Programming Levels: Additional guidance for programming levels is provided in the CSD Guide to Programming Levels. This document includes strategies and best-practices for facilitating programming levels with students.
Formative Assessment: Levels 8 & 9 can be used as a formative assessment.
A rubric is provided in level 8, and written feedback can be given to students. Click here to learn more about giving feedback to students.
Level 9 is a free response reflection that can be used as an opportunity to gain insight into how the students completed the assessment level and the choices they made with styling HTML elements with CSS. In addition, this reflection can be used to identify any misconceptions shared among students that should be cleared up.
Wrap Up (5 minutes)
Question of the Day: How can we style the images and layouts of our pages?
Do This: Have students add the new properties they learned to the CSS Properties page in their journal or the class poster.
Prompt: How might you want to use these new styles in your personal web page?
This work is available under a Creative Commons License (CC BY-NC-SA 4.0).
If you are interested in licensing Code.org materials for commercial purposes contact us.
