Check whether the browser loaded your stylesheet before changing selector specificity. Then inspect the element to see whether the rule matches and whether another declaration wins.

1. Check the stylesheet request

Open developer tools, reload the page and find your stylesheet in Network. Confirm the response contains CSS rather than an HTML error page or sign-in screen. Check the path in your <link rel="stylesheet" href="styles.css">, response status, content type and any console errors.

2. Check the selector

These names do not match:

<p class="notice">A short message</p>

/* This selector matches no element above. */
.notices { color: purple; }

Change the selector to .notice. Class and ID spelling matter; a class selector starts with a dot and an ID selector starts with a hash.

CSS example with a mismatched .notices selector; paragraph remains its normal color
Before: the selector has an extra letter and does not match the paragraph’s class.
CSS example after matching the .notice selector; paragraph is purple and bold
After: the example applies the matching selector. These screenshots show the working demonstration linked below.

Try the working selector example and switch between the two states.

3. Inspect the winning declaration

In Chrome’s Elements panel, use Styles to inspect matching rules and Computed to inspect the resulting value. A crossed-out declaration may be overridden or invalid; read the accompanying warning and the competing rule. Cascade origin, importance and layers can matter before specificity. Do not add !important everywhere to conceal the cause.

4. Reduce the page to a working example

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>CSS check</title>
<style>.notice { color: purple; font-weight: bold; }</style>
<p class="notice">This text should be purple and bold.</p>
</html>

Save this as a new HTML file and open it. If it works, compare your page’s stylesheet loading, selectors and competing rules. Also check active media queries, invalid values, inheritance and cached files. A property can be valid yet ineffective in the current layout; for example, flex alignment requires an appropriate flex context.

If you are changing an RStudio .rstheme rather than a webpage, first check which RStudio theme is selected.

Sources and verification

The minimal selector example is checked in the browser. Documentation explains how to inspect stylesheet loading and the cascade.