Javascript activating CSS

[niallsc]

Okay, so I am a javascript newb and I have a problem. I want my website to have different css for different browsers so what i have now is a check to see what browser is being used and depending on that browser i need to change what styles are used. this is what i have so far but it isnt working how can i get the css to change from javascript?

if (/Safari/.test(navigator.userAgent) ||/Chrome/.test(navigator.userAgent)){

  
 document.write("This browser lets my pics be awesome!<br>");
 document.write("<style type=text/css>
 .images{	
	float:left;
	color:#CDC0B0;
	margin-left:50px;
	margin-right:-20px;
	margin-top:10px;

	-webkit-transform:scale(1.0);
	-webkit-transition-duration: 0.5s;
	
}
.images:hover{
	-webkit-transform:scale(1.5);
	-webkit-box-shadow:0px 0px 40px #ccc;
}	 
.images .layer{
	width: 100%;
	height: 100%;
	background-color:#000;
	position: absolute;
	opacity:0.5;
	-webkit-transition-duration: 0.8s;
}
#image1:hover .layer{
	width:0%;	
}
#image2:hover .layer{
        height:0%;
}
#image3:hover .layer {
	height:0%;	
	margin-top:150px;
}
#image4:hover .layer{
	margin-left:150px;
	margin-top:150px;
	height:0%;
	width:0%;
}
</style>
}
");

else 
{
 document.write("This browser does not support my awesome pictures");
}