Why does the assistant need to see your code?
An AI assistant writes code that fits what it can see. If it can see your page, it fits your page. If it cannot, it fits an imaginary page made of common patterns, with common class names, common colours and often a common library.
Send “Can you make an item show it is sold out on my bakery website?” in the practice area. The reply is confident and tidy, and it styles .product-card.unavailable and .badge. The bakery menu has neither. It uses .menu-item inside a .menu list. Paste that reply in and nothing on your page changes, because CSS selectors that match nothing do nothing, silently.
The assistant was not careless. It had no way to know your class names, so it used the ones it sees most often.
.menu-item and --crust instead of guessing.How much of the page should you paste?
Paste the part the change touches, plus anything it has to fit with. For the sold out style that is the .menu-item rule, the line for the rye and the :root rule that holds your colours. Four or five lines are enough. The whole page would work too, but on bigger sites the important lines get lost in the noise and you share more than you need to.
A good test: could a developer who has never seen your site make the change correctly from what you pasted? If they would need to ask “what is the class called?” or “what colour do you use?”, include that.
Keep the pasted code exact. Retyping it from memory introduces small differences, and the assistant will match the retyped version.
What does a request with context look like?
Put the goal first, then the code, then any limits. A line like “Here is my code:” before the pasted part makes it clear where your words stop and the code starts. Many chat tools also let you wrap code in a code block, which helps the assistant read it.
Send it and open **Prompt check**. Goal and context are ticked, and limits too if you added “plain CSS only”. The reply now talks about .menu-item, adds a .sold-out class and colours the label with var(--crust).
Please add a sold out style to the Dark rye on my bakery menu so customers can see it is gone today. Here is my code:
:root { --crust: #8a4b1f; }
.menu-item { display: flex; justify-content: space-between; }
<li class="menu-item"><span>Dark rye</span> <span>$5</span></li>
Use plain CSS only and reuse my --crust colour.What can you describe instead of pasting?
Some things are easier to describe: “my page is one HTML file with a style block in the head”, “I use plain CSS, no frameworks”, “the menu is a list inside a section with the id menu”. Short descriptions like these give structure without filling the chat with code.
Describe the parts the assistant needs to know about and that are not in your paste. If your CSS is in a separate file called styles.css, say so, or the reply may put a <style> block in your HTML. If a script already handles clicks on the menu, mention it so the assistant does not write a second one that fights the first.
Never describe or paste private things to give context. Keys, passwords and customer lists are never needed to style a menu.
What did the assistant get wrong this time?
Press **Use this code** and look at the Preview. The rye line is struck through with its label, as asked, but it has lost the dashed border and the spacing the other items have. In the HTML, the reply changed class="menu-item" to class="sold-out", replacing the menu class instead of adding to it.
An element can have several classes, separated by spaces. Write class="menu-item sold-out" and the item keeps every rule from .menu-item and adds the sold out look on top. Make that edit, then open **Review** to see your one-line change next to the assistant’s version.
Even with full context, assistants make small slips like this one. Context makes the reply fit your page. You still check that it fits.
How do you check that the reply used your code?
Look for your own names in the reply. Every class, id and custom property it styles should already exist in your page, unless it says it is adding a new one and puts that new one on an element. A selector you do not recognise is a warning sign: either the assistant invented it, or it is about to rename something of yours.
Search the file for the names. In most editors, selecting a class name highlights every other place it appears. If a CSS rule mentions .menu__item and the HTML says menu-item, those two never meet. DevTools helps too: inspect the rye <li> and the Styles panel lists only the rules that actually match it.
When is the code you pasted out of date?
As soon as you edit it. If you change a class name after the assistant’s first reply, the next reply may use the old name because that is the version it has seen. Paste the current version of the part you are working on whenever you ask about it again.
The same goes for errors and layout bugs. A reply that fixes the code as it was yesterday may break the code as it is today. A fresh paste costs a few seconds and saves a confusing round of fixes.
How is the pretend assistant different from a real one?
The assistant here does not actually read your code. It notices whether your request contains something that looks like code or a description of your page and picks the matching reply, written for this lesson. Real tools really do read what you paste, and still sometimes ignore part of it, rename things or invent a class.
Real tools also give different answers each time, can refuse, and may keep what you paste, so paste only what the change needs. The habit carries over unchanged: show the code the change has to fit, and check that the reply uses your names.
Field notes
- Without your code, the assistant writes for an imaginary page with common class names.
- Paste the part the change touches, plus anything it has to fit with.
- Put the goal first, then the code, then any limits.
- Every class the reply styles should already exist in your page or be clearly added.
Easy to get wrong
Without them the assistant writes CSS for class names it guessed, which match nothing on your page and silently do nothing.
Huge pastes bury the important lines, fill the chat’s limited space and share more of your project than the job needs.
A rename in the CSS without the same rename in the HTML breaks the styling, and the assistant cannot see every place a name is used.
Questions people ask
Should I paste my CSS file or my HTML file?
Both parts the change touches. A style change usually needs the rule and the element it applies to, so a few lines from each.
What if my code is too long to paste?
Cut it down to the section you are working on and describe the rest, like “the page also has a header and footer I am not changing”.
Why did it replace my class instead of adding one?
It is a common slip. Read every class attribute the reply changes and check that the original classes are still there.
Is it safe to paste my code?
Ordinary HTML and CSS are usually fine. Check first for keys, passwords, private addresses or customer data, and remove them before you send.