xTxT Documentation

Element Styling Using CSS Classes

Here is a style block that defines two CSS classes, named myclass1 and myclass2.

<style>
.wikiContent .myclass1 {
	color: red;
	font-family: Courier;
	font-size: 18pt;
}
.wikiContent .myclass2 {
	color: green;
}
</style>

Once these classes are defined, we can apply a class to any xTxT Element by adding a period (.) followed by the class name, e.g.;

/p.myclass1

Which then applies the specified CSS class style.

This is some text

Multiclassing

More than one class can be applied to the same element, by adding more .className constructions.

Be careful not to put any spaces or other punctuation in the string.

Classes are applied in the specified order, so if styles conflict, the style applied in the later classes will override the style in the earlier classes, as in this example;

/p.myclass1.myclass2

This is some text

xTxT Elements which output compound HTML structures may behave differently as to where the class names are applied. Check the documentation for the element you are using to make certain you understand where the class name is rendered, so that you can form appropriate CSS for that element.