1. Linking Static CSS


<!-- th:href with @{} URL expression -->
<link th:href="@{/css/main.css}" rel="stylesheet"/>

<!-- Without server: renders as -->
<link href="/css/main.css" rel="stylesheet"/>

<!-- With context path (e.g. /app): renders as -->
<link href="/app/css/main.css" rel="stylesheet"/>

Static files live in: src/main/resources/static/css/main.css

2. Linking Static JavaScript


<!-- th:src with @{} URL expression -->
<script th:src="@{/js/actions.js}"></script>

<!-- Parameterised URL (e.g. with version query param) -->
<script th:src="@{/js/actions.js(v=1.0.0)}"></script>

Static files live in: src/main/resources/static/js/actions.js

3. Inline JavaScript Variable Injection


<script th:inline="javascript">
    // /*[[${expr}]]*/ syntax – Thymeleaf replaces at render time
    // The 'default' value after it is the natural template fallback
    var courseName = /*[[${courseName}]]*/ 'Default Course';
    var totalCount = /*[[${totalCount}]]*/ 0;
</script>

<!-- Rendered output: -->
<script>
    var courseName = "Java Web Programming";
    var totalCount = 5;
</script>

4. Interactive Demo

The buttons below use values injected from the server into JavaScript:

5. Table with Dynamic CSS Classes

IDNameScoreGrade