How Do I: CSS to work?

Question

I have an application.  I put a control to switch between high contrast (background of white) and normal contrast (background of light brown/grey).
I tried this with using CSS and switching between two style sheets.  Results were variable - sometimes they worked, sometimes they didn't.  I've got it more stable now, but have a problem.  I switch the background to white on the Text selector, but two of the fields are in foreground color of white.  So I changed it to green in the normal CSS and red in the high contrast CSS.  The red never shows up.
Further, I'd like to remove all color from the background in those two fields when the normal CSS is used.
1) How do I get the font color to change?
2) How do I get the background color to become transparent?
CSS normal:
.headingText {
    color: #00ff00;
    font-family: Ariel;
    font-weight: bold;
(only green for testing - will become white when it works)
CSS high contrast:
.headingText {
    color: #ff0000;
Text objects:
        <mx:VBox id="headerText"
            x="6" y="40"
            width="50%">
            <mx:Text id="headerSNAPText"
                text="Supplement Nutrition Assistance Program"
                fontSize="15"
                styleName="headingText"/>
            <mx:Text id="headerIDHSText"
                text="Illinois Department of Human Resources"
                fontSize="18"
                styleName="headingText"/>
        </mx:VBox>

Answer 1

It would seem that if you reset css by selecting a different one that this different one doesn't propagate to the components of an application.  To get around this problem, I added "setStyle"s to the function that adjusts the contrast.  This also allowed me to remove the background color.
This was needed as the accessible part required high contrast.  So I set the background to white for the black text.  But when you go back to normal contrast, I had to remove the property completely so the underlying image would show again.