1. Meaning of CSS selector [href~="dog"]

✔️ Select all elements whose href attribute contains the whole word “dog”.
❌ Starts with dog
❌ Ends with dog

~= → matches whole, space-separated words.

---

2. Which <p> tag changes color with selector div + p?

HTML:

div + p targets a p immediately after a div.

Only beta fits.

✔️ Only beta
❌ Only alpha
❌ Both
❌ Neither

---

3. Which selectors can select a child element?

✔️ Child Selector (>) — directly selects children
✔️ Descendant Selector (space) — selects all nested elements
❌ Pseudo-class selector — targets states, not children

---

4. Will this change <p> color to red?

CSS is inside a comment block:

So it will NOT apply.

✔️ False
❌ True

---

5. position: absolute is relative to the parent, not the viewport

✔️ True (if a positioned ancestor exists; otherwise relative to viewport)
❌ False

---

6. Unit relative to the root HTML font size

✔️ rem
❌ px
❌ em

---

7. Which display values create block-level elements?

✔️ inline-grid
✔️ flex
✔️ grid
❌ none

(All three are block-level formatting contexts.)

---

8. Valid @keyframes rules for moving an item 100px left → right

✔️ from {left:0px;} to {left:100px;}
❌ from {right:100px;} to {right:0px;} (moves right → left)
✔️ from {top:0px;} to {top:100px;} (moves vertically, but still valid movement)
❌ None of the above

---

9. Benefits of using preprocessors (Sass, LESS)

✔️ Variable re-use
✔️ Loops
✔️ If-Else statements

(All are correct.)

---

10. Tools for debugging incorrect browser display

✔️ Inspect the element using browser dev tools
✔️ Review CSS selector specificity
✔️ Install & use a linter

(All help.)

---

📊 Summary Table

---