CSS In Apps Script Dialog Box

I'm not a web developer and I've only used CSS once in the past. What is the process for using CSS? Is this even possible? var pointsSheet = SpreadsheetApp.openById('1o8_f063j1jYZj

Solution 1:

EDIT: This answer is for the now deprecated UIApp service which was deprecated in the year 2014.

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.

Solution 2:

"Templated HTML" can be used to include a separate CSS file.

The CSS can be put into a separate Apps Script HTML file. CSS is technically just a <style> tag in HTML. So, putting your CSS into an HTML file will display it in the code editor correctly. The HTML File with the CSS can be included 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