locked
How do I view the external style sheet of websites? RRS feed

  • Question

  • Of course I know how to view source for the HTML code, but is there a way to view the external style sheet of a website so that I could see what CSS code looks like?
    Thursday, June 20, 2013 2:49 PM

Answers

  • Sure. View the source HTML, and look for the CSS link in the head section. Firefox makes that a clickable link that will take you right to the stylesheet. However, even if your browser doesn't do that, you can see the file name/location and just type it into the address bar to open the file directly. You can do the same with any file that is referenced directly in the source code. Note that this won't work with server-side files, but for CSS, javascript, images, etc. it works great.

    Jim


    'Tis the business of little minds to shrink; but he whose heart is firm, and whose conscience approves his conduct, will pursue his principles unto death. Thomas Paine

    • Marked as answer by TommyVincent Thursday, June 20, 2013 8:41 PM
    Thursday, June 20, 2013 3:35 PM
  • The developer tools with most browsers allow you to see the CSS behind a page.

    In IE9/10 use 'Tools - Developer Tools' then 'CSS'. Note that this is showing the styles applied, not the contents of the stylesheets per se, and won't for instance, show any media queries.

    In Chrome it's similarly 'Tools - Developer Tools' and then 'Resources' then use 'Frames' - your site name 'Stylesheets. This does show the stylesheet contents fully.

    With Firefox you can view as described above and also get the Web Developer Toolbar add-in which can show all the stylesheets on one page.

    PS: The FF Style Editor add-in can also be useful in that you can edit styles on the fly. It also 'un-compacts' minified styelsheets.

    Opera has similar tools and the 'Dragonfly' add-in, which is similar to the Chrome tools.

    HTH


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Complete Web
    expression(web.blog)


    • Edited by Ian Haynes Thursday, June 20, 2013 4:00 PM added note
    • Marked as answer by TommyVincent Thursday, June 20, 2013 8:41 PM
    Thursday, June 20, 2013 3:53 PM

All replies

  • Sure. View the source HTML, and look for the CSS link in the head section. Firefox makes that a clickable link that will take you right to the stylesheet. However, even if your browser doesn't do that, you can see the file name/location and just type it into the address bar to open the file directly. You can do the same with any file that is referenced directly in the source code. Note that this won't work with server-side files, but for CSS, javascript, images, etc. it works great.

    Jim


    'Tis the business of little minds to shrink; but he whose heart is firm, and whose conscience approves his conduct, will pursue his principles unto death. Thomas Paine

    • Marked as answer by TommyVincent Thursday, June 20, 2013 8:41 PM
    Thursday, June 20, 2013 3:35 PM
  • The developer tools with most browsers allow you to see the CSS behind a page.

    In IE9/10 use 'Tools - Developer Tools' then 'CSS'. Note that this is showing the styles applied, not the contents of the stylesheets per se, and won't for instance, show any media queries.

    In Chrome it's similarly 'Tools - Developer Tools' and then 'Resources' then use 'Frames' - your site name 'Stylesheets. This does show the stylesheet contents fully.

    With Firefox you can view as described above and also get the Web Developer Toolbar add-in which can show all the stylesheets on one page.

    PS: The FF Style Editor add-in can also be useful in that you can edit styles on the fly. It also 'un-compacts' minified styelsheets.

    Opera has similar tools and the 'Dragonfly' add-in, which is similar to the Chrome tools.

    HTH


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Complete Web
    expression(web.blog)


    • Edited by Ian Haynes Thursday, June 20, 2013 4:00 PM added note
    • Marked as answer by TommyVincent Thursday, June 20, 2013 8:41 PM
    Thursday, June 20, 2013 3:53 PM