CSS Editor

See Also

The CSS Editor enables you to edit the cascading style sheet (CSS) file for your project. To open the editor, open a CSS file in the IDE. For example, in the Projects window navigate to project-name > Web Pages > resources > stylesheet.css, and then right-click stylesheet.css and choose Open.

The CSS Editor opens in the editing area with the first CSS rule selected in the editing pane. If you are comfortable with CSS, you can type directly in this pane and use the code completion drop down lists to help you define properties for each rule.

Creating a New Rule

If you want to create a new rule, you can type its name on a blank line or click the Create Rule button  in the editor toolbar to open the Style Rule Editor and get some help with creating the new rule.

Editing a Rule

To edit an existing rule or a rule you have just created, click in the editing pane anywhere in the rule. For example, click the .list-header rule. You then have three options for adding or changing properties of a rule:

As you make changes to a rule's properties, you can see a preview of the effects of your changes in the preview pane, which is below the editing pane and to the right of the Style Editor pane.

The rules in the CSS file follow the usual order of precedence of cascading style sheets:

  1. Top precedence goes to rules you add to a component's style property. These rules override rules with the same name in the CSS file. You add these rules with the Style Editor.
  2. The next level of precedence is the CSS file itself.
  3. The bottom level is the theme. For example, if you know a theme rule that applies to a component, you can override it by creating a rule with the same name in the CSS file.

For introductions to CSS, see the following web pages:

For an online reference to CSS 2.1, see the following web page:

See Also
About Components
Common Component Properties
Using Cascading Style Sheets

Legal Notices