I’m pretty sure you need to set the headers for each HTTP response but browsers are weird and don’t always follow spec, so feel free to chime in if you have more information. From MDN:
The way that responses are distinguished from one another is essentially based on their URLs:
URL
Response body
https://example.com/index.html
<!doctype html>...
https://example.com/style.css
body { ...
https://example.com/script.js
function main () { ...
So clearly it expects each of your requests to set its’ own cache control header. And if you read RFC9111:
There’s no mention of special handling for an Index page headers cascading to child elements. The assets your HTML page loads could be from a completely different server like <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> and that CDN would want to be able to control the caching headers on their side. HTTP doesn’t give a rip what type of content it’s transferring for the most part (though browsers do, obviously!).
In summary: add headers to all of your HTTP responses where you want to control caching.