CSS

You might say

The button works, but its color stays gray. Help me find which style is overriding the theme color.

CSS is a style language that describes a web page's appearance, layout, and changes across available space.For example, HTML may already contain a button while the button is still gray or overflows on a phone. The browser matches CSS rules and calculates a final style from their priority and order. CSS controls presentation; it does not implement the business logic that runs after a click.

Know first

HTML

Cascading Style Sheets

How two CSS rules determine a button's final color

button.css

1.primary { background: #4338ca; }

2.toolbar button { background: #767676; }

3.toolbar .primary { background: #4338ca; }

Computedbackground: #4338caFinal value comes from the primary rule

localhost:3000

Click behavior is unchanged

How the browser calculates the final style

First check which rules match: A selector decides whether a rule applies to an element. A button may match general button, page-region, and themed-button rules at the same time.

Then see which declaration wins: Matching scope, priority, and source order all affect the result. DevTools Styles and Computed panels show crossed-out declarations and the final value.

Quick checkChoose the best answer

The primary button is clickable, but it still appears gray. What should you inspect first?

Inspect the button's matched CSS rules and computed color to find the overrideRewrite the click handler so the click also sets the theme colorReplace the button with another HTML element and expect the theme color automatically

You can say this to an AI Agent

Inspect the CSS rules matched by this primary button and its final computed style. Find which gray declaration overrides the theme color. Preserve the HTML structure and click behavior, fix only the styling, and verify the color, layout, and overflow at desktop and 390px widths.

Learn next

1Box Model→2Responsive Design→