# Previewing CSS [edit]

This Help topic describes how to preview a Cascading Style Sheet (CSS) for a project, file, or your entire workspace.

## Introduction

In Aptana Studio, you can preview what the CSS will look like for a file or project, or even your entire workspace. By default, CSS uses a generic HTML template file to display the CSS preview, although you can specify an external file or URL in your CSS preview preferences.

## Instructions

### Configuring your CSS preview settings

You can configure your CSS preview settings either in your preferences, or by using the Configure Preview button in the lower left corner of the CSS editor.

#### Configuring your CSS preview settings in your preferences

To configure your CSS preview settings in your preferences:

1. From the Window menu in Aptana, select Preferences... to open a Preferences window.
2. In the tree on the left side of the Preferences window, navigate to Aptana > Editors > CSS > Preview to display your CSS preview preferences (shown below).

3. You can configure the following options on this screen:
   - Specify that tabs for IE preview or Firefox preview.
   - Edit the HTML template that displays the preview.
   - Specify an external URL or local file to preview against.
4. Click OK.

#### Configuring your CSS preview settings using the Configure Preview button

To configure your CSS preview settings using the Configure Preview button:

1. In the File or Project View, double-click your CSS file to open it in the CSS Editor.
2. In the lower right corner of the Editor, click the Configure Preview button to display the Configure Preview menu:
   - Choose Edit default preview template to go directly to your CSS preview preferences.
   - Choose File preview settings to configure CSS preview settings for the current open file. (Check the Override workspace settings box to make changes.)
   - Choose Project preview settings to configure CSS preview settings for the current project. (Check the Override workspace settings box to make changes.)
   - Choose Workspace preview settings to configure CSS preview settings for your workspace.

### Previewing your CSS

To preview your CSS:

1. In your File or Project View, double-click your CSS file to open the file in the CSS editor.
2. In the lower left corner, click the IE Preview tab or Firefox Preview tab (shown below) to preview the file in CSS or IE.

   The Preview tab displays a default HTML page that demonstrates how your CSS will look in the browser (shown below).

## Related Topics

- Setting up your web browser configuration
- Adding a web browser configuration to your Favorites
- Previewing a project in a web browser
- Adding Firefox support to the Preview pane
- Previewing PHP, ASP and other non-HTML pages
- Configuring Aptana to use an external web server

Retrieved from "http://aptana.com/docs/index.php/Previewing_CSS"

Category: AptanaHelp