Articles
Introduction to CSS
Inheritance in CSS

Inheritance in CSS

This article explains inheritance in CSS.

You can check representative inherited and non-inherited properties.

YouTube Video

HTML for Preview

css-inheritance.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

Inheritance in CSS

In CSS, some properties are automatically inherited from parent elements to child elements. This is a useful mechanism because once you set a specific property, child elements will also have the same style, eliminating the need to set it repeatedly. However, not all properties are inherited; some properties are inherited while others are not. For example, color and font-family are inherited, but box model properties like margin and padding are not.

Inherited Properties

Inheritable properties are mainly those related to text and fonts.

Commonly inherited properties

  1. color: Text Color
1body {
2    color: black;
3}
  • In this case, all child elements within body will have black text color.
  1. font-family: Font Family
1body {
2    font-family: "Times New Roman", cursive;
3}
  • All child elements use the Arial font.
  1. font-size: Text size
1body {
2    font-size: 16px;
3}
  • All text within the body will be 16px by default.
  1. line-height: Line spacing
1p {
2    line-height: 1.5;
3}
  • Text within a <p> element will be displayed with 1.5 times line height, affecting its child elements as well.
  1. text-align: Text alignment
1div {
2    text-align: center;
3}
  • Text and inline elements within a div element are displayed centered.
  1. visibility: Element visibility
1div {
2    visibility: hidden;
3}
  • visibility is a property that controls the visibility of an element. When set to hidden, the element becomes invisible.
  • In this case, child elements within the div will also be hidden.
  1. list-style: List style (list markers for <ul> and <ol>)
1ul {
2    list-style: square;
3}
  • In this case, list items within the ul tag will be displayed with square markers.

Example:

Non-inherited properties

Properties related to layout and the box model are usually not inherited. These properties need to be set individually for each element.

Common Non-Inherited Properties

  1. margin, padding: Outer and inner margins of an element
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Even if you set outer or inner margins for a div element, it does not affect its child elements.
  1. border: Element border
1div {
2    border: 1px solid black;
3}
  • Even if a border is set on a parent element, it does not affect the child elements.
  1. width, height: Element width and height
1div {
2    width: 100px;
3    height: 50px;
4}
  • The width and height of a parent element do not automatically affect the child elements.
  1. background: Background style
1body {
2    background-color: lightblue;
3}
  • The background color set on the body does not directly affect the child elements. However, if a child element has a transparent background, the background color of the parent element may be visible through it.

Example:

Inheritance control

Inheritance can be controlled using the inherit, initial, or unset keywords.

  • If you want to enable inheritance: You can explicitly force inheritance using the inherit keyword.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • If you do not want inheritance: You can reset the property to its initial value using the initial or unset keywords.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Example:

The all property

The all property is a property that can reset almost all CSS properties, including those that can be inherited, for a specified element at once. Specifically, you can use the following three keywords to set the properties of an element:.

  • initial: Resets all properties to their initial values.
  • inherit: Inherits all properties from the parent element.
  • unset: Inherits the property if it is inheritable, otherwise resets it to its initial value.

all is very useful when you want to reset or set multiple properties in bulk, rather than setting only specific properties individually.

Example of resetting to initial values 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • When you want to reset all previously set styles for a specific element and return it to its initial state, use all: initial like this.

  • In this example, all properties of the <div> element with the .all-initial class are reset to the browser's default initial values.

Example of Inheritance 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • Using all: inherit makes all properties inherit from the parent element.
  • In this example, elements with the .all-inherit class inherit all properties, such as color and font-size, from the parent element.

Example of Determining Initial Value or Inheritance Based on Conditions 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Using all: unset causes properties to be inherited if they can be; otherwise, they are reset to their initial values.
  • In this case, color is inherited, while font-weight is reset to its initial value, typically normal.

Relationship with Specificity (Priority) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • The all property is a powerful reset mechanism, but it is affected by CSS specificity. If a specific element has strong style specifications, the all property may not be able to override those styles. For example, properties specified with !important cannot be affected.

  • In this example, even if you try to reset the style with all: initial, the color property will not be reset due to the color: red !important specification.

Block-level elements and inline elements

Block-level elements

  • Example: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Characteristics:
    • They always appear on a new line and expand to fill the full width of their parent element.
    • The width (width) and height (height) can be freely set.
    • Margins (margin) and padding (padding) can be set in all directions and will affect all sides.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

Inline elements

  • Example: <span>, <a>, <strong>, <em>, <img>, <label>
  • Characteristics:
    • They appear alongside other inline elements on the same line.
    • Width (width) and height (height) cannot be directly set (unless display: block is applied).
    • Setting margins (margin) or padding (padding) vertically has limited effect (horizontal margins and padding are effective).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Differences between block-level elements and inline elements

  • Width and height settings:

    • Block-level elements: Width and height can be set.
    • Inline elements: Width and height generally cannot be set.

  • Margin and Padding:

    • Block-level elements: Margin and padding are applied to all sides.
    • Inline elements: Margin and padding on the top and bottom are ineffective or have limited effect.

  • Layout Method:

    • Block-level elements: Automatically placed on a new line.
    • Inline elements: Aligned on the same line with other inline elements.

As you can see, there are differences in how CSS styles are applied to block-level elements and inline elements. In block-level elements, layout-related CSS properties such as width, height, margin, and padding are applied as specified. On the other hand, for inline elements, setting layout-related CSS properties such as width, height, margin, or padding may not be applied or may be applied in a limited manner.

CSS handling of block-level and inline elements 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

However, by setting the display property to block or inline-block, you can adjust the styles such as width and height for inline elements as if they were block elements.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS BasicsDetails of Attribute Selectors in CSS