Overwriting CS with Javascript

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>The Ants in France stay mainly on the Plants</p>

CSS

p{
  font-family:helvetica;
  font-size:15px;
}

JavaScript

function overwrite_css(selector,properties){ 

	// selector: String CSS Selector
  // properties: Array of objects
  
  var new_css = selector + '{';
  
  for(i=0;i<properties.length;i++){
  
  	new_css += properties[i].prop + ':' + properties[i].value + ';';
  
  }
  
  new_css += '}';
	
	$('body').append('<style>' + new_css + '</style>');
  
}

overwrite_css('p',Array({prop: 'font-size', value: '22px'}));
overwrite_css('p',Array({prop: 'font-size', value: '11px'}));

// ends on 66px after running all 3. comment out lines to see changes