Hombre, a veces hay que abandonar unos segundos la teoría y ponerse a testear:
Código PHP:
<?php
if(isset($_GET['pp'])){
header("Content-type:text/css");
echo '
body{ background:#CCC;}
.pp{background:red;color:white;}
';
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function loadCss(css) {
if(document.getElementById('estilos'))
document.getElementsByTagName('head')[0].removeChild(document.getElementById('estilos'));
var x = document.createElement("link");
x.rel="stylesheet";
x.href=css;
x.id="estilos";
document.getElementsByTagName('head')[0].appendChild(x);
}
function agregarElementoconClasePP(){
var pp=document.createElement('div');
pp.className='pp';
pp.innerHTML='hola';
document.body.appendChild(pp);
}
function removeCss(){
if(document.getElementById('estilos'))
document.getElementsByTagName('head')[0].removeChild(document.getElementById('estilos'));
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input onclick="loadCss('?pp')" type="button" name="button" id="button" value="cargar hoja de estilo" />
<input onclick="removeCss()" type="button" name="button2" id="button2" value="borrar hoja de estilo" />
<input onclick="agregarElementoconClasePP()" type="button" name="button3" id="button3" value="agregar elemento con clase pp" />
</form>
</body>
</html>