Printed from TeacherJohn.com • http://www.teacherjohn.com/cabrillo/dm60a/exercises/ex05.php

Exercise 5
Cascading Style Sheets (CSS)

Resources for this exercise:

In this exercise we will switch from the "HTML 4.01 Transitional" standard to a stricter standard, "XHTML 1.0 Strict". Because a "Strict" standard (as opposed to a Transitional standard) means that we can no longer use HTML to format the look of our pages, we will start using cascading style sheets to format our pages.

In this exercise you will create a Web page, and a separate document — an external style sheet — that will contain the instructions to change the look of the Web page. See the CSS Basics tutorial page for information on how to do this.

Step 1 - Create your exercise 5 page

1.1) Using a basic text editor, create a Web page for exercise 5.

1.2) This page must display your name and say "Exercise 5".

1.3) This page must contain a link with a relative path to your home page.

1.4) This page's <title> must indicate that this is your exercise 5 page, so it should say something like "John Sky's DM60A Exercise 5".

1.5) This page must contain the DocType that will enable you to use an HTML validator (as explained in How to Use the W3C HTML and CSS Validators).

But, now we are switching to a stricter DocType. Starting with this exercise, use the XHTML 1.0 Strict DocType, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Note that a "strict" DocType means that you cannot use any deprecated elements or attributes (such as the <font> element, or the align or target attributes).

Also note that an XHTML DocType is a little more restrictive than an HTML DocType. For example, in XHTML:

1.6) When you use the above DocType, you will also need to use the following for your <html> tag:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

1.7) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. Make sure you use the code for XHTML 1.0 Strict, not HTML 4.01 Transitional, as you are using an XHTML, not an HTML, DocType. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

Because now we are switching to the XHTML 1.0 Strict DocType, use the following code for the validator buttons (so the button says "XHTML 1.0"):

<p>
<!-- XHTML 1.0 validator code using image links -->
<a href="http://validator.w3.org/check/referer"
style="background-color: transparent">
<img style="border-style:none" width="88" height="31"
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" /></a>
&nbsp;&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer"
style="background-color: transparent">
<img style="border-style:none" width="88" height="31"
src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
<!-- end validator code using image links -->
</p>

Or, if you prefer text links instead of the button images on your page, use this code, which will say "Valid XHTML" instead of "Valid HTML":

<p>
<!-- XHTML 1.0 validator code using text links -->
<a href="http://validator.w3.org/check/referer">Valid XHTML</a>
&nbsp;&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
<!-- end validator code using text links -->
</p>

1.8) This page must demonstrate the use of at least five different style rules. (In the next step you will create an external style sheet, consisting of at least five rules. Your page must utilize these rules.)

1.9) This page must contan a <link> tag in the <head> section that links this page to your external style sheet. Because your external style sheet will be uploaded into a folder called "css" that you will create within your "public_html" folder, the relative path from this page to your external style sheet will look something like this: "css/exercise5.css". So your <link> tag will look like this:

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

1.10) Save this page as "exercise5.html".

Step 2 - Create your external cascading style sheet

2.1) Using a basic text editor, create an external style sheet.

2.2) This style sheet must contain at least five CSS rules.

2.3) The style sheet must be saved as a text (or ASCII) document, just as a Web page would be saved as text. Remember to name your external style sheet with a ".css" file name extension ("exercise5.css" for example).

Step 3 - Upload and validate your page and external style sheet

3.1) Upload your Web page to your "public_html" folder on the server, as you normally would.

3.2) Create a folder called "css" directly inside of your "public_html" folder.

3.3) Upload your external cascading style sheet into your "css" folder that is within your public_html folder.

3.4) View your page (the page on the server, not the page on your local disk) in a browser. If you can, view your page in at least two different browsers to make sure it works properly! Note that some styles may not work in very old browsers such as Netscape 4 — but your page should still look OK, even if some styles don't work in old browsers.

3.5) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DTD) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

3.6) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

Note that when you use the CSS validator to check a page that has a link to an external style sheet, the CSS validator will follow the link from the page to the style sheet to see if the styles are valid. But if you get the "No style sheet found" warning it probably means that the path in your <link> tag to the external style sheet is incorrect (and your styles will not show up).

3.7) If there are any errors, fix them, re-upload the page or style sheet, and validate them again.

Step 4 - Modify your home page

4.1) Modify your home page to include a link that goes to your exercise 5 page. Make sure your home page has a working link to each of your completed exercises

4.2) As always, your home page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

You do not need to make your home page validate to the stricter standard; you can leave the DocType and validator links the way they are.

4.3) Make sure your home page validates, with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can now easily do this by clicking on your validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

4.4) If you have used any CSS on your home page, make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

4.5) If there are any errors, fix them, re-upload the page, and validate it again.

Step 5 - Submit the feedback form

5.1) Submit the feedback form. To receive full credit for this exercise you must submit the feedback form before it expires. This exercise is due on 7/3/08. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 07/05/08.