260 Customizing the user interfaCe <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; #myPanel { chrome-color: black; color: gray; } </fx:Style> <s:Panel x="26" y="30" title="Panel" width="98" height="124" id="myPanel" > </s:Panel> <s:Panel x="150" y="30" title="Panel2" width="98" height="124"> </s:Panel> Defining a Custom style for a state In the style definition we also have access to the states of com- ponents. For example, we can define the color of a button when it is clicked. In this case the corresponding state is down and we access it with a : character. s|Button:down { chrome-color: black; color: gray; } When providing this type of definition, we should carefully read the documentation. The compiler does not detect if you mistype a name, and, therefore, at runtime you will not get the expected result. external Css A CSS definition can also be provided as an external file. To create, just right-click on the project and select "New > CSS File." Provide a package (optional) and a name and write down your definition. See Figure 5.14.