1 Reply Latest reply on Mar 17, 2009 12:50 AM by cluebcke

    Container-specific CSS? Governing CSS scope.

    Phrankie Level 1
      I think I'm just missing an essential concept regarding CSS in Flex.

      Is it possible to effect the style of all mx: elements (for instance all Labels) ... but only within the scope of a specific container? (Then I could have a number of containers, each with its own Label style as defined in a CSS declaration.)

      In other words, just as a CSS ID Selector allows us to style HTML links, but specifically within the scope of a DIV.

      Just occurred to me ... is it a matter of moving the CSS style declaration into the mx container, making it is a local rather than a global style declaration? If not, it must be a matter of linking the style to the container ID. Right?

      Any examples greatly appreciated!

      Thanks, Phrankie
        • 1. Re: Container-specific CSS? Governing CSS scope.
          You can try style declarations within your container, but I would take the developer's guide to heart when it says this:

          "Note: You should try to limit the number of style sheets used in an application, and set the style sheet only at the top-level document in the application (the document that contains the <mx:Application> tag). If you set a style sheet in a child document, unexpected results can occur."

          (see http://livedocs.adobe.com/flex/3/html/styles_05.html#165272 )

          It may be that this only applies to external (source="...") stylesheets, and not inline definitions. The guide is unclear so I've posted a comment requesting clarification.

          You wouldn't use ids; in fact id selectors are not supported in Flex. Your options are to either use classes, which you define the usual way and then (because "class" is a reserved word) associate with your component with the styleName property, or you just set styles on the enclosing container itself when you define it in MXML.

          You will need to be aware of the style inheritance rules--children in your container won't necessarily inherit every style property you set on the container itself.

          I highly recommend you plow through the "Using Styles and Themes" section of the dev guide ( http://livedocs.adobe.com/flex/3/html/styles_01.html). It's a lot of content and ambiguous in some areas, but it will clear up a lot of your uncertainties.