How to use the Style Editor In Web Browsers

The Style Editor provides various options and colorful UI for the developers to use. It is divided into three sections and each one of these are discussed below:

1. List of Styles Sidebar

In this section you basically get the list of all styles and various options to filter and add styles. The various options are:

• Create New Stylesheet: In the above image the plus icon is used to create new CSS file but with a default name of the file.

• Import: This option used to import CSS file on clicking brings up the locate window to locate the CSS file to import from you system.

• Filter Stylesheet: You can search any particular styles using the search bar provide this helps developers to save time as the can directly start working on the particular CSS files.

• Style Editor Options: The gear icon just provide two options one Show Original Source and Show At-rules sidebar. If you checked Show Original Sources then only the styles which is part of the source code. If you checked Show At-rules sidebar the Sidebar which displays the at-rules is activated.

• Visibility: You can press the eye icon present in every listed styles to disable the styles and check the changes instantly. The is very handy option which allows to work on the styles which are already defined.

• Save the Stylesheet: You get a Save button working as a export button to save the file in your system. On clicking the Save button a locate window is popped up to locate the location where you want to save the files.

2. Editor for Selected Styles

This is the editor which the developers can used to change and styles and add new styles. The editor is simple and color coded if you want to work on a code editor with additional features just copy the codes. You can use the editor only when you want o change some styles or add less CSS just to check the webpage change.

3. At-rules Sidebar of Selected Styles

The styles that is currently selected displays the @-rules such as @media, @supports, @layer, @container. You also get link to the line no. for @media and if it is not active then its grey out. The At-rules sidebar is basically used for checking responsiveness in the webpage, you get width information which is basically a link and clicking it will change the webpage width to that specified width.

The Firefox browser allows users to edit and create new styles on their web pages using the Style Editor. The Style Editor provides you with a space to edit and view the CSS used on the site. You can create your own CSS file or import it from your system. The Style Editor also allows you to save a CSS file that can be used in the development source code.