Defining a HTML Tag

This is the highest priority in the cascade, and an easy place to start learning what a CSS rule can do.

To do these exercises you need to download CSSExercises.zip to your hard drive (not the desktop) and unzip it.

Once the folder is unzipped, open the file in your text editior:

  1. open your text editor (TextEdit for Mac OS or Wordpad for Windows)
  2. go to the "File" menu
  3. choose "Open"
  4. locate the "CSSExercises Folder"
  5. open the "CSSExercises Folder"
  6. open "Tag.html"

You should see a bunch of HTML code like in "Figure 1: Code view of Tag.html file."

Figure 1: Code view of Tag.html file

Figure 1: Code view of Tag.html file

Take a look at this file in your preferred Web browser (version 5.x or later) to see what you're starting with. The steps to do this vary with the browser in use, but they start with the following:

  1. open your Web browser
  2. go to the "File" menu
  3. choose "Open" or some variant of it

The rest of the steps vary by the browser.

You should see something like this "No Style Sheet Rules" page.

After looking at the file in the browser switch back to the text editor. Our first style edit will occur in the first <p> tag which preceeds the text "Apply style sheet rules to this text."

  1. click inside the <p> tag to the right of the "p"
  2. hit the "space" bar on your keyboard
  3. enter the following string of text:

    style="font-size:2.0em"

    The tag now looks like: <p style="font-size:2.0em">
  4. save the file
  5. view in your browser
    1. switch to your browser
    2. on the toolbar click "Reload" or "Refresh"

If all went well, the text in the first paragraph will be approximately twice the size of the other text on the page as in "Defining a Tag Example." Welcome to style sheets!

So you may be asking, "Why em instead of points?" The "em" is a relative font size that may be resized by the user. This allows the user to increase the overall size of text on the page and "em" will resize proportionally. Points are absolute sizes and cannot be resized by the user depending upon the Web browser used. The user is stuck with this size whether the text can be read or not. Increase the font size for the page in your browser. Notice how all text gets larger and our style sheet affected text increases proportionally.

Let's repeat the previous exercise except change from "em" to "pt".

  1. click inside the <p> tag to the right of the "p"
  2. hit the "space" bar on your keyboard
  3. enter the following string of text:

    style="font-size:12pt"

    The tag now looks like: <p style="font-size:12pt">
  4. save the file
  5. view in your browser
    1. switch to your browser
    2. on the toolbar click "Reload" or "Refresh"

Increase the font size for the page in your browser. Notice how all text except the style sheet affected text increases in Internet Explorer for Windows. Users dependent upon increasing the font size to read the content will be out of luck. Because of this reason, avoid points (pt) and for text. Even if everyone changed to Firefox or some other browser, leaving everything relative helps keep your focus on the user and not on you.

When you're ready, move on to "Defining a Page."