Web Design & Development 1 in HTML & CSS -- Unit 3 Introduction to CSS
This is the third in an eight-unit course which aims for students to master HTML & CSS basics to write complete static web pages. This unit allows students to begin mastering CSS by exploring and applying appropriate CSS selectors and styles for text-based content.
If you need a complete curriculum for teaching HTML & CSS in a classroom setting, consider the BUNDLE
that contains all 8 units, supplemental ebook, and master student view!
The materials are classroom-ready and created in easily editable formats (such as HTML and Word documents) for quick customization. A variety of activities are provided, including hands-on work with professional tools, worksheets and assessments with answer keys, and web pages and web apps made specifically for use in this course.
This package includes the complete resources for Unit 3 (Intro to CSS), including lesson plans, answer keys, and project files. The zip file contains 7 primary folders organizing the unit:
Lesson 1 - What is CSS
: In this lesson students will learn the purpose and structure of CSS code, including basic selectors and properties, and a first-look at RGB color codes.
Lesson 2 - Fonts and Text
: In this lesson students will import fonts, use appropriate fallback font families, and apply other text-based styles. This lesson includes 2 custom hands-on activities and a reading list for students interested in more aspects of working with CSS text and font techniques.
Lesson 3 - Borders for Block v Inline Elements
: In this lesson students will use the individual border properties as well as the border shorthand property to style the edges of elements. Using this visual, students will also identify differences between block and inline elements, categorizing each element as block or inline. This lesson includes a custom interactive activity and a topics list for optional cumulative review of the course so far.
Lesson 4 - Selecting Specific Elements
: In this lesson students will examine the three methods for applying CSS code to a web page (inline, internal, and external), use several different types of selectors (tag name, class, ID, combined, grouping, and descendant), and apply selectors with proper order and specificity.
Lesson 5 - Designing with Color
: In this lesson, students will apply principles of design related to color, analyze colors using different light-based color models (RGB/HSV/HSL), convert RGB colors between decimal and hexadecimal, and apply alpha-channel opacity to colors using the RGBA notation in CSS.
Unit Activity - The Power of CSS
: In this activity, students will apply all of the CSS to style a given HTML page. They will not be allowed to edit the HTML. Only CSS will be used to transform the page. The given HTML page contains all of the instructions for students to follow, as well as the rubric for grading.
Review and Assessment
: Use the intro-css.html reading as a summary review document with suggested activities that students should be able to complete on their own by the end of the unit. The provided assessment may be used directly as an exam or modified as needed.
For the next unit, see Unit 4: Images. For the previous unit, see Unit 2: Intro to HTML. Also check out the complete 8-unit bundle for a full class in HTML & CSS.