A área responsável por alterar o CSS de um componente fica na subaba Estilos, dentro da aba Propriedades do componente. Ao selecionar um componente no formulário, a aba propriedade exibe os campos de estilização para cada sub-componente, possibilitando também estilizar ao executar algumas ações, como passar o mouse por cima do componente ou ao selecioná-lo.

Figura 1 - Subaba estilos do componente Barra de navegação

Estilização de subcomponentes

Ao selecionar um componente, a aba estilos exibe campos para alterar o CSS dos seus subcomponentes e clicando no botão "…" a aba será redirecionada para o modo de edição low code de edição do CSS. É possível alterar entre o modo de edição low e high code, basta selecionar o botão de seleção Básico ou Avançado (Figura 2.1 e Figura 2.2).

Figuras 2.1 e 2.2 - Alteração da cor do plano de fundo no modo Básico e Avançado.

Estilização Inline

É possível realizar a edição de estilos de modo inline de qualquer elemento HTML, para isso, selecione o componente, clique no botão "..." da propriedade Estilo (Figura 2.3) para abrir o menu de estilização de componentes e ao final, clique no botão de confirmação (verde) para salvar.

Figura 2.3 - Edição de estilos inline

Estilização em eventos

No modo básico, cada subcomponente permite adicionar CSS específicos em alguns eventos específicos desse componente:

• Ao passar mouse: faz com que alteração ocorra quando o cursor do mouse passar por cima do componente.
• Ao focar: faz alteração ao selecionar o componente.

Figuras 2.4 - Alteração da cor de fundo do botão em momentos diferentes do componente