Not understanding CSS

Question

Hello all,
I'm trying to get my head around using CSS to style my application, but I think I'm missing something, as it's is surprisingly difficult at the moment. What I've got just now is my CSS with a few simple classes defining fontSize etc, and to apply these I need to load the stylesheet, apply the stylesheet to each text element I want to use it on, and use the htmlText to give a specific <span> with a class.
There are a few things I'd like to be able to do:
1. Set a global font, so I don't need to attach the stylesheet to every single text element I create.
2. Is it really necessary to use htmlText and a <span class="whatever">...</span>, to apply a specific CSS class? Lets say I have two TextField elements in a container and I'd like to style them differently, this is the only way I can see of doing it with CSS.
All of the examples I can find, refer to using styleName on the element (although TextField doesn't appear to have this property), and applying a specific CSS class using that.
I think I'm just getting myself in a bit of a muddle (coming from an HTML/CSS background), and any help in straightening this out would be hugely appreciated.
Regards,
Allan

Answer 1

Hello all,
Further to my question, I've been trying to work how to to answer it, and have come up with a part way solution - but still not fully understanding what is going on. Thanks to the 'Flex 4 beta 2 in a week' videos I discovered the 'global' selector for CSS in Flex, so setting this up I thought would be nice and easy, but the styles from the global definition don't appear to be applied to my custom component.
What I have is a component which simply adds a TextField to the stage using AS and, for point of comparison, I've got a spark Label which is added to the stage using MXML. The style is correctly applied to the Label, but not my TextField as can be seen in a screenshot: http://www.sprymedia.co.uk/media/misc/flex4_css.png .
I can't understand why the global selector would not apply to my component. My CSS looks like this:
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
@namespace cx "components.*";
global
    fontFamily: Verdana;
    fontSize: 26;
color: #ffffff;
Can anyone offer a suggestion on how to make the global selector apply to my component's TextField as well?
Thanks,
Allan