CSS Interview Questions

28 Questions
HTML & CSS

HTML & CSS

Web DevelopmentFrontend

Question 12

How does CSS inheritance work? What properties are inherited by default?

Answer:

CSS Inheritance

Inheritance in CSS refers to the mechanism by which certain properties are passed down from a parent element to its child elements in the DOM (Document Object Model). When a property is inherited, the child elements automatically take on the value of that property from their parent, unless a different value is explicitly specified for the child.

How Inheritance Works

  1. Inherited Properties:

    • Certain CSS properties are naturally inherited from parent elements. These properties typically relate to text and font styling, such as color, font-family, font-size, line-height, etc.
    • If a child element does not have a specific rule defined for an inheritable property, it will inherit the value from its parent.

  2. Non-Inherited Properties:

    • Most properties related to the box model, layout, positioning, background, and borders are not inherited. For example, margin, padding, border, width, and height are not inherited by default.
    • For non-inherited properties, child elements will use either their initial value (the default value defined by the CSS specification) or a value explicitly set by CSS.

  3. Explicit Inheritance:

    • You can explicitly set a property to be inherited using the inherit keyword. This forces a child element to inherit a property value from its parent, even if the property is non-inherited by default.
    • Example:
      p {
    background-color: inherit; /* Inherits the background-color from its parent */
}

Example of Inherited Properties

Consider the following HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif; /* Inherited by child elements */
            color: blue; /* Inherited by child elements */
            margin: 20px; /* Not inherited */
        }

        p {
            font-size: 16px; /* Inherited by child elements */
        }

        span {
            font-style: italic; /* Inherited by child elements */
        }
    </style>
    <title>CSS Inheritance Example</title>
</head>
<body>
    <p>This is a paragraph with <span>some italic text</span> inside it.</p>
</body>
</html>

  • Inherited Properties:

    • The font-family and color properties set on the body element will be inherited by the p element and the span element inside it. So, the text color will be blue, and the font family will be Arial.
    • The font-size set on the p element will be inherited by the span element inside it, making the text size 16px.

  • Non-Inherited Property:

    • The margin property set on the body is not inherited, so the p element does not receive a margin value from the body.

Properties That Are Inherited by Default

Some common properties that are inherited by default include:

  • Text and Font Properties:

    • color
    • font-family
    • font-size
    • font-style
    • font-weight
    • line-height
    • text-align
    • text-indent
    • text-transform
    • letter-spacing
    • word-spacing
    • white-space

  • Other Inherited Properties:

    • visibility
    • cursor
    • list-style
    • quotes

Non-Inherited Properties (Require Explicit Assignment)

Some common non-inherited properties include:

  • Box Model Properties:

    • margin
    • padding
    • border
    • width
    • height
    • display

  • Layout Properties:

    • position
    • top, right, bottom, left
    • float
    • clear
    • z-index

  • Background Properties:

    • background-color
    • background-image
    • background-position
    • background-repeat
    • background-size

  • Other Non-Inherited Properties:

    • opacity
    • overflow
    • box-shadow
    • transform
    • text-shadow

Overriding Inherited Properties

Inherited properties can be overridden by specifying a different value in the child element’s CSS.

Example:

p {
    color: red; /* Overrides inherited color */
}

In the above example, even if the parent element (e.g., body) has a color of blue, the p element will display its text in red because the inherited property is overridden.

Summary

  • CSS Inheritance allows child elements to inherit certain properties from their parent elements, simplifying style management.
  • Inherited Properties include most text-related properties, while layout and box-model properties are generally not inherited.
  • Explicit Inheritance can be enforced using the inherit keyword, and inherited properties can be overridden by specifying a different value in the child element.

Recent job openings