Why does a CSS declaration appear in the stylesheet but not take effect?

That is one likely explanation. Browsers ignore a declaration when its property name or value is invalid or unrecognized, while continuing to parse later valid CSS; the stylesheet does not normally stop as if it had hit a JavaScript error. [S1]

For example, color: bluish; will not set the text color because bluish is not a recognized color value. Replace it with a valid value such as color: blue;. If you are unsure whether the declaration is being applied at all, temporarily try a value you know is valid for that property.

Also check the declaration’s punctuation and where it sits in the rule. In developer tools, select the affected element and inspect its rules: is the declaration recognized, crossed out, or absent from the rules applying to that element? These clues help distinguish a rejected declaration from one that is not applying for another reason.

First compare the spelling and syntax with the property and value you intended to use. Then inspect the declaration in the browser’s developer tools. If it is rejected or not treated as valid, check whether that property and value are supported in the browser and context you are testing. A line in a source file alone does not establish that the browser accepts it.

You can narrow down the possibilities with a small test in the same page and browser: change only that declaration to a known-valid value for the same property. If the test value affects the element, investigate the original value’s spelling, syntax, or support. If it still has no effect, look beyond value support at the selector, any conditions on the rule, and the cascade. The test narrows the search; by itself, it does not prove the precise cause.

A declaration can be valid yet fail to contribute because its selector does not match, its stylesheet or conditional rule is not currently applicable, or another valid declaration wins in the cascade. Browsers filter out declarations in those situations before determining the resulting value. If no declaration supplies a value, inheritance or an initial value may determine it. [S2]

Check in this order:

1. Confirm that the selected element is the one you meant to style and that the rule’s selector matches it.
2. Check whether the rule is inside a condition that currently applies.
3. Look for other declarations of the same property and identify which one takes effect.
4. Compare the computed value with the value you expected. It shows the result for the selected element, not just the text in the stylesheet.

For example, if a matching rule sets color: navy but another applicable declaration wins with color: black, the computed color can be black even though the navy declaration is present. The computed result alone does not explain why a declaration lost, so inspect the applicable rules too.

Use the same checks, but also inspect the custom property’s value where it is defined and how it is substituted into the declaration. A declaration using a custom property can become invalid after substitution, unlike an ordinary declaration rejected during initial parsing. [S1] So the custom property appearing in the stylesheet does not by itself show that its eventual value is valid for the consuming property.

For example, if a rule uses color: var(--text-color);, check both that declaration and the value assigned to --text-color. Change one thing at a time, then check whether the consuming declaration is accepted and whether the computed color changes. The cause in a particular page depends on its code and browser, so use the rules and computed value there to narrow it down.