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.
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.
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:
For example,
.list-header
rule and press the spacebar to see properties listed in the code completion list. font-family
and double-click it to add the property. sans-serif
to set this font family as the value of the property. For example, to do something similar to the example above,
.list-header
rule.Arial, Helvetica, sans-serif
. .list-header
rule in the editing area, there is no font-family property listed in the Properties window. However, you can set other properties, such as font-size
and font-weight
.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:
For introductions to CSS, see the following web pages:
For an online reference to CSS 2.1, see the following web page: