4. The Style Editor in Firefox, Tutorial
Learn to use the Style Editor
Part of the Web Developer Tools, the Style Editor allows you to inspect and edit the Style of a web page.Once accessed, the Style Editor window loads both the internal and external style sheets which can now be manipulated as you wish:deactivate ⁄activate ⁄modify ⁄save a copy on your computer ⁄import and test new styles on the current web page.
Inside the Style Editor window you can modify and test the style as you wish, without a worry. These modifications are temporary, viewable by YOU only on your own computer. Once you refresh your web Browser, they disappear.
- Open ⁄ Close:
- Tools-Web Developer-Style Editor
- shortcut: Shift + F7
- modify the current style
- import new style sheet
- create new style sheet
Video demonstration Firefox Style Editor
4. The Style Editor in Firefox, Tutorial
min | video details |
---|---|
00:12 | OPEN ⁄CLOSE Style Editor: |
00:12 | open Style Editor -Tools menu |
00:16 | close Style Editor -click on 'x' |
00:19 | open Style Editor -shortcut |
00:31 | Note: the style displayed in Style Editor window is the style from your HTML file(internal style sheet) and⁄or your CSS file(external style sheet) and can be seen in Page Source Code |
00:50 | in 'view Page Source' you can't modify the style, you can only view it |
00:56 | in Style Editor window you can modify the existing style, create new style sheet, disable existing style sheet or importing a new one and test it |
01:00 | USE Style Editor: |
01:00 | Style Editor -delete CSS rule |
01:14 | Style Editor -disable style sheet |
01:15 | Style Editor -enable style sheet |
01:22 | Style Editor -modify CSS rule |
01:29 | Style Editor -add CSS rule |
01:42 | Style Editor -save the style sheet |
01:52 | Style Editor -import style sheet |
02:19 | Style Editor -create style sheet |
02:46 | Style Editor -save the recently created style sheet |
03:24 | if you have both internal and external style sheets in your HTML page, Style Editor will display them accordingly so you can work on the one you want |
03:55 | External style sheets can also be modified in Style Editor window |