Temani provided a very insightful answer that guided me in the right direction. After conducting some research, I am now confident in creating a more detailed and properly referenced response to my initial query.
Is it permissible to apply any valid CSS rule to any HTML element?
Absolutely. The CSS2.1 specification clearly states this fact: https://www.w3.org/TR/CSS2/about.html#applies-to (CSS3 being an extension of CSS2.1 continues to uphold this principle). It explicitly mentions:
All elements are considered to have all properties, although some properties may not affect certain types of elements aesthetically. For instance, the 'clear' property exclusively impacts block-level elements.
The statement All elements are considered to have all properties implies the freedom to set any property on any element.
The phrase Some properties have no rendering effect on some elements indicates that particular elements may simply overlook specific properties when displaying content (not necessarily rejecting inheritance).
Can any rule be inherited?
To address this question, let's refer to the CSS Values and Units Module Level 3 specification: https://www.w3.org/TR/css3-values/#common-keywords. According to this document:
All CSS properties can accept the CSS-wide keyword values as their sole property value component.
The essence of this statement is that any property has the ability to utilize inherit as its value, affirming a resounding yes to the inquiry. However, the crucial aspect lies in how the inherited value is determined, as previously highlighted by Temani.
How are inherited values calculated?
For an in-depth understanding of cascading and inheritance, one should delve into the CSS Cascading and Inheritance Level 3 specification: https://www.w3.org/TR/css-cascade-3/. This documentation articulates:
The inherited value of a property on an element corresponds to the computed value of the same property on the element’s parent.
Based on this guideline, here's a simplified outline of the process for determining the computed value of any property on any element:
Gather all declared values for a property on an element - encompassing pertinent and valid CSS declarations from developer style sheets, user agent style sheets, etc.
Evaluate the cascaded value - the prevailing value among all declared values (where rules are prioritized to determine a single victor).
If there is no cascaded value, resort to the inherited value for inheritable properties.
If the property isn't inherently inherited, default to the initial value. Each property adheres to an initial value per the specification (e.g., the initial font-size is medium; noteworthy that it's relative rather than absolute like 16px!).
At this stage, a property will possess a distinct value, even if it's relative, contingent upon other CSS properties (e.g., a percentage value hinges on an absolute value such as the parent's dimensions). Efforts are made to resolve the value to ensure clarity and readiness for inheritance.
It's essential to underline that akin to stipulating an initial value for each property, the specification also defines the procedure for deriving the computed value. MDN, for instance, outlines the computed value for font-size:
as stated, with relative lengths converted to absolute lengths
Thus, while medium remains unchanged, 1.2em transforms into something like 19.2px (considering the parent's font size is 16px).
The crux of the matter
The Cascading and Inheritance specification underscores that:
The computed value persists irrespective of whether the property applies (per the “Applies To” line). Nonetheless, some properties might alter their computation method based on applicability to the element in question.
Hence, every element boasts a computed value for every property, though not necessarily employing it (the used value, next in line after computed value, could be absent). Nevertheless, the computed value serves as the basis for inheritance.
In context of my SVG button demonstration:
- I unquestionably hold the authority to define
stroke and fill attributes for a <button>. While these attributes won't impact the button directly, they'll get transmitted to child elements as necessary.
- The subsequent SVG child elements will inherently acquire these attributes without explicit declaration.
- The computed values for
stroke and fill lack constraints, ensuring proper color inheritance (successfully validated!).