NOTE: Because the Q/A site is still new, I generally suggest searching the old Twine Forum when looking for possible solutions to questions that don't have existing answers here.
You can use a technique similar that used in the old Harlowe - How to change type-styles with variable... thread to achieve the effect you want, although I suggest modifying it slightly to suit your use-case.
1. Initialise your story variable within a startup tagged special passage.
If you don't already have one of these passages within your story then simply create a new passage (the name you give this passage is not important) and assign it a startup tag.
(set: $health to 4)
2. Create the CSS selectors to be used to style the three special health based use-cases.
Place CSS like the following within your story's Story Stylesheet area, it defines your base style plus three (sub)classes of it which will be used as needed.
tw-passage {
padding: 2em;
background-image: -webkit-linear-gradient(-45deg, beige, #c6c66c);
box-shadow: inset 0 0 2em black;
}
tw-passage.health-3 {
background-image: -webkit-linear-gradient(-45deg, green, #c6c66c);
}
tw-passage.health-2 {
background-image: -webkit-linear-gradient(-45deg, orange, #c6c66c);
}
tw-passage.health-1 {
background-image: -webkit-linear-gradient(-45deg, red, #c6c66c);
}
3. Use a footer tagged special passage to control which CSS (sub)class is used.
Create a new passage (I named mine Health Based Styling) and assign it a footer tag.
(if: $health is 3)[<script>$('tw-passage').addClass('health-3');</script>]\
(else-if: $health is 2)[<script>$('tw-passage').addClass('health-2');</script>]\
(else-if: $health is 1)[<script>$('tw-passage').addClass('health-1');</script>]
... the above code may look a little confusing but it basically breaks down to:
a. The (if:) related macros which determine which code to run based on the three special values of $health.
b. Using a jQuery locator function (the $('element-name') part) to access the tw-passage element.
c. Using the jQuery addClass() function to assign a CSS (sub)class to the located tw-passage element.
4. Change the value of the $health variable within your passages as needed.
(set: $health to 1)
5. Hide all visual output generated by the special passages used in points 1 and 3.
Place CSS like the following within your story's Story Stylesheet area, it uses CSS selector based on the type of the startup tagged passage and the name of the footer tagged passage to hide those passage's visual output.
tw-include[type="startup"], tw-include[title="Health Based Styling"] {
display: none;
}
note: If you gave the footer passage in point 3 a different name then you will need to alter the title part of the above CSS selector to be the same as that name.