If you run into troubles, got a suggestion, or issue, please e-mail firstname.lastname@example.org
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.
Lets try changing the style of the static site generator (SSG) example site:
- Press F9 or select "Static site generator" in the right-click menu.
- Click the Preview button in the SSG widget
- In the SSG widget click on Open/edit file button.
- 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.
- 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:
And the heading color should have updated in the preview window!