mozilla
Your Search Results

    Style Editor

    This translation is incomplete. Please help translate this article from English.

    The Style Editor enables you to:

    • view and edit all the stylesheets associated with a page
    • create new stylesheets from scratch and apply them to the page
    • import existing stylesheets and apply them to the page

    To open the Style Editor choose the "Style Editor" option from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac). The Toolbox will appear at the bottom of the browser window, with the Style Editor activated:

    On the left (or the top, if your window is very narrow) is a list of all the style sheets used by the document, and on the right (or the bottom, if your window is narrow) is the source for the style sheet you've currently selected in that style sheet pane.

    The style sheet pane

    The style sheet pane, on the left, lists all the style sheets being used by the current document. You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. You can save any changes you've made to the style sheet to your local computer by clicking the Save button in the bottom-right corner of each sheet's entry in the list.

    The editor pane

    On the right is the editor pane. This is where the source for the selected style sheet is available for you to read and edit. Any changes you make are applied to the page in real time. This makes it really easy to experiment with, revise, and test changes to your page's appearance. Once you're satisfied with your changes, you can save a copy locally by clicking the Save button on the sheet's entry in the sheet pane.

    The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. See Using the Source Editor for documentation about the editor itself, including useful keyboard shortcuts.

    A particularly handy feature to the Style Editor: it automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.

    Creating and importing style sheets

    You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles apply in real time just like changes to the other sheets.

    You can load a style sheet from disk and apply it to the page by clicking the Import button.

    See also

    Document Tags and Contributors

    Contributors to this page: fscholz, maybe, Helmcke42, Kbaby
    Last updated by: maybe,