Trabalhando com CSS no Thymeleaf

Até agora, nossa aplicação Spring Boot já responde a requisições HTML, mas a aparência dela ainda deixa a desejar. Para transformar essa página simples em algo mais agradável, vamos aprender como incorporar CSS à aplicação. O foco aqui não é dominar o CSS, mas sim entender como integrá-lo corretamente ao nosso projeto Spring Boot.

toc

Incorporando o CSS na aplicação

Os arquivos CSS são responsáveis por definir as regras de estilo que serão aplicadas ao seu HTML. Eles ajudam a transformar uma página sem graça em uma interface visualmente mais atraente e organizada. Além disso, recursos como imagens e ícones também fazem parte dos arquivos estáticos, que não sofrem alteração em tempo de execução. Em projetos Spring Boot, esses arquivos devem ser colocados dentro da pasta resources/static. Para manter o projeto organizado e seguir as convenções, crie uma pasta chamada css dentro da pasta static. Assim, a estrutura do projeto ficará parecida com:

1
src
2
└── main
3
    └── resources
4
        └── static
5
            └── css
6
                └── style.css

Criando um CSS Simples

Como exemplo, vamos criar um arquivo CSS simples que altera apenas a cor de fundo da nossa página. No arquivo style.css, adicione o seguinte código:

1
body {
2
    background-color: #f0f8ff; /* Um tom de azul claro */
3
}

Essa regra define que todo o conteúdo da página terá um fundo com a cor azul claro, deixando o visual mais suave e agradável.

Incorporando o CSS no HTML

Após criar o arquivo CSS e colocá-lo na pasta correta, precisamos informar ao HTML que ele deve utilizar esse arquivo de estilos. Para isso, usamos a tag <link> dentro do <head> do nosso HTML. Essa tag possui dois atributos importantes:

Como estamos utilizando o Thymeleaf, podemos usar a link expression para criar links relativos. Essa expressão utiliza a sintaxe @{}, que automaticamente ajusta o caminho relativo à pasta static. Assim, a inclusão do nosso arquivo style.css fica assim:

1
<link rel="stylesheet" th:href="@{/css/style.css}">

Com essa simples linha de código, o Spring Boot sabe onde encontrar o nosso CSS e aplica os estilos à página. Depois de realizar essas alterações no arquivo index.html, abra a aplicação e acesse http://localhost:8080. Você verá que o fundo da página agora possui um tom azul claro, demonstrando que o CSS foi incorporado com sucesso.

Manipulando o atributo class do HTML

O Thymeleaf oferece diretivas específicas para manipulação de classes CSS em elementos HTML, sendo elas: th:class e th:classappend.

Usando th:class

O atributo th:class é utilizado para definir ou substituir completamente as classes CSS de um elemento HTML com base em expressões Thymeleaf. Ele é particularmente útil quando você precisa aplicar classes condicionalmente, dependendo do estado da aplicação ou de dados dinâmicos.

Exemplo de uso:

1
<div th:class="${usuario.ativo ? 'ativo' : 'inativo'}">
2
    Conteúdo do div
3
</div>

Neste exemplo, a classe CSS do div será ativo se a propriedade usuario.ativo for verdadeira, e inativo caso contrário. O th:class substitui qualquer classe existente no elemento, então, se o div já tivesse uma classe definida, ela seria substituída pela nova classe.

Usando th:classappend

Diferente do th:class, o atributo th:classappend não substitui as classes existentes, mas sim adiciona novas classes ao elemento, preservando as que já estão presentes. Isso é especialmente útil quando você deseja adicionar classes condicionalmente sem perder as classes padrão ou outras classes dinâmicas que já foram aplicadas.

Exemplo de uso:

1
<div class="base" th:classappend="${usuario.ativo ? 'ativo' : 'inativo'}">
2
    Conteúdo do div
3
</div>

Neste caso, se usuario.ativo for verdadeiro, a classe ativo será adicionada ao div, resultando em class="base ativo". Se usuario.ativo for falso, a classe inativo será adicionada, resultando em class="base inativo". A classe base é preservada em ambos os cenários.