eMe: Some text pages

See more about:

Where are we?

You’ve learned some text tags, and a little about styling. You know how to make lists. You’ve read about writing for the Web.

Pages about stuff

Earlier, you thought about stuff you would put on your Web site. Time to make some pages. Create at least two.

If you can’t think of anything, write some pages about yourself. One about your history. Where you were born, schools you went to, like that. The second page could be about your interests. Hobbies, music you like, games you like, etc.

Create a few more pages, if you want. Go over your list of interesting stuff.

Styling

All the pages should use the same style rules. Pick a typeface you like, colors, and so on. You can start with the basic text styling pattern, or start from scratch. Mess around, and find something you like.

External style sheets

Say you make four pages. They all have the same styles. One way to do this is to get the style right on one page, then copy-and-paste the <style> section into the other pages.

The problem is this: what if you decide to change the styles? Suppose you set the background color of all the pages to #FFFFC0, a brightish yellow. Then you decide you like #FFFFEE better. It’s a very pale yellow. You would have to open every HTML file, and make the same change. It would be easy to make a mistake.

You’ll learn more about color codes later.

There’s a better way:

  • Create a separate file that contains only CSS styles.
  • In all the HTML files, add a link to the CSS file.

For example, suppose I had this page. Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>A page</title>
    <style type="text/css">
      body {
        background-color: black;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #FEFEF2;
      }
      h1 {
        color: #FFD700;
      }
      </style>
  </head>
  <body>
    <h1>A page</h1>
    <p>This is a page.</p>
  </body>
</html>

Figure 1. A page

The first thing I do is remove all the CSS rules, and put them in a separate file. I’ll call the file styles.css, though I could call it whatever I like. Usually I give the file a .css extension, though I don’t have to. I’ll put the file in the same directory as the page.

I could put it in another directory. We’ll see that later.

Here is styles.css:

body {
  background-color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #FEFEF2;
}
h1 {
  color: #FFD700;
}

Figure 2. styles.css

Notice that the <style> tag isn’t there. It’s HTML, and does not belong in the file.

Now, I delete the <style> section from page.html, and replace it with this:

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

I put the name of the file I just created in the href attribute. Don’t forget the extension.

Here’s what the HTML file looks like now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>A page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>A page</h1>
    <p>This is a page.</p>
  </body>
</html>

Figure 3. HTML file with external style sheet

The page will look the same as before. Have a look.

Reusing the style sheet

I can use this line in as many files as I like:

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

I could have a hundred pages using the styles, if I want.

The <body>’s background color is black. You can see that in line 2 of styles.css:

background-color: black;

Suppose I want the background on all pages to be dark gray. I change this one line in styles.css:

background-color: #404040;

Every file that links to styles.css will change. If that’s 100 pages, then 100 pages change. W00f!

eMe: Text pages with external styles

Write some pages about something on your interesting stuff list. Create at least two, but more if you like.

Make sure all the pages use the same style rules. Use an external style sheet. You can put all the files in the same directory.

Upload your files to your server. Put the URLs of the files below.

(Log in to enter your solution to this exercise.)

Summary

  • Using an external style sheet lets you change many pages at once.

What now?

Time for some more exercises.


How to...

Lessons

User login

Log in problems? Try here


Dogs