CSS

Solutions & Teacher Notes

This file contains short answers, hints and teacher notes for the exercises in lessons 1–10.

Lesson 1

• Q: What does CSS stand for? A: Cascading Style Sheets.
• Q: Where can CSS be placed? A: Inline, internal (in

Lesson 2

• Q: Selector for all paragraphs: p.
• Q: Selector for element with id main: #main.
• Q: Selector for elements with class note: .note.

Lesson 3

• Q: CSS to make text red: color: red;.
• Q: Font-size example: font-size: 20px;.

Lesson 4

• Q: Order in box model (inside out): content → padding → border → margin.
• Q: Example to set padding and border: padding: 10px; border: 1px solid #ccc;.

Lesson 5

• Q: Flex container example: display:flex; gap:10px; and justify-content:center;.

Lesson 6

• Q: position: relative; vs position: absolute; explanation and typical uses.

Lesson 7

• Q: Basic media query: @media (max-width:600px){ ... }.

Lesson 8

• Q: Transition example: transition: background-color 0.3s ease;.

Lesson 9

• Q: Style input focus: input:focus{outline:none; box-shadow:0 0 0 2px #bde;}.

Lesson 10

• Project checklist and suggested grading rubric.

Teacher notes

• Each exercise has a short answer above; expand in class with live coding.
• Encourage students to open examples/lessonN.html and edit the CSS live.