CSS Editing Tools
Espresso includes tools for easily modifying your stylesheets, which will be available in the lower half of the right Tools sidebar when you are editing CSS files.
To use the CSS editing tools, place your text cursor inside of the selector you want to modify in the source, and then adjust the CSS properties in the tools as needed. There are three categories:
- Text: these tools allow you to adjust text styling. Use them to adjust text color, alignment, font, size, line-height, and more.
- Decoration: these tools control visual decorations, including background, borders, opacity, and box shadows.
- Layout: these tools control sizing and spacing, including padding, margins, display style, floats, and more.
Usage
Most of the CSSEdit tools should be largely self-explanatory, but here are some tips for using them:
- Click the button next to some tools to add multiple layers. For instance, you can add multiple backgrounds using this button (including CSS3 gradients).
- Click the dropdown arrow at the right side of any input to choose keywords, different units of measurement (for instance, px vs. em), or to clear the old value.
- If there are any icons that you do not understand, hover your mouse over them to get a tooltip with the exact CSS property that they adjust.
Browser compatibility
The vast majority of the CSSEdit tools provided in Espresso 2.0 will output code that is compatible with all major browsers (although browser-specific implementations of the box model or similar may still affect your site). However there are some tools that add support for CSS3 properties that are only compatible with advanced browsers. Where possible, Espresso will automatically output code for the major browser variants (mostly -webkit
and -moz
variants of properties), but some features like multiple backgrounds may look like normal CSS but still only work in advanced browsers.
Browser compatibility for CSS properties is a topic that is changing too fast to document here, but you can find more information about which browsers support which CSS properties by searching the web.