Editing CSS styles visually

Coda offers visual editing for some of the most common style selectors.

To enter visual editing mode for a particular section of selectors:

• Click the visual mode button in the section header:

To edit items in a table:

1. Use the + and - buttons to add or remove items from the table
2. Double-click on an item in a table to edit it

To edit segmented items:

1. Click on a segment to select that value



2. A maximum of one segment can be selected
3. To clear the value, click the selected segment to unselect it

To edit metrics:

1. A measurement can be entered directly into the text box, such as "2 px"
2. The popup menu allows you to change units (px, pt, em, etc.)
3. The stepper control can increase or decrease the current value by one step

To edit colors:

1. Click on a color wheel button to open the color palette
2. Once a color has been chosen, a swatch will be shown next to the color wheel button
3. Click the X to clear any color that has been assigned



4. When possible, chosen colors will also be applied to the list of elements