Scoping Rules

Before we get started talking about the styles that you can change, or how to apply them to different elements, the first thing that we need to cover is where the styles need to live in your document to make them accessible to the elements that you're styling. Where you define your style depends on how often you would like to use it in a module.

The rules that determine where styles should be declared are the same as the rules that apply to scripts. The rules are covered in more detail in the Scripting Guide.

Inline

If you're going to apply a style to a single element, then you can declare that style inside of the element declaration. For example, to make a single paragraph gray, you could do the following

<p>
  <style>
    <forground color="dimGray"/>
  </style>
  This text is gray!
</p>

Custom Style

If you're going to apply a style to a select group of elements, then you can declare the style just before you create those elements. For example, to make a few paragraphs gray, you could do the following

<style name="gray_text">
    <foreground color="dimGray" />
</style>

<p style="gray_text">This text is gray!</p>
<p>This text is default black.</p>
<p style="gray_text">This text is gray!</p>

If you're going to apply the same style to several elements, then you need to make sure that the style is declared "high" enough in the document tree to be visible to the elements that the style is applied to.

<sectionNoTitle>
  <style name="gray_text">
      <foreground color="dimGray" />
  </style>
  
  <p style="gray_text">This text is gray!</p>
  <p>This text is default black.</p>
  <p style="gray_text">This text is gray!</p>
</sectionNoTitle>

<p style="gray_text">
  This text will not be gray, because the style is declared in a lower scope.
</p>

Overwrite Style Default

If you're going to apply the same style to all elements in a scope, you can overwrite the default style for that element inside of that scope. For example, to make all the paragraphs inside of a section gray and centered, you could do the following

<sectionNoTitle>
  <style name="paragraphs">
      <foreground color="dimGray" />
      <textAlignment>center</textAlignment>
  </style>
  
  <p>This text is gray and centered!</p>
  <p>This text is gray and centered!</p>
  <p>This text is gray and centered!</p>
</sectionNoTitle>

<p>This text is default black and left-aligned.</p>