Customizing the elements style

There are two ways to customize the elements style:

• By specifying a Custom StyleSheet and setting custom StyleClasses for some elements
• Or simply by adding a style attribute for the element for which you want to customize ther style. This way (which work exactly as in HTML) is much more simple but of course you will have to specify the style each time you need to

The Stylable syntax elements article specifies the list of elements which are stylable.

Adding a style attribute

Adding a style attribute for a stylable element allows to add an inlined style. It works exactly as in HTML, which means that the CSS rules are inlined inside the attribute. Note that it will not erase the other CSS attributes on this element in the HTML result. However as it is the case in HTML, it will override any style set globally.

Example

Suppose that we want to have a table with a smaller font. A very simple way to do this is by setting a style attribute with the following content: " font-size:12px;".

For example, we can have the following table specification:

   <table style="font-size:12px;">
      <tableHeader>
         <column>Style ID</column>
         <column>Apply On</column>     
         <column>Comment</column>
      </tableHeader>
      <row>
         <cell>header</cell>
         <cell>table</cell>
         <cell>styleClass specifying the style of the table</cell>         
      </row>           
      <row>
         <cell>apiTitle</cell>
         <cell>th</cell>
         <cell>styleClass specifying the style of the title</cell>         
      </row>   
   </table>

With the following result:

Style ID	Apply On	Comment
header	table	styleClass specifying the style of the table
apiTitle	th	styleClass specifying the style of the title

Adding custom StyleClasses

Adding custom StyleClasses can be performed on stylable elements by setting the class attribute. Note that the attribute can refer to more than one class, as iit is the case in HTML.

Example

As for the previous example, we want to have a table with a smaller font. This time we will refer to a new StyleClass in our table. This StyleClass can for example have the following definition:

   table.custom {
     font-size: 12px;
   }

And we refer to this StyleClass in our table:

   <table class="custom">
      <tableHeader>
         <column>Style ID</column>
         <column>Apply On</column>     
         <column>Comment</column>
      </tableHeader>
      <row>
         <cell>header</cell>
         <cell>table</cell>
         <cell>styleClass specifying the style of the table</cell>         
      </row>           
      <row>
         <cell>apiTitle</cell>
         <cell>th</cell>
         <cell>styleClass specifying the style of the title</cell>         
      </row>   
   </table>