Package com.smartgwt.client.docs

# Interface CSSStyleName

public interface CSSStyleName
CSS class name to apply to some HTML element on this page. This is a string that should match the css class defined for the page in an external stylesheet or in inline html <STYLE> tags.

As a general rule, wherever it is possible to provide a CSS styleName (such as `Canvas.styleName` or `Button.baseStyle`, your CSS style can specify border, margins, padding, and any CSS attributes controlling background or text styling. You should not specify any CSS properties related to positioning, clipping, sizing or visibility (such as "overflow", "position", "display", "visibility" and "float") - use Smart GWT APIs for this kind of control.

Because text wrapping cannot be consistently controlled cross-browser from CSS alone, you should use Smart GWT properties such as `Button.wrap` instead of the corresponding CSS properties, when provided.

Content contained within Smart GWT components can use arbitrary CSS, with the caveat that the content should be tested on all supported browsers, just as content outside of Smart GWT must be.

Special note on CSS margins: wherever possible, use CSS padding and border in lieu of CSS margins, or non-CSS approaches such as `Layout.layoutMargin`, `Canvas.snapTo`, or absolute positioning (including specifying percentage left/top coordinates). We recommend this because CSS specifies a very complicated and widely criticized "margin-collapse" behavior which has surprising effects when margins exist on both parents and children. Compounding the problem, margins are implemented very differently on different browsers, especially when it comes to HTML margins.

Note about CSS "box models"

The CSS "box model" defines whether the size applied to a DOM element includes padding, borders or margins, or whether such settings effectively increase the size of the component beyond the size specified in CSS.

In Smart GWT, the size configured for a component includes border, padding and margins if specified (in CSS terminology, the box model is "margin-box"). This allows CSS borders, margins and padding to be treated as purely visual properties with no effect on sizing or layout.