Inheritance in CSS in Flex4 or FB

March 9th, 2011 by aabhaanjan

Important Points :

1.       If we set an inheritable style property on a parent container, its children inherit that style property.

For example, if you define fontFamily as Times for a Panel container, all children of that    container will also use Times for fontFamily, unless they override that property.

2.        If  we set a noninheritable style on a parent container, only the parent container uses that style; the children do not use that style.

3.       In general, color and text styles are inheritable, regardless of which theme they are in (Spark or Halo) or how they are set (by using style sheets or the set Style() method).

4.       The following are exceptions to the rules of inheritance:

a) If we use the global selector in a CSS style definition, Flex applies those style properties to all controls, regardless of whether the properties are inheritable.

b)      The values set in type selectors apply to the target class as well as its subclasses, even if the style properties are not inheritable.

For example, if you define a Group type selector, Flex applies all styles in that selector to Group and VGroup controls because VGroup is a subclass of Group.

5.       We should avoid using type selectors for commonly-used base classes like Group.

Why ? Group is a class that Spark skins are based on. Setting styles on the Group type selector might cause unexpected results because the skins will have styles applied that we might not oridinarily expect to apply.

Example :


<?xml version=”1.0″ encoding=”utf-8″?>









@namespace s “library://”;

@namespace mx “library://”;

s|Group {





<s:Button label=”This Button is in a VGroup and its label is yellow.”/>

<s:Label text=”This Label is in a VGroup and its text is yellow.”/>


<s:Button label=”This Button is not in a Group, but it is still yellow.”/>

<s:Label text=”This Label is not in a Group, but it is still yellow.”/>