Can't get a handle on styles in a included text file - text

Question

I am using basiclightbox to show text from an external txt file.
It works, but I can't apply styles and size to the result.
I've done this:
document.querySelector('button.html1001').onclick = () => {
basicLightbox.create(`
</div>
<h1><p>
<object data="test.txt"></object>
</p></h1>
</div>
`).show()
}
and
<h1><p>
<object data="test.txt"></object>
</p></h1>
and tried including styles in the text file, but this is the result of the popup:
<h1><p> <br><br><br>
<br>
Testing text for testing
<br>
</p><h1>
It pops up with a black background and no style applies to the text.
Anyone have any ideas how to apply styles and background color to this?
Thanks in advance.

Answer 1

Figured it out.
$(document).ready(function() {
$("#obj").width($("#cont").width());
$("#obj").height($("#cont").height());
});
div#cont {
height: 600px;
width: 900px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont">
<object id="obj" width="400" height="400" data="test.html">
</object>
<div>

Answer 2

Figured it out, was a style problem was problem with the lightbox code.
Have the code working with just:
<object data="test.html">
But I still can't figure out how to change the size of the popup box.
Tried a bunch of stuff:
<object data="test.html" width="400" height="400">
and
<div id="cont">
<object id="obj" width="" height="" data="test.html"></object>
<div>
and
<div>
<object width="600" height="900" data="test.html"></object>
<div>
CSS
div {
height:600px;
width:900px;
}
and some others, no luck.