10 – Digging into CSS

Posted on: April 16, 2020 | Categories: Lesson | Tags: ! Course:

In this lesson, we dig a little deeper into how CSS works and what we can do with the language.

Teacher Activities

  • Check Learning Journals
  • Pre-teach vocab (Selector / Inheritance / Attribute / Pseudo)
  • Discuss the problem of conflicting CSS rules

Student Activities

  • Participate in class discussion
  • Read Cascade and inheritance and take outline notes
  • Open your summer narrative in VS Code
    1. Add a conflicting / overriding CSS rule.
    2. Write a comment explaining which rule will be applied and why
    3. Show me your code!*
  • Read CSS selectors and take outline notes
  • In your notes, list and define the following CSS Selector terms (include a syntax example):
    • Type, class, and ID selectors
    • Attribute selectors
    • Pseudo-classes and pseudo-elements
    • Combinators


Practice CSS selectors with the CSS Diner Game

Leave a Reply

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