This describes an experimental approach to injecting permanent style sheets in Quest. The reason I call it "experimental" is that it uses data URIs, which are widely, but not universally, supported in browsers. Be sure to test!

The basic code is this (it includes a crude implementation of "url encode"):

  <function name="addStyleSheet" parameters="css">
  	AddExternalStylesheet("data:text/css," + urlEncode(css))
  </function>
  
  <function name="urlEncode" parameters="s" type="string">
  <![CDATA[
  	s = Replace(s, "%", "%25")

  	s = Replace(s, " ", "%20")
  	s = Replace(s, "\"", "%22")
  	s = Replace(s, "#", "%23")
  	s = Replace(s, "$", "%24")
  	s = Replace(s, "&", "%26")
  	s = Replace(s, "'", "%27")
  	s = Replace(s, ",", "%2C")
  	s = Replace(s, ":", "%3A")
  	s = Replace(s, ";", "%3B")
  	s = Replace(s, "<", "%3C")
  	s = Replace(s, "=", "%3D")
  	s = Replace(s, ">", "%3E")
  	s = Replace(s, ">", "%3F")
  	s = Replace(s, "{", "%7B")
  	s = Replace(s, "}", "%7D")
  	return(s)
  	]]>
  </function>

You can use it by passing a css string (minus the enclosing <style> tag). One way to do that is to define an attribute in the game object like this:

<game>
    ...
    <css>
        body {
          background-color:black;
        }
     	div#gameBorder {
	        background-color:black;
     		border-color:black;
     	}
    </css>
    ...
</game>

Then you set it with:

addStyleSheet(game.css)

You can also just set the css with:

msg(game.css)

but in this case, clearing the screen will require you to send the css again. Using the addStyleSheet function will set the style sheet permanently, so you will not need to set it more than once, regardless of clearing the screen.

Edit: updated with working version

Cool Jay, is this a workaround for the problems I vaguely remember about Quest loading external style sheets?

Yes. That's what I was trying to solve. I hate posting responses to forum queries using css when I have to keep saying "remember to re-send the CSS when you clear the screen." This seems like a simple solution if it holds up!

This seems not to work with uploaded games on Firefox and Chrome, though it does for IE. The CSS I am trying is:

    <css>
        img {
          float:left;
          padding:5px;
        }
        body {
          background-color:yellow;
        }
        </css>

I'll have to check that out. I thought it had worked for me with Chrome.

Are there any errors in the Javascript console?

It could be me. Here is the game code I was trying:

<!--Saved by Quest 5.5.5328.26617-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="reel">
    <gameid>5b8e54c5-c011-417a-9ee5-b3c34be859e7</gameid>
    <version>1.0</version>
    <firstpublished>2014</firstpublished>
    <showborder type="boolean">false</showborder>
    <attr name="autodescription_youarein_useprefix" type="boolean">false</attr>
    <autodescription_youarein_newline />
    <appendobjectdescription />
    <attr name="autodescription_youcango" type="int">0</attr>
    <css>
        img {
          float:left;
          padding:5px;
        }
        body {
          background-color:yellow;
        }
                </css>
    <attr name="external_state" type="int">0</attr>
    <author>The Pixie</author>
    <turn type="int">0</turn>
    <subtitle>testing images</subtitle>
    <start type="script">
      addStyleSheet (game.css)
    </start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <flag type="boolean">false</flag>
    <description type="script">
      if (this.flag) {
        msg ("A big room, with wood-panelled walls. There is a large hole in the west wall, where the wood is blackeden.")
      }
      else {
        msg ("A big room, with wood-panelled walls.")
      }
    </description>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <command name="clr">
    <pattern>clr</pattern>
    <script>
      ClearScreen
    </script>
  </command>
  <function name="addStyleSheet" parameters="css">
    AddExternalStylesheet ("data:text/s," + urlEncode(css))
  </function>
  <function name="urlEncode" parameters="s" type="string"><![CDATA[
    s = Replace(s, "%", "%25")
    s = Replace(s, " ", "%20")
    s = Replace(s, "\"", "%22")
    s = Replace(s, "#", "%23")
    s = Replace(s, "$", "%24")
    s = Replace(s, "&", "%26")
    s = Replace(s, "'", "%27")
    s = Replace(s, ",", "%2C")
    s = Replace(s, ":", "%3A")
    s = Replace(s, ";", "%3B")
    s = Replace(s, "<", "%3C")
    s = Replace(s, "=", "%3D")
    s = Replace(s, ">", "%3E")
    s = Replace(s, ">", "%3F")
    s = Replace(s, "{", "%7B")
      s = Replace(s, "}", "%7D")
    return (s)
  ]]></function>
</asl>

And a link to the uploaded game. I should have a yellow body element:

http://textadventures.co.uk/games/view/ ... gm-5q/reel

I seem to have botched it up at some point. I think I did a replace of "css" with "s" in part of it and just messed it all up. If you change the line to this:

AddExternalStylesheet ("data:text/css," + urlEncode(css))

it should work. Even looking at it just now, I thought it looked wrong. Not sure where my head was before.

Thanks, works okay on Frefox, Chrome and IE now.