Logo of the best adult webmasters' tutorials website.

External Style Sheets Tutorial

←... Good Coding Practices

Using External Style Sheets...

So far, in the tutorials, we've been dealing with a single web page. But, chances are, you'll be building a web site with multiple pages.

In the HTML days, unless we wanted every page to be black and white, we would have to write and re-write the same code over and over again for every page of our website.

Using external style sheets, we can apply style rules across an ENTIRE website from a SINGLE Cascading Style Sheet (CSS).

Behold The Power of CSS...

Let's pretend were making a web site by making a couple of pages. First, remove all of the style declarations from the <head> section, making it look like this...

<html>
  <head>
    <title>ChangRox.com</title>
  </head>
  <body>
    <p class="crrt">Hello World!</p>
    <p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
    <p>The site for extolling the virtues of Chang.</p>
  </body>
</html>

Save it then open a NEW Notepad window to create a second page for our site by copying/pasting the following into it...

<html>
  <head>
    <title>ChangRox.com-(page two)</title>
  </head>
  <body>
<!-- This is the beginning of the body of my page. -->
    <p>Here are some heading tag examples...</p>
    <h1>Large Heading on Page Two</h1>
    <h2>Medium Heading on Page Two</h2>
    <h3>Small Heading on Page Two</h3>
  </body>
</html>

Save the file as "pagetwo.html" to your htdocs directory then close it.

Creating the External Style Sheet...

Open another NEW Notepad window and copy/paste our previous style rules into it...

body {
  background-color: silver;
  font-family: Arial;
}

.crrt {
  color: red;
}

.dingleberries {
  color: red;
  font-weight: bold;
  font-style: italic;
}

Save the file in your htdocs directory as "changroxstyle.css" (make sure of the .css extension) and LEAVE IT OPEN. Notice that we don't have to include <style> tags. In naming the file with the .css extension, the browser already knows that what we're writing is CSS and not HTML.

Note that including the word "style" in the file name is traditional/optional. It has nothing to do with the output as you can name the stylesheet anything you want as long as the .css extension is in place.

Refresh index.html in your browser window and you'll see that it's back to the plain ol' ugly page. That's because we haven't told the browser where to find our newly created external style sheet. Add this to index.html's code in the <head> section...

<html>
  <head>
    <title>ChangRox.com</title>
    <link rel="stylesheet" type="text/css" href="changroxstyle.css" />
  </head>
  <body>
    <p class="crrt">Hello World!</p>
    <p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
    <p>The site for extolling the virtues of Chang.</p>
  </body>
</html>

Save/refresh and you'll see that the style from changroxstyle.css has now been imported into our page. Can you see how absolutely powerful this is? Editing just one file, you can effect every page of your website!

Note the trailing space and forward slash in <link rel="stylesheet"... />. It's there because the <link> tag, as well as some others, has no closing tag. This is required by the W3C for valid XHTML/XML pages, but it is considered invalid for HTML.

So why am I telling you to do it? To get you into the habit! After you become the HTML master that I know you will, the next natural progression will be towards pages that utilize Server Side Includes (SSI) which require different document types that need the trailing space/slash to be valid.

Even though it's technically invalid in pure HTML pages, the trailing space/slash will be correctly interpreted by all browsers.

In order to see the result on "pagetwo.html" let's first learn how to create a link to it...


CSS Hyperlinks Tutorial... →



Valid XHTML 1.0 Transitional Valid CSS!

© 2008 - 2011 fapmaster.com