Despite the documentation, it is quite well possible to use style sheets in a Google Apps Script UiApp.

The documentation of Google Apps Script is quite clear: “… there is no way to use custom style sheets in UiApp.”. This is mentioned in relation to the stylename methods, such as setStyleName(). However, most elements in the UiApp have the  setStyleAttributes() method. This accepts an object with style attributes, e.g.

label.setStyleAttributes({background: "black", color: "green"});

This is how you can assign style information to an element.

The essence of a style sheet is to separate the formatting from the content and the program logic. Separate style sheets make the script more readable and enable you to change the appearance and layout of all pages in a UiApp, just by editing one single file.

In Google Apps Script, you can realize this by setting the style attributes using named objects, and define these objects in a separate file. The following example shows how this works.

In Google Drive, click Create, More >, Script, then select Script as Web App. If you run the script, you get this result, after clicking the button:

Boring

I have added a few bits of code to the script, see below.

// Script-as-app template.
function doGet() {
  var app = UiApp.createApplication();

  var body = app.createFlowPanel().setStyleAttributes(css.body);
  app.add(body);

  var button = app.createButton('Click Me').setStyleAttributes(css.button);
  body.add(button);

  var label = app.createLabel('The button was clicked.')
                 .setId('statusLabel')
                 .setVisible(false)
                 .setStyleAttributes(css.notification);
  body.add(label);

  var handler = app.createServerHandler('myClickHandler');
  handler.addCallbackElement(label);
  button.addClickHandler(handler);

  return app;
}

function myClickHandler(e) {
  var app = UiApp.getActiveApplication();

  var label = app.getElementById('statusLabel');
  label.setVisible(true);

  app.close();
  return app;
}

The body element is inserted because app does not have a setStyleAttribute() method. Now I can assign style attributes using the css object. I do this in a separate file within the same project, and so I have a style sheet.

var css={};

css.body = { 
  width:'300px', 
  margin:'20px auto',
  border: '1px solid #ccc',
  padding:'10px'
};

css.button = {
  fontWeight: 'bold',
  borderRadius: '10px'
};

css.notification = {
  border: '2px solid #0c0',
  padding:'0.5em', 
  margin:'1em 0'
};

Now it looks like this:

Better!

It’s no CSS yet, you can’t simply specify the attributes for a given tag name (like all H2 headers should be 1.5em), but it is a big step ahead already to be able to specify the appearance of a project in  one single file.