Selecting elements:

When you select an element, remember that often the innermost element may not be suitable for styling. If you can’t get the results you want, try selecting selecting another part of the page which contains the element you want to style.

Viewing changes:

Check the live site often while making style changes. Open the site in a different browser (or use a Container in FireFox) and run the live site in that (i.e. not logged in). Just wait a second to make sure the changes to propagate up to the server (check that the save icons in the timeline are not showing as  or ), then refresh the page.

Set a name:

It’s always a good idea to set a name for each style set or animation, so you can find it in the admin page if you want to delete it from there.

Use Development Mode:

Your changes will go live straight away, so if they are not very simple then toggle Development Mode on from the styles editor menu. Your changes then will not be visible to anyone else. When you have finished, remember to turn Development Mode off again!

Style the first keyframe  first!

Always try to set all your styles on the first keyframe before adding others, as these values will be copied across when you add a second keyframe. After that, the values from the last keyframe will be copied over to any others you add. This can save extra work by not having to go to each keyframe and set some value on it.

Hide unused styles:

If the Styles Editor panel gets too long, hide the unused styles from the menu.

Test on different browsers

Browsers tend to handle styles a little differently from each other, usually you don’t notice any difference but if you want complete consistency across platforms, check the output on different browsers as much as possible.

Transformations:

These can be a bit tricky and sometimes don’t work the way you might expect, and 3D transforms only work on certain types of element. If you just need to change the placement or size of an element, use Position and Dimensions rather than a 2D transform. It’s a good idea to set the Offset style for a transform first, before adding any keyframes. Origin X should be half the element width, origin Y should be half the element height. If you don’t do this, the animation may be centered about a point which doesn’t work the way you want.
After applying a transform, the bounds and the marker may not be where you expect, so look elsewhere on the screen for the marker if you can’t see it straight away.

Filters:

Like Transformations, these are also a bit tricky and won’t always work on all elements.

Backgrounds:

The default size for a background will stretch the image to fill the container, so set the size to Contain or Cover if you don’t want this, and turn Repeat off if you just want a single image. If you want to combine a background with a gradient, set the gradient color to partially transparent (see Known Issues for limitations).

Page reloading:

This dialog will pop-up sometimes when a change requires a page reload to display properly. Feel free to ignore it, it’s not always necessary.

If an animation hides an element:

Sometimes, if you move an object above the top of the window on the first keyframe, the browser won’t display it at all. To avoid this, place the object so part is just visible, set the opacity to 0 in the first keyframe and set it to 1 in the second keyframe.

If an element cannot be styled:

Occasionally, an element cannot be styled – this is to ensure cross-browser compatibility with the CSS element identifier. A dialog will appear warning of this – if it happens, try to find a parent containing element instead.