Tag issues in CSS files in a JSF2 project

Question

Greetings to all,

I’d like you to look down at the image;

You may notice that there is a blue top with a Horizontal menu, it is attached to this tag below in XHTML;

<header>

<div style="float: right; margin-right: 110px">
    <span
        style="float: left; height: 30px; line-height: 30px; margin-right: 60px">
        Olá usuário! </span>

    <h:form style="display: inline-block">
        <p:menubar styleClass="menu-sistema">
            <p:submenu label="Cadastros">
                <p:menuitem value="Usuários" />
                <p:separator />
                <p:menuitem value="Empresa" outcome="/empresa/CadastroEmpresa" />
                <p:menuitem value="Clientes" outcome="/cliente/CadastroCliente" />
                <p:menuitem value="Categorias" />
            </p:submenu>
            <p:submenu label="Pesquisa">
                <p:menuitem value="Pesquisar Clientes" outcome="/cliente/PesquisaCliente"/>
                <p:menuitem value="Pesquisar Empresas" outcome="/empresa/PesquisaEmpresa" />
            </p:submenu>
            <p:submenu label="Tarefas">
                <p:menuitem value="Adicionar Tarefas" />
            </p:submenu>
            <p:menuitem value="Sair" />
        </p:menubar>
    </h:form>
</div>
<div style="clear: both"></div>

</header>

And with this configuration in CSS

header {
    padding: 5px 0px;
    margin-bottom: 20px;
    height: 40px;

    background-color: #4169E1;
    color: #fff;

    box-shadow: 0px 2px 2px #ccc;
}

There’s nothing wrong with XHTML and CSS, but I’m facing a strange problem.

I have always made web pages in my academic projects using CSS with HTML, but I put the CSS settings in a JSF2 project I start to face CSS configuration problems, I created the tags s in the XHTML page with CSS and it works nothing, I’ll give you an example, I’ll take the same example shown earlier and modify it, we know that when we put in the HTML page as

<div id="topo"></div>

on the CSS page will be

 #topo

So far beauty, I’ll replace the tag with and it’ll stay that way.

<div id="topo">

<div style="float: right; margin-right: 110px">
    <span
        style="float: left; height: 30px; line-height: 30px; margin-right: 60px">
        Olá usuário! </span>

    <h:form style="display: inline-block">
        <p:menubar styleClass="menu-sistema">
            <p:submenu label="Cadastros">
                <p:menuitem value="Usuários" />
                <p:separator />
                <p:menuitem value="Empresa" outcome="/empresa/CadastroEmpresa" />
                <p:menuitem value="Clientes" outcome="/cliente/CadastroCliente" />
                <p:menuitem value="Categorias" />
            </p:submenu>
            <p:submenu label="Pesquisa">
                <p:menuitem value="Pesquisar Clientes" outcome="/cliente/PesquisaCliente"/>
                <p:menuitem value="Pesquisar Empresas" outcome="/empresa/PesquisaEmpresa" />
            </p:submenu>
            <p:submenu label="Tarefas">
                <p:menuitem value="Adicionar Tarefas" />
            </p:submenu>
            <p:menuitem value="Sair" />
        </p:menubar>
    </h:form>
</div>
<div style="clear: both"></div>

</div>

And in CSS it will look like this;

#topo {
    padding: 5px 0px;
    margin-bottom: 20px;
    height: 40px;

    background-color: #4169E1;
    color: #fff;

    box-shadow: 0px 2px 2px #ccc;
}

Actually it was supposed to keep working, but that’s not what happens, see what happened;

It just didn’t work.

I wonder if there is a different way to program XHTML pages in JSF2 projects for CSS

By the changes I made it was to keep working, because I just changed the tag name, nothing else.