CSS with Google App Script

Question

I'm pretty new to writing Google App Scripts. The script I'm working on right now is simply pulling data from a google sheet. It's pretty ugly and I was told I can make it much nicer by using CSS. I've read that your CSS file can be hosted on Google Drive and accessed from there through the script. I'm not a web developer and I've only used CSS once in the past. What is the process for all of this? Is this even possible? My overall question would be "how do I start this process?" My script is below just in case you want to see it:

var pointsSheet = SpreadsheetApp.openById('1o8_f063j1jYZjFEnI_P7uAztpnEAvQ6mc3Z1_Owa69Y');

//creates and shows an app with a label and password text box
function doGet() {
  var app = UiApp.createApplication();

  var mygrid = app.createGrid(1, 2);
  mygrid.setWidget(0, 0, app.createLabel('Password:'));
  mygrid.setWidget(0, 1, app.createPasswordTextBox().setName("text"));

  var mybutton = app.createButton('Submit');

  var submitHandler = app.createServerClickHandler('getResults');
  submitHandler.addCallbackElement(mygrid);
  mybutton.addClickHandler(submitHandler);

  var mypanel = app.createVerticalPanel();
  mypanel.add(mygrid);
  mypanel.add(mybutton);
  app.add(mypanel);

  return app; //UNCOMMENT WHEN DEPLOYING APP
}

//obtains data based on password entered by user and outputs their info
function getResults(eventInfo) {
  var app = UiApp.getActiveApplication();
  var password = eventInfo.parameter.text;

  var passwordCheckRange = pointsSheet.getRange("B34:C34").getValues();

  if (passwordCheckRange == null) {
    return app;
  }

  var name;
  var studentFound = false;
  for(var i = 0; i < passwordCheckRange.length; i++) {//obtains the name of the student
    if(passwordCheckRange[i][1] == password) {
      name = passwordCheckRange[i][0];
      studentFound = true;
      break;
    }
  }

  var studentRecordRange = pointsSheet.getRange("B3:CZ29").getValues();
  var headingRange = pointsSheet.getRange("B1:CZ2").getValues();

  if (studentRecordRange == null) {
    return app;
  }

  var studentRecord;
  for(var i = 0; i < studentRecordRange.length; i++) {
    if(studentRecordRange[i][0] == name)
      studentRecord = studentRecordRange[i]; //gets the row of the student (B? to AY?)
  }

  var stringRecord = "";
  for(var i = headingRange[1].length-1; i >= 7; i--) {
    if ((studentRecord[i] == "" || studentRecord[i] == "STOP" || studentRecord[i] == "ALLOW") && headingRange[0][i] != "")
      stringRecord += headingRange[1][i] + ": " + headingRange[0][i] + "XP" + "<br>";
  }

  var mygrid = app.createGrid(2, 1);
  mygrid.setWidget(0, 0, app.createLabel('INCOMPLETE CHALLENGES'));
  mygrid.setWidget(1, 0, app.createHTML(stringRecord));

  var mypanel = app.createVerticalPanel();
  mypanel.add(mygrid);
  app.add(mypanel);

  return app;
}

Answer 1

You can put your CSS in an Apps Script HTML file, then include the HTML File with the CSS in your main HTML file. In the Apps Script HTML file, put your CSS inside of <style> tags.

<style>

.bigHeader {
  color:#808000;
  text-align:center;
  font-family:"Times New Roman";
  font-size:50px;
  background-color:#66CDAA;
  margin-left:1%;
  }

</style>

Then in your main HTML File, put in a scriptlet tag:

<?!= include('Name_Of_HTML_File_With_CSS'); ?>

In your main .gs code file, you need a function named include

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
};

Also see this stackoverflow question: Google app script : Separating HTML and CSS

Answer 2

What I do is,
1. In the same project I create another script file and name it as CSS.gs
2. My CSS.gs will be having following lines,

var css={};
css.Labels = { fontFamily:'Verdana', fontSize:'12px', width: '100', marginTop: '5'};
css.Inputs = { fontFamily:'Verdana', fontSize:'12px', width: '150'};
css.TextArea = { fontFamily:'Verdana', fontSize:'12px', width: '900', height: '50'};
css.PutBorder = {borderStyle: 'solid'};

3. And I will apply these styles on to app by using .setStyleAttributes()

eg::app.createLabel('Password:').setStyleAttributes(css.Inputs)

There is setStyleAttribute and setStyleAttribute's'. Please dont get confused. Not all css attributes are supported in GS. You can find out the list of supported styles here.