Até então nós temos uma aplicação que responde HTML, mas ela não está muito bonita. Vamos adicionar um pouco de CSS para deixar ela mais apresentável. O nosso foco aqui não é trabalhar o CSS em si, mas sim como incorporá-lo na nossa aplicação, por isso vamos utilizar uma biblioteca de CSS pronta que já traz alguns estilos prontos para nós, o Pico.css https://picocss.com/.
Os arquivos CSS são arquivos que contém as regras de estilo que serão aplicadas ao código HTML. Códigos CSS, imagens, logos, etc são considerados arquivos estáticos - não sofrem alteração em tempo de execução - e por isso devem ser colocados dentro da pasta resources/static do nosso projeto.
Para deixar mais organizado e seguirmos as convenções vamos criar uma pasta css dentro da pasta static e colocar o arquivo CSS lá dentro. O arquivo CSS que vamos utilizar é o pico.min.css que pode ser baixado no site da biblioteca.
Após colocar o arquivo na localização correta precisamos avisar o HTML que queremos incorporar o arquivo CSS. Para isso utilizamos a tag link. A tag possui dois atributos, rel com o valor stylesheet que no caso de arquivos CSS sempre vai ser esse valor e href com o caminho para o arquivo CSS.
No caso do caminho do arquivo temos diferentes opções, as mais comuns são os caminhos absolutos e os caminhos relativos. O caminho absoluto é o caminho completo para o arquivo, como por exemplo C:/Users/usuario/projeto/src/main/resources/static/css/pico.min.css, como você já deve ter notado não é uma boa ideia utilizar esse tipo de caminho, pois ele é específico para um computador e não vai funcionar em outros computadores, logo não vai funcionar quando a aplicação estiver online.
Por outro lado o caminho relativo como o próprio nome diz é relativo a alguma coisa. Como essa coisa pode mudar dependendo do ponto em que se encontra na aplicação, o Thymeleaf provê o que ele chama de link expression.
Essa expressão de link é um mecanismo que permite ao desenvolvedor criar links relativos dentro de uma aplicação e deixar o Spring controlar o contexto que esse link vai ser usado.
A expressão de link utiliza a sintaxe @{}. Dentro das chaves você deve adicionar o caminho do arquivo CSS porém sabendo que o caminho relativo que será usado é a pasta static, então o caminho completo fica @{/css/pico.min.css}. Do mesmo jeito que as expressões de variáveis, as expressões de link também vão ser usadas dentro de atributos HTML específicos definidos pelo Thymeleaf, nesse caso o atributo th:href.
1 <link rel="stylesheet" th:href="@{/css/pico.min.css}">Faça a alteração no arquivo index.html e veja o resultado no navegador. O CSS foi incorporado com sucesso e a página está com um visual mais apresentável.