modifiers:CSS styling

{ and } (curly braces} are used to include explicit CSS styling in the modifier string which will be applied to the style="..." attribute of the relevant HTML tag. In addition to working with the common block types, this also works with image, link, and span markup.

One great benefit of styling like this is to test its effect before adding it to an external stylesheet or the <style> element of the HTML page.

Xilize markup browser rendering
p{color:sienna;background:cornsilk}. Coloring a paragraph.

The %{color:sienna;background:cornsilk} same applied% to a phrase.

p{margin:3em;}. big margins

bq{font-size:2em}. big text

Coloring a paragraph.

The same applied to a phrase.

big margins

big text

XHTML generated

<p style="color:sienna;background:cornsilk;">Coloring a paragraph.</p>

<p>The <span style="color:sienna;background:cornsilk;">same applied</span>
 to a phrase.</p>

<p style="margin:3em;">big margins</p>

<blockquote style="font-size:2em;">
<p>big text</p>