Maintaining your website means to style every element present so it fits your style. But considering the fact that more often than not a single page can be built with hundreds of elements, then just thinking about styling every single one can be overwhelming. Luckily it doesn’t have to be the case when we consider that just like a family, widgets can inherit certain traits passed from parents to children.
Inheritance is a mechanism by which certain styles are passed from parents to their children and even further offsprings, as long as they don’t possess their own style. This allows you to set the one attribute to a parent and consequently to all of its children to save you time and work. However if an element has its own style, then it will take priority over the one imposed by their ancestor. You can view the complete list of relative widgets inside the widget tree and all of the ancestors of any given element at the bottom of the page in the widget hierarchy.
A green font color has been set for this area. There is a paragraph inside it, to which no additional style has been applied, so it also has a green color - this property was inherited from its ancestor (the Area widget).
This paragraph however was given a style of magenta font color. This property has been assigned to this element and not received from the parent, so these properties take precedence over others.
If there is a "collision" of properties (i.e. on the child and on the parent, the same property is applied, but with a different value - such as color), the property that was set on the child element takes precedence over the same property given on the parent element.
In a parent-child relationship, not all attributes are inherited between elements in the widget tree.
Here - you will find a full list describing the inheritance of attributes. We have included some of them below.
Inherited properties - passing from parent to child:
- color
- font-family
- font-size
- font-style
- font-weight
- text-align
Non-inherited properties - not passed from parent to child:
- background
- border
- margin
- padding
- width
- height
- position
- display
There are two methods on how you can make inherited styles in
BOWWE and one of those methods involves doing… nothing? Let’s look into this.
First method is to set the inherit value to a child element for the property that can be inherited
Select parent element (like an area widget).
Set a value you want to be inherited (we’ll choose font family).
Drop a Heading widget inside.
Set its font-family property to inherit value.
Now it should take the value you have set to the area and so will every other widget with inherited value you drop into this area. With this solution, you can simply change the font for the parent once and all of its children will inherit this new font, which quickens the website-making process.
As long as the widget doesn’t have a set value it will borrow the styles from the closest ancestor that has a set value, which means we can simply style a single, highest element once to apply it to all of the widgets. And this is exactly what
BOWWE is doing for you without you even noticing it. This is what the styles library is for.
Change styles of either Heading or Text.
Now any new Text or Heading will have those styles as well as any existing that weren’t changed.
❗ Important!
Styles from ancestors will only apply if the widget DOES NOT have the style. If we give a widget a style it will take the highest priority and overwrite any style from ancestors.
The biggest advantage of this practice can be seen with multiple instances of widgets that break the status quo of the page's design. Clustering them in a single area and applying the required style to the said area can really save you time, especially when this situation applies to tens or even hundreds of elements. This also impacts your Responsive Web Design (RWD) as having less code on your web page is a positive.
Now you know how the inherit property works!
