Stylizer displays your CSS in the Code Grid, a highly productive editor designed specifically for CSS, that combines text editor flexibility with the productivity of a grid.

The Code Grid begins in Block Mode, in which whole rows are selected similar to a spread sheet. The most common ways to begin editing are to:

1. Press Enter to begin editing a new row below the selected cell, or Shift+Enter to begin editing a new row above the selected cell.
2. Start typing to overwrite whatever is in the currently selected cell.
3. Double-click or press Esc to enter Edit Mode and edit the currently selected cell.

Once you have entered Edit Mode, type CSS much as you would in a traditional text editor. The Code Grid recognizes CSS punctuation characters as commands which which navigate and create cells, so the learning curve is minimal. For example:

1. After typing a selector list or @media query, press { to begin editing the first declaration or rule.
2. After typing a property name, press : to jump to the property value cell.
3. Press ; to make a new declaration below the current one.
4. Press } to create a new rule below the current rule.

Press Ctrl+Down/Up (Option+Down/Up on Mac) to expand or collapse the current row. This works in both modes.

Input completion

When you type CSS, the Code Grid saves you keystrokes by continually suggesting keywords and unit suffixes. These suggestions are displayed in a lighter color after the text you are typing. For example, m:a Enter will input a margin: auto; declaration into the Code Grid. Likewise, m:2 2 Enter will input margin: 2px 2px; into the Code Grid. There are several ways to complete with the suggested text:

1. Tab or Enter inserts the suggestion.
2. ; inserts the suggestion and a new line below (like pressing Enter twice).
3. Space inserts the suggestion followed by a space.
4. , inserts the suggestion followed by a comma.

Commenting

Insert a new comment into the Code Grid by pressing /. In Edit Mode, press Ctrl+/ (⌘/ on Mac).

You may also disable CSS declarations or entire rules by converting them to a comment, or enable them by converting them back to code. To toggle the selected cells between being a comment and code, press F8 (or ⌘8 on Mac). There is also a button on the Context Bar to perform the same operation.

A comment that contains CSS code is displayed with a red background. This distinguishes code from explanitory comments, which are displayed with a green background instead.

When you comment out an entire rule, any nested comments within are parenthesized with (* *) instead so that the rule may be converted back to CSS at a later time. For example, the following CSS code:

div {
	/* set a default background color */
	background-color: black;
}

When commented out in Stylizer, becomes:

/*div {
	(* set a default background color *)
	background-color: black;
}*/

Size Grips

Size Grips are arrow icons displayed on the right side of the selected Code Grid cell for declarations which accept numeric values. To use a Size Grip, click and drag the mouse to adjust the value. When the mouse is positioned over a size grip, the mouse cursor changes to indicate the direction in which it must be dragged in order to adjust the value, and the cursor remains frozen in place while being dragged.

To adjust CSS properties which operate in a horizontal direction, such as width or letter-spacing, drag the mouse left or right. For properties which operate in a vertical direction, such as height or line-spacing, or properties which do not have a natural direction, such as animation-delay, drag the mouse up or down to adjust the value. Some CSS properties have both a horizontal and vertical component, such as background-position. For these properties, drag the mouse in all directions to adjust both components simultaneously.

When a CSS property supports layers—multiple value sets delimited by a comma, like background-position—the Size Grip will adjust the numeric values of the layer which contains the caret. For example, given the following declaration:

background-position: 1px 2px, 3px 4px, 5px 6px

When the caret is positioned within 1px 2px the Size Grip will adjust the first layer; when positioned between 3px 4px it will adjust the second layer, and so on.

Size grips can also be adjusted using the keyboard. Press Alt+Up/Down (⌘Up/Down on Mac) to decrement or increment a vertical Size Grip, or Alt+Left/Right (⌘Left/Right on Mac) to decrement or increment a horizontal Size Grip.

Indenting and reordering CSS

Reorder rows in the Code Grid using the hotkeys Ctrl+Shift+Up/Down (⌘⇧Up/Down on Mac). These hotkeys work in both Block Mode and Edit Mode, and will re-order the entire selection range if more than one row has been selected.

You can move a style rule into or out of the @media or @supports block above by pressing Tab or Shift+Tab. This is similar to pressing Tab to indent a line in a text editor. Note that in Edit Mode, the caret must be positioned at the very beginning of the line in order for this to work.

The selected rows may also be reordered by holding Ctrl (Command on Mac) and dragging them to a new location using the mouse. Hold Ctrl+Shift (Command+Shift on Mac) when dragging to duplicate the selection instead of moving it. You can even drag the selection outside of Stylizer and drop it directly into a text editor as CSS code.

Merging and Splitting shorthand properties

In CSS, shorthand properties are used to declare the value of several properties at once. For example, the margin property specifies the values of the margin-top, margin-right, margin-bottom, and margin-left properties all at the same time.

Stylizer makes it easy to switch between shorthands and individual declarations. Press Ctrl+U (⌘U on Mac) to Merge individual declarations of the current rule into a single shorthand property. Conversely, you may press Ctrl+Shift+U (⌘⇧U on Mac) to Split the subproperties of the selected shorthand into individual declarations.

When you split a shorthand, only the subproperties which have non-empty values become declarations. For example:

font: 500 16pt Helvetica, Arial, sans-serif;

Will split into the following set of declarations:

font-weight: 500;
font-size: 16pt;
font-family: Helvetica, Arial, sans-serif;

It is important to recognize that shorthand properties substitute the initial value for any subproperty whose value is not provided. In the first example above, the font shorthand is missing values for font-style, font-variant, font-stretch, and line-height, so these properties would be reset to their initial value. In the second example, because individual declarations are used instead, the missing properties would not be reset.

The thing to remember is that individual declarations are not semantically equivalent to a shorthand declaration unless all of the shorthand's subproperties are specified. And this is precisely the point—split a shorthand into individual declarations when you need to set certain subproperties without resetting others; merge when you must be sure all subproperties are reset.