If you run into troubles, got a suggestion, or issue, please e-mail editor@webtigerteam.com

# Designing a web/app using CSS and live preview

When previewing a web site, the editor will automatically reload the style-sheet when the corresponding CSS file is saved.

And you can click on any element in the preview window to navigate to the corresponding CSS rule.

## Example

Lets try changing the style of the static site generator (SSG) example site:

1. Press F9 or select "Static site generator" in the right-click menu.
2. Click the `Preview` button in the SSG widget
3. In the SSG widget click on `Open/edit file` button.
4. In the file-open-widget type "style.css" (without the quotes). And press Enter on your keyboard, or click on the path to style.css in the list.
5. Select the preview window and click on the header "About me".

If you followed the steps above you should now have opened the style sheet (CSS) file for the example site.
Try changing the #hex color to red.
Then press `Ctrl + S` to save the file, or right click and select "Save file" in the menu.

The CSS rule should now look like this:

h1 { font-size: 3em; margin-top: 2em; margin-bottom: 0.5em; font-weight: bold; color: red; }

And the heading color should have updated in the preview window!

- ⬅Go back
- ⬆Index