Dynamically change CSS rules in JavaScript or jQuery

You jQuery .css() method to do that.

$('.red').css('color', 'purple');

For multiple rules:

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

When you add dynamic element in future to DOM by the way of append, just give those element some class or id and write CSS rules like above after appending them and they will applied for all dynamically created element.

Working sample

Note

Add dynamic rules is not a good solution in my point of view. Instead of the you can load some external CSS file.

But if you need something like dynamic rules add method then:

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

And for future use:

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

Working sample

You can inject style declarations into the DOM.

$("head").append('<style>.red { color: purple }</style>');