style - CSS Styles

Specifies font styles for a control.

Category

styling

Syntax

style="name:value;..."
Where name and value are joined by a colon to define one style element. Multiple style elements are separated by semicolons. The following table specifies the allowed names and values.
Name Value Examples
height
  • The keyword auto for automatic sizing
  • A decimal number followed by px for pixels
  • A decimal number followed by em for ems
 
height:auto
height:23.0px
height:1.4375em
width
  • The keyword auto for automatic sizing
  • A decimal number followed by px for pixels
  • A decimal number followed by em for ems
  • A decimal number followed by % for a percentage of the height
 
width:auto
width:181.0px
width:11.3125em
width:27.0%
font-family The name of a font, a comma, and the keyword serif or sans-serif. Either part is optional in which case the comma is omitted. 
font-family:Baskerville
font-family:serif
font-family:Baskerville,serif
font-size An integer followed by pt for points. 
font-size:11pt
color The keyword rgb followed by integer values for red, green, and blue in parentheses separated by commas. 
color:rgb(0,0,255)
font-weight The keyword bold. Otherwise the weight is normal. 
font-weight:bold
font-style The keyword italic. Otherwise the style is plain. 
font-style:italic
text-decoration The keyword underline, line-through, or both separated by a space. 
text-decoration:underline
text-decoration:line-through
text-decoration:underline line-through
text-align The keyword left, center, right, or justify. 
text-align:center

Usage

In Design mode, for height and width, click the top tab under Properties and look for Height and Width followed by Units, or click All Properties and look for style under styling. If you compute the value, return a number for height and width, and return px, em, %, or null for the unit. You can also change the height and width by grabbing and dragging in the editor.

For the other style specifications, click Font under Properties or click All Properties and look for style under styling. These values are static.

Examples

This Edit Box control specifies a static height and width.
<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText style="height:3.75em;width:55.583332em">

This Edit Box control returns computed values for height and width (but static values for the unit).

<xp:inputText id="inputText1" value="#{document1.subject}">
	<xp:this.style><![CDATA[height:#{javascript:if (document1.isEditable()) {
	return 38	}}px;
	width:#{javascript:if (document1.isEditable()) {
	return 252}}px]]></xp:this.style>
</xp:inputText>