W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

Firefox Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


4. The Style Editor in Firefox, Tutorial


Share it

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.

  1. Open ⁄ Close:
    • Tools-Web Developer-Style Editor
    • shortcut: Shift + F7
  2. modify the current style
  3. import new style sheet
  4. 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