XF Designer supports applying styles from .css files for elements in your document.

 

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.

In CSS, classes allow you to apply a style to a given class of an element. To do this, you link the element to the style by declaring a style for the class, then assigning that class to the element in XF Designer.

 

In the following are listed the CSS classes that can be applied in XF Designer:

 

 

The styles that belong tot this class can be applied to any element in your document.

For example, the following class applies color green to the element and aligns the text to the right side of the document.

 

.style1

{

color:green;

text-align:right;

}

 

In XF Designer, to assign the style to your document you first have to add the .css file containing this class by selecting Change Styles>Assign Stylesheet.. from the Styles group. Select and element from your document and then go to Styles, and select style1 from the list. In this list, above each class name you have a preview of the correspondent style applied to the "AaBbCc" sample string of characters.

 

 

 

 

The styles that belong to this class can only be applied to the element specified by element_name.

For instance, the following s1 class can only be applied to block elements.

 

block.s1

{

color:blue;

text-align:center;

font-size:18px;

}

 

 

 

In XF Designer you can also assign styles to an element by not specifying the class. In this case, the styles will be applied to all elements specified by element_name, that do not have already a style assigned.

For example, when you assign the .css file containing the following styles applied to the block element:

 

block

{

color:red;

}

 

all the block elements that do not have styles already assigned will automatically be formated with the color red.

Therefore, this style will not appear in the list with available classes.

 

 

Working with styles

The features that help you work with styles are available in the Styles group under Home tab.

 

1. Creating a new stylesheet

XF Designer provides you with the possibility of creating .css files. In order to do that press the Change Styles button and select New Styleshhet from the list. This will open the New Stylesheet dialog. After entering a name and a location for your stylesheet, press OK and the Manage Styles dialog will open, where you`ll be able to perform actions like creating, modifying or removing styles from your .css file.

 

2. Assigning stylesheet

To assign a stylesheet (.css file) to the document, press Change Styles and select Assign Stylesheet from the list. This will open the Change Stylesheet dialog. After assigning a stylesheet to the document, the other options in the list will be enabled.

 

 

3. Removing stylesheet

To remove a stylesheet from your document, click on the Remove Stylesheet option from Styles group.

 

4. Opening stylesheet

Open stylesheet option in the Styles group will open the .css file in a new XF Designer document.

 

5. Managing styles

Among applying styles already implemented in your .css file, XF Designer provides you with the possibility of creating, modifying or removing styles from your .css file.

In order to manage styles in your .css file select press Change Styles and select Manage Styles from the list. This action will open the Manage Styles dialog box.

 

 

Here are displayed the available classes in your .css file, a preview of the style applied to the name of the class, the properties contained in the selected class and options for creating, modifying or deleting styles.

 

 

To create a new style click on the New Style.. button and the Add style dialog will open. Here you can set the name and the type of style (the element the style applies to) and formatting options (attributes). You can also preview the changes you made applied on a sample text.

 

 

 

 

To modify an already existing style, click on a style in the Manage Styles dialog box and press the Modify... button.

In the Edit style dialog box you can change formatting options and preview the style applied to a sample text.

 

 

 

 

To delete a style from your .css file press the Delete button from the Manage Styles dialog.

 

Note: All the changes (creating, modifying or removing a style) listed above will be also applied in your .css file.

 

6. Reloading stylesheet

If you made changes in your .css file you will have to reload it in order to use the new features in your stylesheet.

Go to Styles group, press Change Styles and select Reload stylesheet.

 

7. Clearing styles

If you want to clear the style applied to a selected item in your document press Change Styles and select Clear Styles.

 

 

 

 

See also:

        How to apply styles to a document