CSS Styles Window

The CSS Styles window enables you to edit the declarations of rules for HTML elements and selectors in a CSS file.

The upper pane of the CSS Styles window displays a list of the rules that are defined in the CSS file and the properties of elements that are selected when you use Inspect mode in the browser.

The lower pane of the CSS Styles window displays a list of the properties and values that are specified in the declarations of a rule.

The CSS Styles window contains the following elements.

Element Description

Selection

Click this tab to view the properties of the selected element.

The features in this tab are only available when you run an HTML5 project in a browser with NetBeans integration enabled and the Inspect function is enabled.

    Properties

This table displays a list of properties of the selected element..

     Style Element States icon Style Element States

Click to toggle display of checkboxes for element states.

    Applied Styles

This table displays a list of styles that are applied to the selected element.

     Edit CSS Rules icon Edit CSS Rules

Click to open the Edit CSS Rules dialog box.

Document

Click this tab to view the style sheets and CSS rules associated with the current file. Double-click a style sheet to open the stylesheet in the editor. Double-click a rule name to move the insert cursor to the line in the style sheet that contains the rule definition.

    Filter Text Field

Type a string to filter the list of CSS rules and limit the list of displayed rules to the rules that contain the string.

     Edit CSS Rules icon Edit CSS Rules

Click to open the Edit CSS Rules dialog box.

Properties Toolbar

Use the icons in the toolbar to modify how the list of properties is displayed and to add new properties to the selected rule.

The name of the selected CSS rule is displayed in the toolbar.

     Search icon Filter Items

Click to toggle the text field to filter the list of properties.

     Show Set Properties Only icon Show Set Properties Only

Click to display only the properties that have a specific value.

     Show Categorized Properties icon Show Categorized Properties

Click to display all properties organized by category.

     Show All Properties Show All Properties

Click to display all properties, listed alphabetically.

     Add CSS Property icon Add CSS Property

Click to open a dialog box that enables you to add properties to the selected rule that is displayed in the lower pane of the window.

To delete a rule, click the CSS rule in the toolbar and choose Delete Rule in the popup menu. To delete a property, right-click the property in the list and choose Remove Property in the popup menu.


Related Topics

Developing Applications with NetBeans IDE,

Copyright © 2015, Oracle and/or its affiliates. All rights reserved.