The below code snippet explains how to dynamically define a CSS class or rule in order to style HTML page using jQuery
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
$("#demo").live("click", function () {
$('html > head').append($('<style type = "text/css">body{background-color:yellow;}</style>'));
});
</script>
<input type = "button" value = "Demo" id = "demo" />
Explanation:
On the click of the HTML input button with ID demo an HTML <style> tag is appended to the HEAD section of the HTML page using jQuery. As soon as the tag is appended it applies the defined CSS style to the respective element that it targets. Here it changes the background color of the HTML<body> tag.
Demo: