This tutorial will show to apply styles to elements or pages.
We will define a new style and use it in our example. Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Create a new style by clicking on the "Add" button on the right. Then rename it to "default-text-style" by clicking on the "Rename" button or pressing the "F2" key.
Set the values on the "Text" tab as shown on the followings:
This style is to use a font family starting with Arial. In case it is not available, the second one will be used and vice versa.
Click on the OK button to save this new style.
This new style will now appear on the "Available CSS Styles" panel in the "CSS Styles" tab as shown below.
To apply this style to a text element on the page. Drag the style "default-text-style" from the "Available CSS Styles" and drop it to the element on the page. If that element is selected, you can just drag the style "default-text-style" and drop it to the "Page / Element CSS Styles" panel above. Both will result in the following:
If you want to apply the style to the whole page, drag the style "default-text-style" from the "Available CSS Styles" to the blank area on the page. The following dialog will be shown and ask you to confirm. Press the OK button to confirm. You can also click on the blank area of the page. The Container will now show "body". Drag the style "default-text-style" and drop it to the "Page / Element CSS Styles" panel above.
There is another way to apply styles especially when the Page Designer is maximized and the CSS Styles tab is hidden. You can right-click on an element and select "Styles" from the context menu.
Click on the "Add" button on the right and select the style "default-text-style".
Press the OK button to accept the selection.
Press the OK button to apply the style to the element.
To apply the style to the page rather than an element, right-click to bring up the context menu and select "Page Properties".
Click on the "Style" tab.
Click on the "Add" button on the right and select the style "default-text-style".
Click on the OK button to accept the selection.
Click on the OK button to apply the style to the page.
on the toolbar.
