|
Style Types |
|
|
Style Types |
|
The following types of CSS classes can be applied in XF Designer:
| ► | .class_name |
The styles that belong to this class can be applied to any element present in the 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 a style to the document the user must first add the .css file containing the class by selecting the New Stylesheet/Change Stylesheet option accessed through the Change Style button located in the Styles group under the Home tab.
Then, the element from the document to which the style will be applied must be selected. Afterwards, the style must be selected from the drop-down list of available styles, present in the Styles under the Home tab.
For this example, style1 must be selected from the list. Also, in this list, above each class's name a preview of the correspondent style applied to the "AaBbCc" sample string of characters is available.
| ► | element_name.class_name |
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 the user 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, the following .css file containing styles applied to the block element is attached to a Stylesheet.
block
{
background-color:red;
}
All the block elements that do not have styles already assigned, will automatically be formatted with red color.
Therefore, this style will not appear in the list with available classes.
There are also some classes of CSS that can be applied to elements present in the document but the .css file cannot be created from Design View. A few examples are provided below:
| ► | element.class1 |
class1 will be applied to the respective element.
If the style is defined as follows: inline.class1 the style will be applied to the element only if it is an inline.
For example:
inline.class1
{
font-color:red;
}
| ► | element_type .class1 |
The class1 style will be applied to the current element only if its parent is of the type mentioned in the style's definition.
For example:
inline .class1
{
font-color:red;
}
The class1 style will be applied to the current element only if it is the child of an inline element.
| ► | #id |
The style will be applied only if the element has the mentioned id.
For example:
#14
{
font-color:red;
}
The style will be applied only if the current element has the id="14"
| ► | #id1 #id2 |
The style will be applied to the current element only if it has the id="id2" and its parent element has the id="id1"
For example:
#1 #2
{
font-color:red;
}