Supplement to Tutorial 3 – HTML and XHTML by Patrick Carey

I’m frustrated with parts of the HTML and XHTML book by Patrick Carey that we are currently using in class. I could switch books, but it’s difficult to find a book that combines all of the building blocks of web design, XHTML, CSS, some JavaScript, and is comprehensive enough for students to feel that they can build their own web site when they have completed the unit.

Why am I frustrated?

Because I want you to learn to create, clean, XHTML compliant pages that separate content from style using XHTML and CSS (Cascading Style Sheets). While this book does that eventually, I think that it may also teach you some bad habits that I would like you to avoid using.

Where the Bad Habits Begin

Tutorial 3 is an introduction to designing web pages. In this lesson you learn about using the style attribute to control the appearance of text within an HTML/XHTML document; I don’t agree with this. You see in the “olden” days, we used tags like font to apply changes to the font face, color, and size; pages were littered with these font tags and it made updating pages a difficult task because every time the developer/designer wanted to update a font on a site they had to edit every page that contained the font tag.

The style attribute when used within tags is akin to the font tag; the author of the HTML and XHTML book has simply replaced the usage of the font tag with the inline style attribute. Pages will still be difficult to edit and update, they will still be filled with extraneous styles that are better separated from the structure of the document.

How is the Style Attribute Used in the Book?

Here is an example from page 114 using the style attribute to control the body element.

[code lang="xml"]

[/code]

body is a tag, style is an attribute of the body tag and many others. Everything after the equal sign and between the quotation marks is CSS. The style attribute is defining how the overall web page will look. It is setting the font color to the rgb value (153, 102, 102) – a dusty rose – and the background color of the page to white.

Usage of the style attribute is repeated on page 115 and throughout much of the book:

[code lang="xml"]
welcome

[/code]

Here the h1 tag is re-styled to display white text and have a background color of rgb(153, 102, 102) which is kind of a dusty rose.

So What’s So Wrong With This?

Let’s imagine that you have 30 or 40 pages in a web site that are littered with all of these style attributes. Your boss tells you that you have to update the color scheme from a dusty rose to a seafoam blue. Uggg, in order to do this you must open all of the site pages and update all of the values used by the style attribute. That’s a lot of work. I also think that using the style attribute confuses people who are new to writing XHTML.

What Do You Do Instead?

As I mentioned earlier, all of the code between the quotation marks is actually CSS, so you are learning something very good! It’s just that you need to learn to use CSS the right way.

CSS or Cascading style sheets are used to control the style or design of the site. The book is teaching you how to use CSS “inline” which is not a good method. Instead, developers use CSS in an external file; by using an external style sheet the entire design of at site can be controlled via one file. This means that if you have to update that 30-40 page site you only have to open one file and update a few lines of code. This is a good thing. Unfortunately, the correct method of using CSS is not taught until Tutorial 7.

So How Do I Convert My Inline Styles to External Style Sheets?

Ok, let’s use the Arcadium lesson in Tutorial 3 as our example. Here is the finished about.htm page that you created during the tutorial in lesson 3. Currently, the about.htm page uses inline styles.

In order to use external CSS files you must create a new blank file in HomeSite (no HTML/XHTML code in the file). Save this file as arcadium.css (CSS files always use the extension .css) and make sure that it is saved into the htmlxhtml/tutorial03/tutorial folder (this is the same folder as the about.htm file). We will return to this CSS file in a minute.

Making Your Documents XHTML Compliant

Now open the about.htm file in the folder htmlxhtml/tutorial03/tutorial in HomeSite. (If you are not in my class and you want to follow along, here is the about.htm file, the about.jpg, and the logo.gif files you will need. You can save them to your hard drive and follow along). Delete all code above the opening body tag in the about.htm file.

If we’re going to convert this file to use an external style sheet, we should make it XHTML complaint also. The first step to making the document XHTML compliant is to add the DOCTYPE statement to the top of the page (first line of code) like this:

[code lang="xml"]






[/code]

I am not going to go into a lot of detail about the DOCTYPE statement here. You can read more about making your documents XHTML compliant in my tutorial Making Documents XHTML Compliant.

Stripping the Style Attributes

Here comes the hard work, we have to move all of the style values from the about.htm file into the arcadium.css file. We will start with the body tag; highlight the following code within the body tag:

[code lang="xml"]
style="color: rgb(153,102,102);
background: white url(draft.jpg) no-repeat fixed center center"
[/code]

and press CTRL+X on your keyboard to Cut the attribute/value pair.

Switch to arcadium.css and paste the code by pressing CTRL+V.

Now, in the arcadium.css file, delete style=” and the ending quotation mark, leaving all of the code between the quotation marks like this:

[code lang="css"]
color: rgb(153,102,102);
background: white url(draft.jpg) no-repeat fixed center center;
[/code]

Click in front of the word color and press enter; this will create a blank line above the code.

Now, we want to apply this style to the body selector, so on the blank line we just created we add the following code:

