<style>
span.on {color:black;cursor:pointer} /*font-weight:bold*/
span.off {color:gray;cursor:pointer} /*font-weight:normal*/
</style>
<script>
$(function(){
$("#sa").wrap("<label for=l1></label>");
$("#sb").wrap("<label for=l2></label>");
$("#sc").wrap("<label for=l3></label>");
$(":radio[name=rad2]").click(function(){
$("#head1").css("text-align",this.value);
$("#l1").change(function(){
$("#sa").css("color","black");
$("#sb").css("color","gray");
$("#sc").css("color","gray");
})
$("#l2").change(function(){
$("#sa").css("color","gray");
$("#sb").css("color","black");
$("#sc").css("color","gray");
})
$("#l3").change(function(){
$("#sa").css("color","gray");
$("#sb").css("color","gray");
$("#sc").css("color","black");
})
})
})
</script>
<b>H1-Align:</b>
<input id=l1 name=rad2 type=radio value=left>< span class=off id=sa> Left< /span>
<input id=l2 name=rad2 type=radio value=