How Exactly Css Works?

April 21, 2024 Post a Comment

Currently, I am stack with CSS. I can't understand how exactly CSS works. If I want to apply 'border: 1px solid red' to a CSS parent element then it is only applied to parent eleme

Solution 1:

Some CSS properties "cascade" down to children elements, some don't. border is an example that does not cascade down.

More information in the MDN documentation.

Solution 2:

The reason behind this is with CSS property inheritance. All HTML elements have a default set of values for all CSS properties.

The color property is typically set to "inherit", therefore, child elements will inherit the parent element values for this property unless the child element explicitly has set the property to another value.

The border property on the other hand does not have "inherit" as it's default behavior therefore does not inherit parent values unless you have specifically set it too.

Hope this helps!

Solution 3:

Different CSS properties have different inheritance and cascade rules. You need to see the CSS specification to see how each one behaves.

In your case, you're asking why border is not inherited by child elements but color is:

The CSS specification for border states that it is not inherited: https://www.w3.org/TR/css-backgrounds-3/#the-border-color
The CSS specification for color states that it is inherited: https://www.w3.org/TR/css-color-3/#foreground

Web developers and designers eventually familiarise themselves with each property and just memorize which properties are inherited and which are not.

But generally speaking (as a rule-of-thumb): if a rule affects the layout of an element (e.g. a box's dimensions, including padding, width/height, margin, position, etc) then it won't be inherited, and properties that only affect text (like color, font-family, font-weight, etc) are inherited. The edge-cases are in other properties like background-image, opacity and filter where you need to consult the spec to be sure.

Solution 4:

Some CSS properties do not inherit the computed value of the element’s parent. You could use the inherit keyword on the child div elements’ border to let them inherit the same border as their parent

Try this:

<html><head><title>test</title><style>.parent {
          border: 1px solid red;
        }

        .child{
            border: inherit;
        }
    </style></head><body><divclass="parent">
        Inside parent class
        <divclass="child">Inside child class 1</div><divclass="child">Inside child class 2</div></div></body>

Solution 5:

In CSS, inheritance controls what happens when no value is specified for a property on an element. Refer to any CSS property definition to see whether a specific property inherits by default ("Inherited: yes") or not ("Inherited: no").

From Inheritance - CSS: Cascading Style Sheets | MDN

Not all properties are inherited by defaults, color for instance is, but border is not. You have to refer to documentations (like MDN or w3schools) to know whether a property is set to inherit by default.

You can however explicitly set an element property to inherit the value of its parent property using the keyword value inherit, like so:

.parent {
  border: 1px solid red;
}

.child {
  border: inherit;
}

<divclass="parent">
  Some text
  <divclass="child">Child element</div><divclass="child">Child element</div></div>

/!\ Inheritance is not to be confused with the cascade, which is the mechanism defining the style declarations applied to elements being targeted by several selectors.

Learn Html5