[code lang="css"]
body {
[/code]

We need to close the CSS ruleset, click your mouse after the word center and add a semicolon to the end of the line and press enter. Type } to end the ruleset. Your finished ruleset should look like this:

[code lang="css"]
body {
color: rgb(153,102,102);
background: white url(draft.jpg) no-repeat fixed center center;
}
[/code]

I would recommend that when you write your CSS code you place each selector on its own line followed by the bracket {. Then place each property and value pair followed by a semi-colon ; on their own line. At the end of the block, on its own line, place the closing bracket } as demonstrated in the above example.

Ok, that was pretty easy. Why don’t we try to tackle the next occurrence of the style attribute.

Using ID

If you look at the about.htm file you will see that the style attribute is used on the p tag like this:

[code lang="xml"]

[/code]

Now this is a little more tricky, if we redefine the selector p with CSS, every occurrence of the p tag on the page will be centered and that’s not what we want. Instead, we only want that single occurrence of the p tag to be centered. We need to identify the p tag so we use an ID, let’s get started.

Cut the style attribute/value pair:

[code lang="xml"]
style="text-align: center; font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em"
[/code]

and paste it into the arcadium.css file leaving one blank line below the last }

Return to the about.htm file. Position your cursor in the p tag and press space, type id=”links” and remove any extra spaces before the closing > like this:

[code lang="xml"]

[/code]

Now we have given this p tag an id (identification) of links, and we can style the links selector anyway we like. The links id we just created can only be used once in our XHTML document.

Return to the arcadium.css file and delete the style=” and the ending ” so that you are left with the following:

[code lang="css"]
text-align: center; font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em
[/code]

Position your cursor at the beginning of the text-align line and press enter. Position your cursor on the newly created blank line and type the following:

[code lang="css"]
#links {
[/code]

Note: when you are using an ID selector it must be preceded by a # sign in the CSS code.

Make sure to close the last ruleset with a semicolon, place each ruleset on its own line and add a closing } to the entire declaration like this:

[code lang="css"]
#links {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
[/code]

This Doesn’t Work!

So you went and checked your about.htm page in the browser without my telling you too and it’s not working. Well of course it’s not working, we haven’t finished yet and I didn’t tell you to check your page yet.

Linking the XHTML File to the External CSS File

In order for the about.htm file to read the arcadium.css file you must create a link from the .htm file to the css file. This link is created in the head section of the document and it looks like this:

[code lang="xml"]

See how it is placed right above the closing head tag. Add that line of code to your own about.htm page.

Save the about.htm page and the arcadium.css file. Preview the about.htm page in your web browser. Don’t try to preview the CSS file, you can’t preview it in a browser. You can add that link tag to all of the XHTML documents in your site and they will be able to use the same CSS file! Not bad eh?

The h1 Tag

Ok, now try the same technique on the h1 tag, the finished declaration should look like this:

[code lang="css"]
h1 {
color: white;
background-color: rgb(153,102,102);
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
letter-spacing: 1em;
text-indent: 1em;
}
[/code]

Redefining all of the p Tags

Now we want to apply the same style to the remainder of the p tags, so remove the style attributes from all of the p tags in the remainder of the about.htm file. In the arcadium.css file, use the following ruleset:

[code lang="css"]
p {
text-align: justify;
}
[/code]

To Span or Not to Span

We need to clean up the following code:

[code lang="xml"]

Arcadium
[/code]

Instead of putting all this font junk in the html document, we can give the span an id, just like we did with the p tag earlier. Here is the code that we used:

[code lang="xml"]

[/code]

Cut the style attribute/value pair and paste it into the arcadium.css file; alter the declaration to look like this:

[code lang="css"]
#heading {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
[/code]

Add the id heading to the span tag in the XHTML file like this:

[code lang="xml"]

[/code]

Finishing Up

The hr and address tags are handled in the same manner (come on, you can do it now!). Here is the CSS code for both selectors:

[code lang="css"]
hr {
color: rugby(153,102,102);
background-color: rgb(153,102,102);
clear: right;
}
address {
text-align: center;
font: normal 8pt Arial, Helvetica, sans-serif;
}
[/code]

The Results

Here is my completed about.htm file and here is the CSS file (use Firefox to preview the CSS.

One More Problem – HTML Entities

The book uses some HTML entities (characters or symbols), that will not validate. I would recommend that you use this chart to find the codes for symbols used in your documents. In order to make this truly XHTML compliant, you need to replace the bullets at the bottom of the page
[code lang="xml"]
•
[/code]
with the correct code
[code lang="xml"]
•
[/code]

You will also need to remove the extra spaces from the HTML tags.

Let’s Wrap it Up

You should be able to preview your about.htm page and it should look exactly the same as the original pages. The difference is, you are now using clean, standards compliant XHTML code with CSS that will validate as XHTML Transitional.

Reference:
Alt Tags
CSS Shorthand Properties
Efficient CSS with shorthand properties
CSS Beginner’s Guide
Introduction to CSS