Custom Styles Applying to page.html.twig but not html--front.html.twig I'm new to drupal and am trying to make my own theme. Currently I have a page.html.twig for my pages, and my css styles show up fine. However, when I added a html--front.html.twig file, cleared the caches, and checked the homepage, there were no styles, even ones that apply to elements that are in every page (such as body). The code in html--front.html.twig is identical to the code in page.html.twig. I checked the console and the front page is successfully templating from html--front.html.twig. Every other page works fine. I just don't see why it is now ignoring all my styles for the front page. Here is the code for both pages:

&lt;header role="banner"&gt;
    {{ page.header }}
  &lt;/header&gt;
&lt;div class="layout-container"&gt;
  &lt;main role="main"&gt;
    &lt;a id="main-content" tabindex="-1"&gt;&lt;/a&gt;{# link is in html.html.twig #}

    &lt;div class="layout layout-content"&gt;
      {{ page.content }}
    &lt;/div&gt;

&lt;/div&gt;
The code in html--front.html.twig is identical to the code in page.html.twig


That's your problem - those are two different templates, it doesn't make sense for them to have the same content.

html.html.twig contains (or more accurately, renders) page.html.twig, plus the &lt;head&gt; tags and all that lives within, the footer of the document, and so on. If you copied page.html into html.html, that explains why you don't see styles any more - your &lt;head&gt; is gone.

It's perfectly valid to have html--front.html.twig and page--front.html.twig, or some other combination, but the html template needs to contain the outer part of the document, and the page template needs to contain the inner part.