Feb 03: CSS and Selectors

Learning Objectives

After today’s class, you should be able to:

• Summarize the basics of CSS: selectors, properties, computed styles.
• Use DevTools to copy selectors from elements and call dollar functions.
• Clone a public repository on GitHub and browse examples in VS Code.

Lesson Outline

Debrief [5 min]

• Lab 2 solution – see Canvas Files

Lecture [40 min]

• Chapter 4: Slides 1–32
• Demo: CSS selector hints in VS Code
• Demo: Browser Tools for CSS (Page 141)

Exercise [15 min]

• Repositories that accompany the textbook:
  • Test Your Knowledge
  • Project Start Files
• Test Your Knowledge #1 (Page 142)
  • You have been provided lab04-test01.html and styles/lab04-test01.css.
  • Uncomment styles and add CSS selectors so that it looks similar to Figure 4.10.

Tutorial [15 min]

• mdn/learning-area GitHub repository
• CSS styling basics learning module
• Challenge: Styling a biography page

Dollar Functions

See Console Utilities API reference

Shortcut	Description
$(selector)	Returns the first DOM element that matches the specified CSS selector.
$$(selector)	Returns an array of elements that match the given CSS selector.
$0	Returns the most recently selected DOM element in the Elements panel.
$1–$4	Returns the second through fifth most recently selected elements.

Before Thursday

1. Submit Prep 3 on Gradescope. ← Due Wed at 11:59pm