Css color not inherited

color

The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color .

Try it

For an overview of using color in HTML, see Applying color to HTML elements using CSS.

Syntax

/* Keyword values */ color: currentcolor; /* values */ color: red; color: orange; color: tan; color: rebeccapurple; /* values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* values */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34 12 64 / 60%); color: rgba(34.6 12 64 / 30%); /* values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); /* values */ color: hwb(90 10% 10%); color: hwb(90 10% 10% / 0.5); color: hwb(90deg 10% 10%); color: hwb(1.5708rad 60% 0%); color: hwb(0.25turn 0% 40% / 50%); /* Global values */ color: inherit; color: initial; color: revert; color: revert-layer; color: unset; 

The color property is specified as a single value.

Note that the value must be a uniform color . It can’t be a , which is actually a type of .

Values

Sets the color of the textual and decorative parts of the element.

Sets the color to the element’s color property value. However, if set as the value of color , currentcolor is treated as inherit .

Accessibility concerns

It is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Initial value	canvastext
Applies to	all elements and text. It also applies to ::first-letter and ::first-line .
Inherited	yes
Computed value	computed color
Animation type	by computed value type

Formal syntax

Examples

Making text red

The following are all ways to make a paragraph’s text red:

p  color: red; > p  color: #f00; > p  color: #ff0000; > p  color: rgb(255, 0, 0); > p  color: rgb(100%, 0%, 0%); > p  color: hsl(0, 100%, 50%); > /* 50% translucent */ p  color: #ff000080; > p  color: rgba(255, 0, 0, 0.5); > p  color: hsla(0, 100%, 50%, 0.5); > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Inheritance

In CSS, inheritance controls what happens when no value is specified for a property on an element.

CSS properties can be categorized in two types:

• inherited properties, which by default are set to the computed value of the parent element
• non-inherited properties, which by default are set to initial value of the property

Refer to any CSS property definition to see whether a specific property inherits by default («Inherited: yes») or not («Inherited: no»).

Inherited properties

When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property’s summary.

A typical example of an inherited property is the color property. Consider the following style rules and the markup:

p>This paragraph has em>emphasized textem> in it.p> 

The words «emphasized text» will appear green, since the em element has inherited the value of the color property from the p element. It does not get the initial value of the property (which is the color that is used for the root element when the page specifies no color).

Non-inherited properties

When no value for a non-inherited property has been specified on an element, the element gets the initial value of that property (as specified in the property’s summary).

A typical example of a non-inherited property is the border property. Consider the following style rules and the markup:

p>This paragraph has em>emphasized textem> in it.p> 

The words «emphasized text» will not have another border (since the initial value of border-style is none ).

Notes

The inherit keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties.

You can control inheritance for all properties at once using the all shorthand property, which applies its value to all properties. For example:

p  all: revert; font-size: 200%; font-weight: bold; > 

This reverts the style of the paragraphs’ font property to the user agent’s default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a font-weight of «bold» .

Overriding inheritance, an example

Using our previous example with border , if we explicitly set the inheritance with inherit , we get the following:

p  border: medium solid; > em  border: inherit; > 

p>This paragraph has em>emphasized textem> in it.p> 

We can see here another border around the word «emphasized text».

See also

