How to Design CSS3 Styles Using CSSDesk - dummies

How to Design CSS3 Styles Using CSSDesk

By John Paul Mueller

Most IDEs used to create HTML, CSS3, and JavaScript files lack a designer interface, where you can immediately see the results of any code you create. Instead, you need to load the page to determine whether the coding changes you make actually create the effect you want. CSSDesk makes it possible to write code and immediately see the effect it has on the output.


The right pane shows the output as you make it. The default setup shows a simple Hello World example within a <div> element, but the editor works fine with any HTML code you provide. The HTML code appears in the upper left pane, while the CSS code appears in the lower left pane.

The main focus of this editor is creating the user interface for your application. However, you can modify the HTML pane to include <head> and <body> elements. Styles you create in the <head> section will appear in the output, just as if you had created them in a standard document.

Some scripting functionality will work, other functionality won’t. Inline scripts will generally work as anticipated, but don’t expect anything even moderately complex to work as expected. For example, creating a button like this:

<input type="button"
 value="Say Hello" />

produces the expected output, but calling an external function may not. In short, the JavaScript support is limited, so you might not always see the anticipated result when working with external libraries such as jQuery.