Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In CSS, what is the difference between cascading and inheritance?

Tags:

In CSS, what is the difference between cascading and inheritance?

Or are both the same thing?

like image 285
Jitendra Vyas Avatar asked Mar 09 '10 05:03

Jitendra Vyas


People also ask

What is inheritance in CSS?

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.

What is cascading effect in CSS?

The cascade is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one origin or cascade layer set a value for a property on an element.

What are the 3 CSS principles?

Inheritance, the Cascade, and Specificity are the big three. Understanding these concepts will allow you to write very powerful stylesheets and also save time by writing fewer CSS rules.

Why are CSS style called cascading?

The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable. The CSS specifications are maintained by the World Wide Web Consortium (W3C).


2 Answers

Inheritance is about how properties trickle down from an element to its children. Certain properties, like font-family inherit. If you set a font-family on the body, that font family will be inherited by all the elements within the body. The same is true for color, but it is not true for background or height which will always default to transparent and auto. In most cases this just makes sense. Why would the background inherit? That would be a pain. What if fonts didn't inherit? What would that even look like?

The cascade is about what take precedence when there is a conflict. The rules of the cascade include:

  1. Later properties override earlier properties
  2. More specific selectors override less specific selectors
  3. Specified properties override inherited properties

And so on. The cascade solves any conflict situations. It is the order in which properties are applied.


(update) Specificity is the calculation used to determine selector priority in the cascade. When two selectors apply to the same element, the one with higher specificity takes precedence.

  1. Inline styles have a very high specificity (1000)
  2. ID's have a specificity of 100
  3. classes/attributes and pseudo-classes add 10
  4. elements and pseudo-elements add 1

Add up all the parts in a selector chain to determine the total specificity. In case of a tie, the last selector takes precedence.

Of course, that comes with various edge-cases and caveats. One class will always override plain elements, no matter how many. More targeted selectors are given priority over inherited properties from parent selectors. And you can throw out all your calculations if someone used !important — that trumps everything.

like image 179
Miriam Suzanne Avatar answered Sep 22 '22 23:09

Miriam Suzanne


To understand the difference between inheritance and cascading let's understand both of them with example.

Inheritance is a way of propagating property values from parent elements to their children, let's have a very simple example here.

.parent{
font-size:20px;
line-height:150%;
}
.child{
font-size:25px;
}

From the above example, we are going to determine what the line-height of the child element will be. We all know that every CSS property must have a value, even if neither we, the developer nor the browser do specify it. In that case, there's no cascaded value, right? So when processing a certain property for a certain element, such as line-height the first question that the CSS engine asks is if there is a cascaded value, if so then of course, that's the value that's used. Now if there's no cascaded value then the next question is if the property can be inherited, that depends on each property, there are some properties that are inherited and others are not. In the case of line-height, that property gets inherited as we can see from the property specification.

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height enter image description here

So if a property is inherited, then the value of that property becomes the computed value of its parent element. It's very important to note that the value that gets inherited is not simply 150%, but the computed value. In this case, that's 150% of 20 pixels, which is 30 pixels. So the line-height of the child element will also be 30 pixels, not 150% of the 25-pixel font size. Now if it's a property that's not inherited like for example, padding, then the specified value will become the initial value which is also specific to each property. In the case of padding that's just zero pixels.

enter image description here

Now Cascading is the process of combining different stylesheets and resolving conflicts between different CSS rules and declarations when more than one rule applies to a certain element. Because as you probably already know a declaration for a certain style property like font size can appear in several stylesheets and also several times inside one single stylesheet.

If you want to read in detail about cascading in CSS just read my other answer about cascading.

What is the meaning of "cascading' in CSS?

like image 35
Lord Avatar answered Sep 24 '22 23:09

Lord