• CSS values for controlling inheritance: inherit , initial , revert , revert-layer , and unset
• Introducing the CSS cascade
• Cascade, specificity, and inheritance
• CSS key concepts:
  • CSS syntax
  • At-rules
  • Comments
  • Specificity
  • Box model
  • Layout modes
  • Visual formatting models
  • Margin collapsing
  • Values
    • Initial values
    • Computed values
    • Used values
    • Actual values

    Found a content problem with this page?

    This page was last modified on Jul 18, 2023 by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    Inheritance

    Some CSS properties inherit if you don’t specify a value for them. Find out how this works, and how to use it to your advantage in this module.

    

    

    Say you just wrote some CSS to make elements look like a button.

    a href="http://example.com" class="my-button">I am a button link</a>

    .my-button  
    display: inline-block; 
    padding: 1rem 2rem; 
    text-decoration: none; 
    background: pink; 
    font: inherit; 
    text-align: center;
    >

    You then add a link element to an article of content, with a class value of .my-button . However there’s an issue, the text is not the color that you expected it to be. How did this happen?

    Some CSS properties inherit if you don’t specify a value for them. In the case of this button, it inherited the color from this CSS:

    In this lesson you’ll learn why that happens and how inheritance is a powerful feature to help you write less CSS.

    Inheritance flow #

    Let’s take a look at how inheritance works, using this snippet of HTML:

    html> 
    body> 
    article> 
    p>Lorem ipsum dolor sit amet.</p> 
    </article> 
    </body>
    </html>

    The root element ( &LThtml> ) won’t inherit anything because it is the first element in the document. Add some CSS on the HTML element, and it starts to cascade down the document.

    html  
    color: lightslategray;
    >

    The color property is inheritable by other elements. The html element has color: lightslategray , therefore all elements that can inherit color will now have a color of lightslategray .

    Because this demo sets the font size on the body element, the html element will still have the initial font size set by the browser (user agent stylesheet), but the article and p will inherit the font size declared by the body . This is because inheritance only cascades downwards.

    Only the &LTp> will have italic text because it’s the deepest nested element. Inheritance only flows downwards, not back up to parent elements.

    Which properties are inheritable? #

    Not all CSS properties are inheritable, but there are a lot that are. For reference, here is the entire list of inheritable properties, taken from the W3 reference of all CSS properties:

    How inheritance works #

    Every HTML element has every CSS property defined by default with an initial value. An initial value is a property that’s not inherited and shows up as a default if the cascade fails to calculate a value for that element.

    Properties that can be inherited cascade downwards, and child elements will get a computed value which represents its parent’s value. This means that if a parent has font-weight set to bold all child elements will be bold, unless their font-weight is set to a different value, or the user agent stylesheet has a value for font-weight for that element.

    How to explicitly inherit and control inheritance #

    Inheritance can affect elements in unexpected ways so CSS has tools to help with that.

    The inherit keyword #

    You can make any property inherit its parent’s computed value with the inherit keyword. A useful way to use this keyword is to create exceptions.

    This CSS snippet sets all &LTstrong> elements to have a font-weight of 900 , instead of the default bold value, which would be the equivalent of font-weight: 700 .

    .my-component  
    font-weight: 500;
    >

    The .my-component class sets font-weight to 500 instead. To make the &LTstrong> elements inside .my-component also font-weight: 500 add:

    .my-component strong  
    font-weight: inherit;
    >

    Now, the &LTstrong> elements inside .my-component will have a font-weight of 500 .

    You could explicitly set this value, but if you use inherit and the CSS of .my-component changes in the future, you can guarantee that your &LTstrong> will automatically stay up to date with it.

    The initial keyword #

    Inheritance can cause problems with your elements and initial provides you with a powerful reset option.

    You learned earlier that every property has a default value in CSS. The initial keyword sets a property back to that initial, default value.

    aside strong  
    font-weight: initial;
    >

    This snippet will remove the bold weight from all &LTstrong> elements inside an &LTaside> element and instead, make them normal weight, which is the initial value.

    The unset keyword #

    The unset property behaves differently if a property is inheritable or not. If a property is inheritable, the unset keyword will be the same as inherit . If the property is not inheritable, the unset keyword is equal to initial .

    Remembering which CSS properties are inheritable can be hard, unset can be helpful in that context. For example, color is inheritable, but margin isn’t, so you can write this:

    /* Global color styles for paragraph in authored CSS */
    p  
    margin-top: 2em; 
    color: goldenrod;
    >
    
    /* The p needs to be reset in asides, so you can use unset */
    aside p  
    margin: unset; 
    color: unset;
    >

    Now, the margin is removed and color reverts back to being the inherited computed value.

    You can use the unset value with the all property, too. Going back to the above example, what happens if the global p styles get an additional few properties? Only the rule that was set for margin and color will apply.

    /* Global color styles for paragraph in authored CSS */
    p 
    margin-top: 2em;
    color: goldenrod;
     padding: 2em;
     border: 1px solid;
    >
    /* Not all properties are accounted for anymore */
    aside p 
    margin: unset;
    color: unset;
    >

    If you change the aside p rule to all: unset instead, it doesn’t matter what global styles are applied to p in the future, they will always be unset.

    aside p 
    margin: unset;
    color: unset;
     all: unset;
    >

    Which of the following properties are inheritable?

    animation font-size color text-align line-height

    Animations do not pass down to children.

    Источник