Feb 12: Cascade, Box Model
Learning Objectives
After today’s class, you should be able to:
- Explain the specificity of CSS rules: inline > id > class > element.
- Draw the box model with margin, border, padding, and content.
- Declare and use CSS custom properties (variables) in
:root.
Lesson Outline
Tables and Forms [30 min]
- Solutions for MDN Challenges
- Naming conventions and style guides
- Chapter 5: Slides 1–13, 14–21
- Forms example: get-post-js.html
The Rest of CSS [45 min]
- Chapter 4: Slides 33–37, 38–52, 53–60, 61–66
- Test Your Knowledge #2 (Pages 164–165) Box Model
- Test Your Knowledge #3 (Paged 174–175) Text Styling
- Demo: CSS in JMU-CS/wiki-student
- Variables defined in _colors.scss
Note
Technically this isn’t the “rest” of CSS. There’s a lot more to learn about CSS in Chapter 7 (after Exam #1), especially layout. We’re just finishing Chapter 4 today, because I’ll be at SIGCSE 2026 next week. So we won’t have class on Thursday, Feb 19th.
Naming Conventions
| Identifier | Convention |
|---|---|
| HTML Ids | kebab-case |
| CSS Classes | kebab-case |
| Variable Names | camelCase |
| Function Names | camelCase |
Example:
<div id="plot-area" class="md-container md-table">
const plotArea = document.getElementById("plot-area");
See Also: