Templavoila ignores the stuff that you've put in the header of your HTML template by default. If it needs to include lines, you'll have to configure that.
So, you're going to make sure that the line that includes the CSS file will be automatically included when you use the template you have created. This also can be done with Typoscript, which probably will be your choice in the future, as you have more control on the position of the CSS file in the header, in case you use more than one CSS file. Moreover, when updating your template, you will have to re-set the CSS file again.
Anyway. We have one CSS file now. And we're going to include it with Templavoila. Click on "Templavoila", click on "Storage folder" and click on the "Update mapping" button:
Next, click on the "Header parts" tab. Check the box which indicates the line that includes the CSS file. Click on "Set". Click on "Save and return":