StyleSheet

From HTML5 Builder
Jump to: navigation, search

The StyleSheet component lets you associate a CSS file to a page, and apply styles defined for class selectors from that CSS file to other components using their Style property.

Usage

To use the StyleSheet component, add it to a Page and:

  1. Point its FileName property to the target CSS file.
  2. On every other component you want to apply a style to, set its Style property to a whitespace-separated list of HTML class names.

For example, if you have the following CSS file:

.red {
  color: red;
}

.bold {
  font-weight: bold;
}

You could associate it to a StyleSheet component, and then set the Style property of a Label to ‘red bold’, with the following result:

Label text.

Properties

In addition to its own properties (documented below), this component also inherits the following properties:

FileName

Path to the target CSS file. For example: style.css or css/common.css.

IncludeID

Whether the Object Inspector, when setting the value for the Style property of a control, should include among the possible values id-based div selectors.

If set to true, selectors such as #subheader or #content_box will be available in the drop-down list of possible values.

Note: Despite being displayed among the possible values, you can only use HTML classes for the Style property.

IncludeStandard

Whether the Object Inspector, when setting the value for the Style property of a control, should include among the possible values selectors for HTML elements.

If set to true, selectors for elements such as h1 or p will be available in the drop-down list of possible values.

Note: Despite being displayed among the possible values, you can only use HTML classes for the Style property.

IncludeSubStyle

Whether the Object Inspector, when setting the value for the Style property of a control, should include among the possible values composed selectors.

If set to true, selectors such as #subheader h1 or p.class1.class2 span will be available in the drop-down list of possible values.

Note: Despite being displayed among the possible values, you can only use HTML classes for the Style property.

Help Resources

Video Tutorials

See Also