Library › Coding AI › High school students
Find out why your text is red, not green
Practice: Asking for a format you can use. About 5 minutes.
About this exercise
On your class website, 'Welcome!' shows up red even though you gave it class="note" for green. Ask for exactly 3 numbered lines: '1. Winner: <selector> (<color>)', '2. Why: ...' under 20 words, and '3. Rank: <strongest> > <middle> > <weakest>' listing all three selectors. Don't rewrite your CSS. No code blocks, under 60 words.
Common mistakes when you ask AI for this
- Getting new CSS. The AI's default is to rewrite your rules or add !important, which hides the lesson. Try: Say: "Don't rewrite my CSS; just explain which rule wins."
- No clear winner. The AI explains specificity in general before getting to your rule. Try: Ask: "Line 1: Winner: <selector> (<color>)."
- No ranking. Seeing all three rules in order makes the rule stick. Try: Add: "Line 3: Rank: strongest > middle > weakest."
- A long lesson. The AI writes paragraphs on specificity scores. Try: Add: "Exactly 3 numbered lines; Why under 20 words."
What a strong prompt includes
- Gives the labels
- Sets the number of lines
- Rules out rewrites
- Asks for a ranking
- Caps the reason
Related exercises
- Add a cron line that matches the others in a crontab (Coding AI · Product managers)
- Add dark mode by overriding your existing CSS variables (Coding AI · Software developers)
- Add input checks to your number guessing game (Coding AI · High school students)
- Add input validation to a Java method with exact messages (Coding AI · Software developers)
- Add labels to a signup form without rewriting the page (Coding AI · High school students)