STX stylen und erweitern mit Cascading Style Sheets (CSS)

CSS Format: selector {property1: value1; property2: value2; ... property: value}

The CSS Format is a very simple Text Format to describe the styling of HTML or SVG Elements. STX Tags usually mark their content semantically (i.e with a distinct Tag for each Content-Type) and CSS can apply Formatting to these Tags.

A CSS File is simply a List of CSS Rules, often one Rule per Line.

A CSS Rule consists of

• a 'Selector', e.g. .Nutt that must match with the STX Tag Name e.g. {Nutt ...}
  
• and (multiple) Property:Value Pairs with well-known CSS Property Names and their Values e.g.  {color: olive}
  

A common Form of Selectors starts with a Dot, followed by the Name of a Style. These Styles match STX Tags with the same Name

The Dialog Example from above is formed as the Result of applying the two CSS Rules to the given STX Text: 

Parameterizing Styles

The STX {StyleName ...} selects a Style that is applied to the inner Section. The Tag can also accept Parameters and thus modify the Styling. These Parameters can be written

• as CSS Property-Value Pairs like in CSS (similar to the HTML style-Attribute) or
• as positional Parameters without a Name, therefore much briefer
  

Positional Parameters are matched by Position with the CSS Properties in the Style from the *.css File or <Style> Rule. This is how e.g. Font-Size is parameterized:

• CSS-Style: .\* { font-size: 125%; content: "{* Larger} Font {*4 with Power}"}
• STX-Tag: {* Larger Font with Default 125%}  {*4 Even larger with greater Values}

As you can see, a single numeric Parameter can directly be appended to the Tag. Multiple Parameters or Values with Spaces need Brackets to keep them separate from the Text Content as in the following Examples:

• CSS-Style: .f { font-family: Georgia; content: "{f Serif Font} for Readability on high Resolution Displays;" } 
• STX-Tag w. default Font: {f Serif Font for Readability at large Font Size} 
  
• STX-Tag w. Font Parameter: {fPapyrus any other Font}
• Brackets are needed for Values with Spaces: {f(Brush Script) apply brackets on Parameters with Spaces} 

Make sure you never change the Order of positional CSS Properties though, or you have to adjust all Usages in all Files!

Direct Formatting: Adding more CSS Parameters to styled Sections

You can not only modify the CSS Properties defined in the Style File, you can also add new CSS Property-Value Pairs to a tagged Section. This adds so-called 'direct formatting' to it, but this is not a good Practice, because it litters the Text with hard-to-maintain ad-hoc Formatting. Most WYSIWYG Editors encourage it though, by letting the User select some Text and change any Aspect like Font, Color etc.

But since STX Tags are very brief, it is almost always better to define an additional Style in the CSS File and apply it to the same Section.

Here is a simple Example for direct Formatting and the Styling Alternative:

• CSS-Style: .f { font-family: Georgia; content: "{f Serif Font} for Readability on high Resolution Displays;" } 
• STX-Tag w. default Font, but additional Styling: {f(color=red) Serif Font AND changed Color}

• STX-Tag w. Font and additional Styling: {f(Impact, color=green) Font Impact ...} ...
  
• The same, but cleaner with two Styles: {fImpact {tGreen Font Impact ...}} ...
  

As you can see, nesting Styles is not only better manageable, but can also be briefer than named CSS Parameters!