13 Aug 2007
19 Mar 2012
Link to this post
That's because of the loading order. This script needs to be executed before the .CSS (other wise the body won't have the extra class yet). And since the snippet is jQuery, jQuery needs to be loaded prior to that.
So you first load jQuery, then load the script (set it to run at the head) and use the CSS rules in your main.css. Or set the script to run before the closing tag and add a styling widget onto the page and define the css rules on the widget.
The option script at the bottom runs faster because it doesn't halt page execution, the option with script at the top is 'cleaner' from a developer/maintenance perspective. so basically its up to you what works best...