Learning To Use External Style Sheet

An external style sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages. External CSS is a file that contains only CSS code and is saved with a “.css” file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>. This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.

Other useful CSS articles:

Example:

Write the following into a plain text file, and save with a .css extension (i.e. my_style_sheet.css). Make sure that you are not saving it as a text (.txt) file, as notepad likes to do by default. Here is the CSS code;

body{ background-color: yellow;}
p { color: red; }
h3{ color: green; }

Add the following between the <head>…</head> tags of all HTML documents that you want to reference the external style sheet.

<link rel=StyleSheet href="my_style_sheet.css" type="text/css">

Now create a new HTML file.

<html>
<head>
<link rel="stylesheet" type="text/css" href="my_style_sheet.css" />
</head>
<body>
<h3> A Green Header </h3>
<p> This paragraph has a red font.
The background color of this page is yellow.</p>
</body>
</html>

Then save this file as index.html in the same directory as your CSS file. All of your HTML documents will use the styles from your external style sheet resulting in a consistent look and feel. If you want to change anything, you only need to update the external style sheet.

Summary

Advantages:

  • It keeps your website design and content separate.
  • Developers may share style sheets across a number of documents and sites.
  • Authors may change the style sheet without requiring modifications to the document.
  • User agents may load style sheets selectively (based on media descriptions).
  • Authore can make drastic changes to web pages with just a few changes in a single CSS file.

Disadvantages:

  • An extra download is required to import style information for each document.
  • The rendering of the document may be delayed until the external style sheet is loaded.
  • Becomes slightly unwieldy for small quantities of style definitions.

In Closing

Remember to share the article if you’ve enjoyed it – and leave us a comment.