# CSS

The CSS view shows all style rules that are currently applied to a selected DOM node. Several tabs compose the CSS view that show different representations of a DOM element's style.

CSS view tabs:

- Style Rules - Shows the rules and their defined properties currently applied to an element. The following toolbar buttons are availabe in the Style Rules tab:
  - Add Property - Adds a new property to the selected style rule
  - Edit Property - Edit the values of the selected style property
  - Open CSS file - Opens a rule or property in an editor to the URL and line number
  - Toggle Highlighting - Highlights all DOM elements currently using a selected style rule or property
  - Note: The previous toolbar buttons are also in a context menu accessible by right-clicking in the Style Rules tab
  - Green Properties - Style properties currently affecting the current DOM element selection
  - Red Properties - Style properties currently cascaded over by other style properties and not affecting the current selection's style.
- Computed Styles - Shows every style rule either defined formally by rules or inline or computed by the browser.
  - Green Properties - Style properties currently defined by style rules or inline style declarations
  - Red Properties - Style properties currently defined by the browser
- Box Model - Shows the dimensions, x-y coordinates, padding, border, and margin information.
  - Navigation Controls - Allows navigation to other nodes in the DOM from the currently selected node
    - Up Arrow - Navigates the selection to the current node's parent
    - Down Arrow - Navigates the selection to the current node's first child
    - Left Arrow - Navigates the selection to the current node's previous sibling
    - Right Arrow - Navigates the selection to the current node's next sibling
- Diffs - Shows the changes made to CSS rules and properties either for a given selection or for all changes globally.

To open the view:

- Go to Windows menu.
- Select Show View and Other... to open the Show View dialog.
- Under the Mozilla category, select CSS.

Related concepts