Firefox Developer Tools - Style Editor

Using the style editor, you can develope new experiment with css.

Left hand side list all the stylesheet loaded by the page,

and the right hand side, it shows you currently selected stylesheet in the editor.

You can modify the existing rules.

You can add new rules.

You can see the effect immediately.

You can add new sheets too.

In this website, I written in html and javascript, but haven't get styled the content.

To create new sheet, click new.

I set the background colour, and set a button.

Next I centre the map.

Finally I'll styled the button.

To make this change permanent, click save.

And I link this stylesheet to my html.

Close the style editor,

and reload the page.

This is just a really quick introduction, for the style editor

For more information, visit developer.mozilla.org