css inheritance Archives - Complete, Concrete, Concise https://complete-concrete-concise.com/tag/css-inheritance/ Practical Information Without The Bloat Wed, 17 Apr 2019 12:48:11 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 CSS – Understanding Inheritance and Default Values https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/css-understanding-inheritance-and-default-values/ Fri, 22 Mar 2019 19:59:11 +0000 https://complete-concrete-concise.com/?p=3801 Learn which CSS properties child elements inherit from their parents and what their default values are.

The post CSS – Understanding Inheritance and Default Values appeared first on Complete, Concrete, Concise.

]]>

You’ve implicitly encountered inheritance and default values while working with CSS.

Contents

  1. Inheritance
  2. Default Values
  3. Table of Inheritance and Default Values
  4. The ‘inherit’ Value
  5. The ‘default’ Value
  6. Final Words
  7. References

Inheritance

When working with CSS, you probably noticed that styling like this:

.important {
  font-size: 32px;
}

When applied to HTML like this:

<div class="important">
  <p>This is important!</p>
</div>

Results in output that looks like this:

This is important!

This is because the p element inherits the font-size property applied to its parent div.

Not all properties are inherited by child elements.

Consider the following CSS:

.important {
  border: 1px red solid;
}

When applied to the following HTML:

<div class="important">
  <p>This is important!</p>
</div>

Results in the border only applied to the div element and not the p element:

This is important!

If the p tag inherited the border property from the parent div tag, it would have looked like this:

This is important!

Which is, probably, not what you want.

Default Values

When you write some HTML like:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="utf-8"  />
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

You see Hello World! displayed in the browser.

It is very likely that the font will be serif or sans serif, it will be 16px in size, the text will be black on a white background, and there is no border – and you didn’t have to style anything.

This is because every CSS property has a default value. The default value may be changed through inheritance or when you explicitly set the value.

Table of Inheritance and Default Values

The following table shows which CSS properties (that we’ve seen) are inherited by child elements from their parents.

It also shows the default values for those CSS properties.

Browser implementations sometimes set values other than what is defined in the CSS specification. Footnotes are given for many of the values and any alternate values given should be regarded as informative rather than absolute.

CSS Property Inherited Default Value
color Yes Depends on the browser (usually black)1
background-color No transparent2
padding No See the individual properties
padding-left No 03
padding-right No 04
padding-top No 05
padding-bottom No 06
margin No See the individual properties
margin-left No 07
margin-right No 08
margin-top No 09
margin-bottom No 010
border No The border is transparent and has a style of none
display No Depends on the HTML element, but the most common are inline and block11.
width No auto
height No auto
box-sizing No content-box
font-size Yes medium (usually 16px)12
font-family Yes Depends on the browser
font-weight Yes normal13
font-style Yes normal14
line-height No normal
text-align No A nameless value that acts as ‘left’ if the text direction is left-to-right and ‘right’ if ‘direction’ is right-to-left.
float No none
clear No none
content No normal

The ‘inherit’ Value

You can force a child element to inherit its parent’s property by using the CSS value inherit:

.important {
  border: 1px red solid;
}

.what-will-this-do {
  border: inherit;
}

When applied to the following HTML:

<div class="important">
  <p class="what-will-this-do">This is important!</p>
</div>

Will cause the child element to inherit the parent’s border property:

This is important!

The ‘default’ Value

If you want to reset an element’s property to its default value, you can use the CSS value initial15.

Consider the following styling:

p {
  color: red;  
}
.default {
  color: initial;
}

When applied to the following code:

<p >This is some styled text!</p>
<p class="default">This is some default styled text</p>

Results in the following:16

This is some styled text!

This is some default styled text

Final Words

Child elements may inherit CSS values from their parents – it depends on the specific CSS property.

All HTML elements have default styles applied to them. Some of these styles are determined by browser settings, others from the CSS specification.

References

  1. CSS Default Properties
  2. CSS Inheritance
  3. Firefox’s Default Style Settings
  4. Chrome’s Default Style Settings
  1. The <mark> tag has a default color of black. The <a> tag default color is defined by the browser – it is usually #0000EE for an unvisited link, #551A8B for a visited link, and #EE0000 for a link you are hovering over.↩
  2. The <mark> tag has a default background-color of yellow.↩
  3. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  4. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  5. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  6. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  7. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  8. This is true for all the HTML elements we have seen so far. Some HTML elements we haven’t seen may have a non-zero default value.↩
  9. This is true for most HTML elements we have seen so far. For <p> tags it is equal to the font-size. The <h1> <through <h6> also have default values for top and bottom margin that are non-zero – the specific value depends on the tag.↩
  10. This is true for most HTML elements we have seen so far. For <p> tags it is equal to the font-size. The <h1> <through <h6> also have default values for top and bottom margin that are non-zero – the specific value depends on the tag.↩
  11. The following tags have a default display of none: <head>, <title>, and <meta>. The following tags have a a default display of block: <html>, <body>, <h1> through <h6>, <img>, <ol>, <ul>, <li>, and <p>. The following tags have a a default display of inline: <strong>, <em>, <i>, <mark>, and <a>.↩
  12. The <h1> through <h6> tags have varying default font sizes. Assuming 16px as the default font size: H1 = 32px, H2 = 24px, H3 = 19px, H4 = 16px, H5 = 13px, and H6 = 11px.↩
  13. The <h1> through <h6> and the <b> and <strong> tags have a default font-weight of bold.↩
  14. The <i> and <em> tags have a default font-style of italic.↩
  15. Yes, it would make more sense if it was called default, but the CSS specification calls it initial.↩
  16. If your default color (set in the browser) is red, then both outputs will be red.↩

The post CSS – Understanding Inheritance and Default Values appeared first on Complete, Concrete, Concise.

]]>