Header box in a webpage

Question

I know how to make an image fixed position with CSS but I have no idea how to actually create a header using HTML.

I've attached an image, I'd like to be able to still edit things into the header,

Any help would be greatly appreciated because I can never do this.

Here is how I'd do it if it were an image:

<style>
.header
{
position: fixed;
top: 0%;
left: 0%;
right: 0%
z-index: 1;
}
</style>

<img src="IMAGE URL" class="header" width="100%" height="150px">

The image would then be pinned, How do I make it so there is a solid colour box over the top of everything.

Thanks.

Answer 1

<style>
.header
{
background-color: red;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 150px;
z-index: 1;
}
</style>

<div class="header">
  Some Text
</div>