Luxor XUL CSS Reference

Cascading Style Sheet (CSS) started as a W3C standard for styling web pages (that is, HTML tags) and evolved into a standard for styling arbitrary, made-up, not-yet-invented XML tags such as Luxor XUL tags.

Luxor XUL uses the CSS core to let you style XUL tags using well-documented, standardized name/value pairs (e.g. color: red; font-size: 150%; font-style: italic;) that you can look up at your public library instead of inventing hown-grown fonts, colors, border styles, length units and more.

Note, that CSS is not and archaic pre-XML-world dialect that is endangered by XSL/T. Instead both CSS and XSL/T will thrive side-by-side and complement each other. XSL/T, for example, excels in creating new documents from templates and XML data, but doesn't offer well-documented, standardized style properties that you can squeeze into XML tags and that are possibly cascaded/inherited to leafs and branches in the document tree.

You can style XUL tags in two ways:

Inline styles. You can add style properties to individual XUL tags using the style attribute. Example:

<button style="width: 200px" label="Piranha" />

External style sheets. (Note: Not Yet Supported - Coming Soon) You can store style rules for reuse in separate, XML-free text documents also known as style sheets. Note, that your style rules no longer reside inside the XML tags they belong to, and you, therefore, need to use selectors to tell Luxor which XML tags you want to polish up with which style rules.

Luxor supports three forms of selectors to match XUL tags and style rules.

Element selectors. Lets you attach styles to XUL tags. Example:

  toolbarbutton  { min-width: 50px; } 

Note, that you can group element selectors into a comma-separated list, so that the style properties apply to all listed tags. Example:

  password, text { min-width: 50px; } 

Class selectors. Using the class attribute you can group XUL tags into a class. Example:

  <label class="warning">You are in bear country.</label>

To attach a style to a particular class, append the class name to the XUL selector, separated by a period (.). Example:

  label.warning { color: red; }

To attach a style to all tags of particular class, leave out the leading tag name. Example:

  .warning { color: red; }

ID selectors. Using the id attribute you can assign a unique identifier to a XUL tag. Example:

  <label id="warning-bear-country">You are in bear country.</label>

To attach a style to the identified tag, use the id value preceded by a pound sign (#). Example:

  #warning-bear-country { font-weight: bold; }

Luxor currently supports the length units below:

Pixels (px) Equals a pixel on your screen. Example:

min-width: 50px

height max-height max-width min-height min-width width

height

Values:	length
Inherited:	No

Sets the height for an element. Note, that if the element is inside a flexible box (e.g. flex="1"), that is a box that shrinks or grows dynamically, height is ignored and min-height and max-height is used instead.

Examples:

  <vbox style="height: 200px">

---

max-height

Values:	length
Inherited:	No

Sets the maximum height an element is allowed to grow inside a flexible box. Note, that max-height is ignored inside non-flexible boxes and height is used instead.

Examples:

  <button style="max-height: 40px" label="Canary" />  

---

max-width

Values:	length
Inherited:	No

Sets the maximum width an element is allowed to grow inside a flexible box. Note, that max-width is ignored inside non-flexible boxes and width is used instead.

Examples:

  <button style="max-width: 50px" label="Canary" />  

---

min-height

Values:	length
Inherited:	No

Sets the minimum height an element is allowed to shrink inside a flexible box. Note, that min-height is ignored inside non-flexible boxes and height is used instead.

Examples:

  <button style="min-height: 40px" label="Canary" />  

---

min-width

Values:	length
Inherited:	No

Sets the minimum width an element is allowed to shrink inside a flexible box. Note, that min-width is ignored inside non-flexible boxes and width is used instead.

Examples:

  <button style="min-width: 50px" label="Canary" />  

---

width

Values:	length
Inherited:	No

Sets the width for an element. Note, that if the element is inside a flexible box (e.g. flex="1"), that is a box that shrinks or grows dynamically, width is ignored and min-width and max-width is used instead.

Examples:

  <button style="width: 120px" label="Canary" />  
  <hbox style="width: 400px;">