Can the Default Named CSS Colors Be Overridden

Can the default named CSS colors be overridden?

No, these color keywords are pre-defined and there is no way to override their color mappings from outside the browser. This applies to all named color keywords defined in the spec that you link to, including the basic set of CSS keywords, the X11/SVG keywords and the deprecated system colors (although of course, system colors are taken from the system palette).

You won't be able to query computed styles of DOM elements and replace them on the fly either, because computed color values are always rgb() or rgba() triplets, even if the cascaded value is the keyword. This is stated in the spec that you link to:

• The computed value for basic color keywords, RGB hex values and extended color keywords is the equivalent triplet of numerical RGB values, e.g. six digit hex value or rgb(...) functional value, with an alpha value of 1.

In your example CSS rule, the computed color of h1 elements would be rgb(255, 0, 0), not red. You cannot distinguish #ff0000 or red from rgb(255, 0, 0) in that case, which can pose problems if you're specifically only targeting the red keyword.

You could parse and modify the stylesheet directly using a script, but CSS parsing isn't easy. You have to account for shorthand declarations, URLs (e.g. background: red url(redimg.png) center center no-repeat;), and so on and so forth. That's probably out of the scope of your question.

Custom properties only allow you to specify a cascading variable in place of a keyword as a value. You won't be able to modify existing pre-defined keywords with custom properties, so you'd still have to replace every occurrence of red with something like var(red) where the var-red property corresponds to a user-defined red.

Is there a way to override the system defined color value in CSS?

That's not possible with CSS, but if you use SASS, you can create a macro to change the color, although that still might not work.

EDIT: After doing some spelunking on my own, there is a way to use variables in pure CSS (no SASS!):

:root {
    --red: #DB0000; /* Define your custom value */
}

p {
    color: var(--red); /* Reference your custom value.
                         All <p> elements will be given
                         a text color of #DB0000 */
}

Check out this CodePen

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

color: none effect in CSS to prevent override

No, it won't work. It will be ignored because none is an invalid value for the color property.

Depending on what you're trying to achieve, you could set it to transparent/inherit/initial.

These values are somewhat self-explanatory. The value inherit will cause the element to inherit the computed value of the color property from its parent element. The value initial will set the color to the browser's default color (likely specified in the user agent stylesheet). It's worth pointing out that the initial value isn't fully supported in all browsers.

Background color overridden even after reversing the order of CSS layers

The issue is that your @import provides the first naming of the "highlightjs" layer. It comes before the list of layers, so it makes it the lowest precedence layer. The list of two layers then has no effect.

@import url("data:text/css, code { background:blue; color:yellow }") layer(highlightjs);

@layer main, highlightjs;

@layer main {
  .hljs {
    background: red;
  }
}

<code class="hljs">
  Hello World
</code>

Unable to override blue color of a link by inheriting from parent footer

The CSS cascade sorts according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:

• user agent declarations
• user normal declarations
• author normal declarations
• author important declarations
• user important declarations

Thank you. But why does the style from the browser have a higher specificity than something that the author wrote, in this case the .footer selector? Isn't the specificity of author style > user agent style?

You can use a more specific selector to declare a color property for links nested in the <footer> or give all <a> tags color: inherit so they inherit the font color of their parent container. Then the link color will change as you expect since they override the user agent declarations. Currently, the user agent stylesheet provided by the browser is keeping the links their default -webkit-link blue color due to precedence.

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

Either use a selector in your CSS declaration that is more specific to target permalinks in the footer like .footer a { color: #666 } or give all <a> tags color: inherit. Have a look at Specificity for more.

.footer {
  color: #666;
  background-color: #ccc;
  padding: 15px 0;
  text-align: center;
  font-size: 14px;
}

.footer a {
  color: #666;
}

/* OR */

a {
  color: inherit; /* inherit color from parent */
}

<footer class="footer">
            © 2016 Wombat Coffee Roasters — <a href="/terms-of-use">Terms of use</a>
   </footer>

---

Related Topics