css no se aplica a document.write text

Estoy escribiendo texto en una página usando document.write para una extensión de Chrome, pero el CSS personalizado asociado no se aplica:

<!DOCTYPE html>
<html>
<head>
    <title>TITLE GOES HERE</title>
     <link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>

<body>
     <script type="text/javascript">
        ...
        function showFolder(folder) {
            console.debug('FOLDER: '+folder.title);
            document.write('<p>'+folder.title+'<br></p>');
        }
    </script>

</body>
</html>

El CSS es simple, solo para depurar:

p {
color: red;
}

Puedo hacer que funcione si pongo el enlace de la hoja de estilo dentro de la función showFolder, pero esa no puede ser la forma correcta de hacerlo. Estoy aprendiendo jscript / CSS sobre la marcha, por lo que la respuesta es probablemente algo correctivo. ¿El problema está en el jscript, el CSS o ambos?

Respuestas a la pregunta(3)

Su respuesta a la pregunta