Back to Contents

How to Relate Styles, Classes, and Selectors

When defining forms, you can use the STYLE attribute to assign a style to particular form objects. This help topic examines how the STYLE attribute can ultimately result in a selector that can then be referenced by CSS.

Form Objects and Styles

When defining a form element, you can use the style attribute to specify a presentation style for the form element.  For example, the following code sample from a .PER file assigns a style  (named "mystyle") to the style attribute for an Edit field:

Now that the style is set for the form element, when displaying the form within the GWC, you want to have your CSS dictate how that style displays. In other words, you want the CSS to recognize the "mystyle" style attribute and format the display accordingly.

Accessing a Style using the Class template path

When an object has the STYLE attribute defined, the result is that the "class" attribute of the GWC object is set using the value assigned to the STYLE attribute.
As a result, the style can be accessed using the template path class.

Continuing with the example started above, the snippet Edit.xhtml uses this "class" attribute

<input type="text"
  [...]
  gwc:attributes="
  [...]
  class [...]
  ' g'+type+' '+prefix('gc',class)+' '+prefix('g'+type+'_gc',class) +
  [...]
/>

<input type="text" class="gEdit_gcmystyle gEdit gcmystyle" />

Using Class values as Selectors

With the class generated by the snippet file, the class vaues gEdit_gcmystyle, gcmystyle, or gEdit.gcmystyle can be used as selectors.

Where to use Class values as Selectors

Depending on the HTML structure in the snippet, you can set the GWC class attribute elsewhere, so you can have other selectors.

Example

<div class="gEdit">
  <input type="text" class="gEdit_gcmystyle gcmystyle"/>
</div>

Back to the top