Digging Into the Design of a Website

There are now many websites on the Internet that use CSS. Uncovering a website's CSS is quite easy, potentially revealing a treasure trove of CSS code to inspire you.

Starting at the Page Source

On any website, start digging for CSS by looking into the page source.

To view the source code on a website:

  1. In your browser:
    • For Opera, click View | Source
    • For Firefox, click View | Page Source
    • For Internet Explorer 6 or earlier, click View | Source
  2. Find the head section between <head> and </head>
  3. If you see a style section inside the head section: <style> </style>, then you can see the Inline CSS code inside these tags.
  4. If you see a reference to an external stylesheet:

    <link rel="stylesheet" href="nameofstylesheet.css" type="text/css">

    You need to dig a bit further.
  5. If you do not see a style section or a reference to an external stylesheet, then the site does not use CSS.

Finding External CSS files

Finding external .css files takes a bit of digging. The href="nameofthestylesheet.css" reference is the key.

To find a File-Name-Only Reference

If the href= reference has only a file name like this:

"nameofstylesheet.css"

  1. Copy nameofstylesheet.css from between the quotes.
  2. Go back to the web page.
  3. In the URL window in your browser, delete the page filename from the URL.

    This is everything from the right of the last / to the end of the line.

  4. Paste the nameofstylesheet.css from step 1 to the end of the text in the URL window.
  5. Press enter.

    You should see the CSS code from the .css file or be prompted to download a .css file.

  6. If you do not see the CSS code, or are not prompted, you need to modify the URL again.

    See the instructions below for more options.

To find a File-Name and Single-Directory Reference

If the href= reference specifies a directory as well as a file name like this:

"./css/nameofstylesheet.css"

  1. Copy css/nameofstylesheet.css from between the quotes.

    (Note: you do not need the ./ from the reference.)

  2. Go back to the web page.
  3. In the URL window in your browser, delete the page filename from the URL.

    This is everything from the right of the last / to the end of the line.

  4. Paste the css/nameofstylesheet.css from step 1 to the end of the text in the URL window.
  5. Press enter.

    You should see the CSS code from the .css file or be prompted to download a .css file.

  6. If you do not see the CSS code, or are not prompted, you need to modify the URL again.

    See the instructions below for more options.

To find a File-Name and Several-Directories Reference

If the href= reference specifies a directory as well as a file name like this:

"../css/nameofstylesheet.css"

  1. Copy css/nameofstylesheet.css from between the quotes.

    (Note: you do not need the ../ from the reference.)

  2. Go back to the web page.
  3. In the URL window in your browser, delete the last directory and filename from the URL.

    This is everything from the right of the second last / to the end of the line.

  4. Paste the css/nameofstylesheet.css from step 1 to the end of the text in the URL window.
  5. Press enter.

    You should see the CSS code from the .css file or be prompted to download a .css file.

  6. If you do not see the CSS code, modify the URL again according to the pattern you can see forming here, or go to another website that might have an easier reference to hunt with!

    Getting the hang of the directory and file structure of websites can take a bit of practice.

Viewing the External CSS for This Page

Yes, feel free to explore the CSS for this page (and this website) as an exercise.

To view the CSS for this page:

  1. View the page source.
  2. Find the reference to the external .css file.
  3. Copy css/nameofstylesheet.css from between the quotes.

    (Note: you do not need the ./ from the reference.)

    In this case copy: css/style2.css

  4. Go back to the web page.
  5. In the URL window in your browser, delete the filename from the URL.

    This is everything from the right of the last / to the end of the line.

    In this case delete: csstutorialDigging.html

  6. Paste the css/nameofstylesheet.css from step 1 to the end of the text in the URL window.

    In this case paste: css/style2.css

  7. Press enter.

    You should see the CSS code from the .css file or be prompted to download a .css file.

  8. If you do not see the CSS code, replace the entire URL with:

    http://www.oocities.org/SoHo/Lofts/8681/css/style2.css

CSS Tutorial Introduction

Understanding Basics and Definitions

Creating a One-Page Website

Adding Navigation for Multi-Page Websites

Digging Into the Design of a Website

Finding References to Good Website Design

Glossary