Q:

Can't get style sheet to work

I am trying to create my first webapp using google apps script.  I am trying to follow the examples but it is not working.  I created a stylesheet.html tab along with my main html page.  But none of my formatting is working. I thought google appended the files together.  FYI, my styles work fine if I include them at the bottom of the main page. 
This is my code.gs page:
function doGet() {
  return HtmlService.createHtmlOutputFromFile('frontpage')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
 } 

This is my main page called frontpage.html :
<!DOCTYPE html>
<html lang="en">

<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>

<!--  google scripts says to not include header & body tags ?? -->

<meta charset="utf-8">
    <title>Borah Physics</title>   <!-- google syas not to use title tag  need another way to set title.-->

<h1><div style="text-align:center">Physics Homework</div></h1>

<!--List of available assignments.  This needs to be updated as assignments are added.
   Add assignment name and the ssID of the spreadsheet containing the questions.
   when clicked need to return value (ssid) as sheetID.-->

<select id="assignment">
    <option sheetID="1ajedscAjuXDsUOcQRzru5-bhUIluGn3fPPsoN-Ww5wU">Kinematics 1</option>
    <option sheetID="10mCGpLRwv8ETFbW3RwisI45s_x3-ZItatzq_vU0wacs">Dynamics</option>
</select>

<!--Question should be string variable activeQuestion  It will get updated when the question number changes.-->

<div id="question">
<br>
<br>
Question Here    
<br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.
<br> <br>
</div>

<!-- If question has an image it will go here.-->
<div id="qImage">
Along with image (if needed)
<br>
</div>

<!-- This is the user inputed answer.  It needs to be recorded in the response sheet of the spreadsheet and
   compared to the correct answer.  (in the comparison we need to add a within x% variable so if the answer
   is close it is counted as correct. This accounts for thinks like g=10 m/s^2 vs 9.8 m/s^2.-->

<div id="answer">
  <label>Answer:</label>
    <input type="text" name="answer"/>
    <input type="Submit" value="Submit"/>
<br>
<br>
</div>

<!-- bottom navigation list-->

<ul id="nav">                                                             
    <li><a>  </a></li>
    <li><input type="button" onclick="previous()" value="Previous"></li>   <!-- goes to previous question  (calls previous function)-->
    <li><a >&nbsp;Correct: 4/12 </a></li>                                 <!-- need to insert variables #correct & total # questions-->
    <li><input type="button" onclick="next()" value="Next"></li>          <!-- goes to next question   (calls next function).-->
    <li><a>  </a></li>

</ul>

and finally my stylesheet.html page  
        <style>

    #assignment{
      width: 20%; margin: 10 ;
      position: absolute;
        right: 10px;
    }

   #question {
      width: 90%; margin: 0 auto;
    }

    #qImage{
     width: 90%; margin: 0 auto;  
    }

    #answer {
          width: 90%; margin: 0 auto;
    }

    #nav {
        text-align: justify;
        min-width: 400px;
    }
    #nav:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
    #nav li {
        display: inline-block;
    }

    </style>

My output shows the  at the top of the page as if it were text.  So I am not connecting the style sheet to the frontpage. 
I have not even attempted to understand functions or javascript yet.  Lots to learn.  (This is a physics homework app  I hope to get working before school starts!)  All help is appreciated.  Any tutors out there?
thanks.

A:

Change createHtmlOutputFromFile to createTemplateFromFile in the doGet() function.
Should be:
return HtmlService
  .createTemplateFromFile('frontpage')
  .evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);

If a file has a scriptlet in it, it's a template.  Your frontpage file has a scriptlet in it.  The scriptlet is:
<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>

You can also call a server function from a scriptlet instead of using HtmlService directly inside the scriptlet.

