Web Design

Fork me on GitHub

External Style Sheet

Learn It

  • Last term, we have learned how to style our webpages by placing some CSS (cascading style sheet) code between the start <style> and the </style> tags in between the head tags.
  • Professional web developers prefer to use separate CSS files also known as external style sheet so they can use the same style sheet on different webpages(html files) without have to write the same code again and again.
  • For those who have already learned how to separate the CSS from the html files and link them together, you an skip this session and move to the next. For those who have not, read on.
  • Using an external style sheet is especially useful when you want to change the look of all your webpages. Because you only need to change one style sheet file and then all the webpages use this style sheet will all have been changed.
    • To sparate the CSS style sheet from your webpage html file, do the following:
      1. Open a new file using Sublime Text or Notepad.
      2. Open your existing webpage file with style using Sublime Text or Notepad.
      3. Hightlight to select all the content in between the <style> and </style> in your webpage file. (not select the <style> and </style> tage).
      4. Cut the slection (Ctrl-X).
      5. Go to the blank new file and paste the selection (Ctrl-V)
      6. Save the new file as style.css in the same folder as your webpage file.
      7. Go back to your webpage file, remove the two style tags. In its place, add the link to your new styles.css file using the code below: 
        <link rel="stylesheet" href="style.css">
      8. Save your webpage file and test to see if your webpage still looks the same.
  • You can also follow this video tutorial to learn how to use external style sheet.