As the semester winds down, and the holiday season encroaches, it seems there are more and more events to publicize, greetings to send, end-of-year newsletters to distribute, holiday sales to promote, etc. T'is the season for HTML e-mails. Alas, as many of you know, creating and distributing an HTML e-mail message is far more complicated than building a regular Web site. As we struggled in the days of the browser wars, today we struggle with the myriad ways popular e-mail programs support HTML. Anyone who has had to create an HTML e-mail message, or has received one they couldn't read, knows what I mean. So today I'll present five tips that should help to make your e-mails readable by the masses.

Throughout this article I'll refer to the sample Gothfest 2009 e-mail pictured (in various renditions) on the right. This sample was created with certain features in mind to demonstrate how such an e-mail will render in different programs.

1. Use images to convey a mood or theme, not to present content.

In many popular e-mail programs, the default preference is to have images turned off in incoming messages. Thus many of us receive e-mails with little boxes and some indicator that says "click here to load images." If you are like me, you rely on the remaining text of the message to make you decide if you should bother or not. Recently I received a message from a well-known business magazine in which the only text provided stated only the name of the magazine and its address. The subject line was equally informative in that it said something like "Special News Update from Magazine X."

The rest of the content was contained in .jpg files linked in the message. This is problematic for two reasons:

1. Sighted readers, such as me, have no way to judge whether the message is worth reading (or not) unless we click on the image. If we're busy reading through a long list of e-mails we may just send it to the trash. If the sender didn't care enough to present the information clearly, then why should we care enough to read it?
2. Readers with vision problems who rely on screenreading software have no way to read a message that is part of an image. They are relying purely on the text of the message and any "alt text" provided for the image. This particular message didn't include any "alt text" so the message was lost to such recipients.

We all want our messages to be read. To ensure that they are readable by everyone in your audience, just be sure to include all the important points as actual text. This doesn't mean you can't use images to add visual interest, it just means that your message will be accessible to everyone whether they can see the pictures or not.

In the Gmail screenshot on the right we see a sample message without images. The original file contains two images, a picture of Death and a white background image with shaded edges. Because the content is text-based the main message is available and the alt text provides a description of the missing photo. This would also be readable in a text-only mail program with no colors or styles available.

2. Use Tables for Layout (WHAT????)

Most of us know that tables are meant for tabular data and CSS is meant for style and position. Alas many e-mail programs, including Gmail, don't support the positioning features of CSS. If you want to put text on the left and an image on the right—as I did in the sample— and you can't use the float property of CSS, you're stuck with tables.

To create this layout I made a table that has 3 rows of one column each.

• The top row has a dark background, a green bottom border and contains the title.
• The middle row has a white background and contains another table with one row and two columns.
  • The left column contains a background image, but no background color and features the main text. With images off the white background from the main table will show through so that the text is still easily read.
  • The right cell has a dark background and the Death picture. With images off the picture is replaced with alt text. In our sample this is showing up as black which indicates that the table cell should be restyled to feature a lighter color.
• The bottom row has a dark background, a green top border and the opt-out message. In some of our samples the e-mail is showing up as dark blue which is hard to read against the dark background. In the Macmail version it has been re-styled in a light green that is easier to read.

To get a better idea of how this was set up, view the source code.

3. Use HTML 4.0 Standards Compliant Code to the extent that you can.

Going back in time to use tables makes us feel like we're breaking the rules of HTML, but it is still possible to adhere to standards compliant HTML in e-mail if you use the HTML 4.01 transitional doctype. While adhering to Web standards is a good idea in general, I also find it helpful for testing and troubleshooting e-mail files. When I find a problem in my message, the first thing I'll do is validate the file. This helps me determine if the problem is a simple coding error or if it is due to a feature not supported in one of the e-mail programs I'm testing. By eliminating any coding errors I can then focus on the work-arounds I may need to implement to solve the e-mail specific problem.

4. Use inline styles

Most of us are used to using external or embedded stylesheets. Alas, some programs don't support those. To ensure that your styles aren't ignored, use inline styles to format everything in the document. This takes more time and adds to the code, but will be accepted by more programs. For example, to style the top table cell and the header within, I used the following code:

<th scope="col" width="700" style="background-color:#24333a; border-bottom: 1px solid #87d143; color:#c02c18; text-align:left; font-family: Georgia, serif;" ><h1 style="margin: 10px 30px 10px 30px; letter-spacing:2px;">GOTHFEST <span style="letter-spacing:0; font-weight:normal;">2009</span></h1></th>

To add an inline style to an html element just include style=" " and put your regular CSS information within the quotes.

In this case I styled the top row (which uses a <th> because it is a table header) to have a dark background, green bottom border, red type, left-aligned text and Georgia or other available serif font. The title was put in an <h1> header styled to have 10 px margin on the top and bottom and 30px on the left and right. I also added 2px of letter spacing. I surrounded 2009 with a span styled to use 0px of letterspacing and a normal font weight. I incorporated the letter spacing and the 2009 span changes mostly to see if they would be carried through in the e-mail programs I tested.

Note: When coding for the Web I find padding works better to ensure files work well in IE 6, &, Firefox etc. But I've found that padding seems to fail more often than margin in e-mails, so I use margin to ensure that I retain space between paragraphs in as many programs as possible.

People sometimes worry that they'll lose too much flexibility if they try to stick with Web standards, but this example shows that despite the limited support of CSS in e-mail there is still room for experimentation. These styles worked in most of the programs I tested.

5. Test your mail in several different e-mail programs.

The e-mail standards project provides information on what features are supported by the most often used e-mail programs. These offer helpful guidelines, but the only way to know what will work for your file is to test it in as many different programs as you can. You can do this by installing several programs on your own computer and by enlisting the aid of friends and colleagues. I can access my work e-mail in Outlook 2003, MacMail, Gmail and Case's Webmail, so I send myself messages then check them in each program. I haven't upgraded to Outlook 2007 (as I'd no longer be able to test 2003) so to test that I send messages to my colleague Kim—who patiently lets me look over her shoulder or makes screen captures for me to evaluate.

As my samples indicate, your e-mail will not look the same in every program. That's O. K. The important thing is to make sure that it renders cleanly in each and degrades nicely if images or styles are not available. If you can do that, you will ensure that your message doesn't get missed because of poor formatting.

I can't embed HTML code in Outlook. How do I send an HTML e-mail?

How you send an HTML e-mail depends on your mailing list and the programs you have available. If you're regularly sending mass e-mails to large lists, you may wish to use an e-mail service such as Target X or Constant Contact. There are many such services available. Check with your organization to see if they already have an arrangement with a preferred vendor.

For occasional mailings sent to smaller lists, or via listservs such as those available through https://lists.case.edu, you need an e-mail program that will allow you to insert HTML. Case's Webmail program, found at http://mail.case.edu let's you paste HTML into your message body, but only if you are accessing it through Internet Explorer.

An easier option for most users is Mozilla's Thunderbird, available for Linux, Macintosh and Windows. Thunderbird is free and very easy to install. To send an HTML e-mail just click the "Write" button to compose a new message, type in your recipients addresses and subject line then go to the "Insert" menu and choose "HTML." A box will pop up in which you can past the code from your HTML file.

Learn more about HTML e-mail

• E-mail Standards Project
• CSS and Email, Kissing in a Tree
• How to Code HTML Email Newsletters
• Outlook 2007 change sends HTML email back to the future, for better and worse
• E-mail Standards Project

In the past I've discussed how the use of photos can enhance a Web site, but I've not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos. Some will build complex tables to get their photos positioned just right while others will add something like hspace="5" vspace="5" align="right" into the img tag.

Neither of these is recommended by current standards (the latter is deprecated as of HTML 4.1 but is necessary in HTML e-mail) nor do these techniques give you the control you need. A better way to do this is with Cascading Style Sheets (CSS).

Create a CSS class to float your photos to the right or left of your text

An easy way to include photos is to use the CSS property "float" to float the image to the right or left of the content that follows. One can float either the image itself or a container, such as a paragraph enclosing the image. I prefer to do the latter in case I wish to include a caption with the image.

One begins by opening the page's existing stylesheet and defining a new class to contain the image. On this blog I typically use a class I call "photoright." The code in the stylesheet looks something like:

.photoright {float: right; padding:2px 0px 8px 10px; margin: 0; font-size:90%; color: #7F8E29; font-style:italic; width: 200px;}

Close-up of different pavilion in daylight.
This picture uses a class without the
width defined. I can add line breaks
(with varying results) or let some of the comment
push past the edge. Note how this moves the photo in.

• .photoright is the name of the class. Usually class names don't include things like location and color (in case one wants to change those attributes in the future) but I typically include a .photoright and a .photoleft in all of my stylesheets just to offer some flexibility, and in this case the literal naming convention seems practical.
• float: right; indicates that the paragraph (or other entity such as a div) will float to the right of whatever content follows.
• padding:2px 0px 8px 10px; sets the padding for the paragraph. Padding is listed in clockwise order from top to the left, thus this class would have 2 pixels of padding on top, 0 to the right, 8 below and 10 to the left. Given the existing line-height of my regular paragraphs the 2 pixels on top allow me to line up the top of my photo with the top of uppercase letters in the main text. 0 on the right lets me float the picture as far to the right as the text will allow, 8 on the bottom gives me some space for text that wraps below the photo and the 10 to the left gives me some space between the photo and the text.
• margin: 0; specifies that I have 0 pixels of margin on all sides. I'm using padding to set my spacing rather than margins so that my captions will begin at the same left edge as my photos and because Internet Explorer may interpret margins differently than other browsers.
• font-size:90% indicates that my caption text should be 90% the size of my normal text. Some users may prefer .9em. (I'll leave the merits of various font-sizing methods for a later discussion.)
• color: #7F8E29; indicates that the caption should be lime. In the Case stylesheets this would typically be the same color that one would use for h3's. Because the text is small I've made this slightly darker than the usual lime color.
• font-style:italic; specifies that the caption will be italic.
• width: 200px; is an optional measurement specifying the width of the floated content. This number should match the width of your image and will insure that long captions wrap, rather than extend past the picture. If you plan to always use the same size image, I would recommend setting this width. If you use different sized images, you could establish separate css classes for each image size. Some users may prefer to simply keep their captions shorter than the width of their images or to use <br />'s to break the caption to fit. Note: manual line breaks will look fine on your own computer, but not necessarily on everyone else's. Users who have adjusted the font size of their browser/user agent may still see captions jutting past the image, or line breaks that seem to occur in illogical places.

Apply the .photoright (or .photoleft) class to your page

Once the class has been added to your stylesheet you can begin to incorporate it into your pages. As the image will float to the right of any content that follows, you will want to start a paragraph, using the new style, immediately before the accompanying text. For example, in this blog entry I've put this at the very beginning of my entry:

<p class="photoright200"><img alt="Blue Pavilion" src="http://blog.case.edu/webdev/2007/10/01/bluepavilion.jpg" width="200" height="300" /><br />Night shot of one of three recently dedicated light pavilions on Superior Avenue.</p>

Close-up of first pavilion, floated left.

In this example I've used a class that defines a width of 200 pixels, the same width as the photograph. Note that I've included a line break immediately before the caption. This ensures that the caption starts below the image. Without a break (or a space), some browsers might ignore the width and have the caption begin to the right of the image. The other two pictures are placed farther down in the copy, again preceding the adjacent text. (View source to see exact placement.) The middle image uses a different class that doesn't define the width. I've left some of the caption hanging out so you can see how that works.

Using photoright and photoleft with Case templates

I've included the classes .photoleft and .photoright in the Case template files. These are in the current, and some past, versions. If you are using an older version that doesn't include the classes, simply copy them from the appropriate color stylesheet. Not knowing what size photos one might wish to include, the templates do not include the width measurement, but you may add it in based on the sample above.

That is pretty much all there is to it. If you have any questions, comments or other ideas, please submit them in the comments below.

I've recently come to the conclusion that a great number of Web developers either don't know about Web standards, or simply don't care. For those who aren't already aware of the standards I'll offer a brief introduction along with resources for additional information. For those who don't care, or who are anti-standards, I'll offer some examples as to why I feel they're important. For those of you already in the know, feel free to add your own advice, examples or pet peeves in the comments section.

The reason for Web Standards

According to the Web Standards Project Mission, "The World Wide Web Consortium (W3C), along with other groups and standards bodies, has established technologies for creating and interpreting web-based content. These technologies, which we call "web standards," are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web."

Think of these as the rules of the road. When you are driving a car in Ohio you know you have to drive on the right side of the road, stop at stop signs, not enter an intersection unless there is room for your vehicle on the other side, yield to pedestrians, etc. If you are driving in Hong Kong you know to drive on the left and follow the various rules relevant to that jurisdiction. Following these rules makes the driving experience more pleasant for everyone; whereas ignoring these rules will, at best, annoy other drivers and, at worst, cause a traffic related fatality.

In most cases, a non-standard Web site isn't likely to cause fatalities, but anything is in the realm of possibility. Errors in formatting can cause content to render incorrectly. Imagine if the word "Never" wasn't visible to users reading the sentence "Never pour gasoline on an open fire." A reader unfamiliar with the combustible nature of rising gasoline vapors could easily immolate himself. That's an extreme example, but whether your site is about fire prevention or your book club, you probably don't intend to misinform or confuse your readers.

Following Web standards lets you increase the odds* that your site will be properly rendered by most browsers and user agents and that your information will be more accessible to users and search engines.

* I say "increase the odds" rather than "guarantee" because there are still differences between the way browsers interpret the standards.

What are the Web Standards?

Different standards are available for different purposes, but for the most part standards will define the type of coding that you should use when creating a Web page or stylesheet, or the procedures or policies you should consider when creating the site. Thus if you are building a site in HTML using Cascading Style Sheets, and want to ensure your site is Section 508 compliant for accessibility, you might follow the standards for HTML 4.01, CSS 2, and Section 508.

For example, HTML standards specify using <p> to start a paragraph, <h1> for a primary header and <em> for emphasis. CSS standards specify things like color and position, so that a purple header could be defined in a stylesheet by: h1 {color:#571963}. Using a descriptive word or phrase in the alt tag of images conforms to accessibility standards (both 508 and WAI).

One of the most overlooked HTML standards seems to be the inclusion of the correct document type. For example, if you are building a site using XHTML 1.0 (as is true of many Case sites) you would include this document type:

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

This small piece of code tells browsers and user agents what version of HTML you are using, so they don't have to guess when rendering the site. This is like telling Babel Fish whether you want to translate a phrase from Dutch to English or from German to English. If you don't give it the right information you may not get the right result. I'm amazed by the number of sites don't include this basic information.

Another important standard for HTML 4.01 and XHTML 1.0 is the separation of format and presentation. <h3>Headline</h3> is an example of format, indicating that something is a header. Styling the <h3> with CSS, either in the document or in an external stylesheet, to be a certain size, color and font would be an example of presentation. In the old days of the Web this was done within the HTML using the now deprecated <font> tag. In the past one might have typed <h3><font color="33ff33" size="5">Headline<font></h3>. This not only filled up your page with a lot of extra code, but it also meant that if you decided later to make all of your <h3>'s a different color you would have to go and change all of the font codes one by one. When using a style sheet you can define how your <h3>'s will look in one place. To change the color you just make the one change in the stylesheet and you are ready to go.

Separation of format and presentation isn't a particularly new idea, but adoption has spread slowly. CSS 1 was first introduced in 1996 and the CSS 2 recommendation has been around since 1998. While many sites use CSS, it is still not uncommon to stumble upon current sites that are still using older codes such as <font>.

Why this has been on my mind

A few weeks ago a friend sent me a link to a pretty cool looking site for an online magazine. Alas the site wasn't standards compliant and therefore didn't work properly. This particular site was Flash-based with dimensions too big to fit my screen. The page had no scroll bars so I couldn't get to the menus to navigate through the site. I could see the whole site on my Mac, but not on my Dell, and I'm pretty sure I'm not the only one to have had that problem. Since I couldn't navigate the site, they might as well have posted a page that said "Do Not Enter. We don't care about your business." If they had built a compliant site they would have ensured greater accessibility to users and not had this problem.

I've found a number of other non-compliant sites while working to compile a list of local Web developers. Departments without Web staff often look to outsource their Web projects and turn to me for referrals. Thus I'm trying to put together a list of local (to support the regional economy) developers who I can trust to build compliant sites that follow the Case design scheme, maintain a logical navigational structure and support the goals of the client. This has not been an easy task.

The problem is that almost anyone can learn to build a Web site, but only a few can do it well. There are a lot of firms out there, but the quality of work varies dramatically, and only a handful build standards compliant sites. Sites with major compliance errors don't end up on my list. This isn't just because I'm persnickety. If a site fails validation because of a few stray &'s or they've forgotten to close a few <p>'s I'm not worried. Such errors are easily corrected and don't disturb the overall functionality of the site. But if a site uses <font> tags, doesn't include a doctype, leaves alt tags blank on all of their images, etc., then I will conclude that its designers are not professional and will not be able to offer the client the advice or service necessary to implement a successful site.

Conclusion and Disclaimer

If you've ever built a Web site, you've followed at least a few of the standards. The site wouldn't work if you hadn't. For example if you left out the <body> tag your page wouldn't render. Since we're all following some of the standards anyway, I would just encourage everyone to learn and apply more of them. As you become more familiar with them you'll find that your sites become both easier to use and easier to build. To learn more about Web standards visit The Web Standards Project and the resources below.

Standards compliance is an ongoing goal of mine, but I'm only human. Not every site I've built is standards compliant, and the errors become more egregious the older the pages may be. Since I readily acknowledge this you don't need to go hunt them down, they are out there, and I know it!

Web Standards Resources

• Asterisk Web Standards Archive
• Designing With Web Standards, Second Edition by Jeffrey Zeldman
• Jeffrey Zeldman: King of Web Standards (Business Week)
• Section 508: The Road to Accessibility
• The Web Standards Group
• The Web Standards Project
• W3C Cascading Style Sheets, level 2 CSS2 Specification
• W3C Cascading Style Sheets, level 1
• W3C HTML 3.2 Reference Specification
• W3C HTML 4.01 Specification
• W3C XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)
• W3C Technical Reports and Publications
• Web Accessibility Initiative (WAI)
• World Wide Web Consortium (W3C)

Earlier this week Jeremy Smith wrote Delivering Web Content to Mobile Devices in which he discussed some of the different options, and concluded that by using CSS, one can configure pages for handhelds just as easily as one can for print or other media options. I personally don't surf the Web on my cellphone—half the time I don't even remember to recharge the darn thing—but just yesterday I saw my associate, Steve, use his phone to check the start time for an upcoming football game.

Given that people like Steve are accessing Web material in a variety of ways, I thought this would be a good time to follow-up Jeremy's article and discuss how we can customize our sites for different media. The W3C currently recognizes the following media types: all, aural, braille, embossed, handheld, print, projection, screen, tty and tv. Here at Case we've primarily been using all, screen and print. The CSS screen and print files included with the templates merely force a fixed width on the pages, but as Jeremy mentioned, with some clean code and an understanding of CSS, one can provide more customized options.

Parameters to consider when editing for different media types

When thinking about different media types we often thing of size. A cellphone has a much smaller screen than a computer monitor and offers different navigational tools. It's obvious that we need to shrink our content to conform, but we also need to decide what existing content should be kept, what extra could be added, in what order we arrange the content, what colors and fonts we use, etc. If building content for aural use, such as browsers that can read for the blind, we might also consider adding additional navigational aids as well as styles geared specifically to the medium, such as volume properties. Each media type will require different options, some using CSS and some using additions to your XHTML.

Example: customizing for print

I've not yet worked with most of these media types, but I have been tinkering a bit with print stylesheets. After transitioning the News Center to the blog server I soon realized that pages weren't printing out correctly. The fixed-width shortcut used in the regular templates wasn't going to work and didn't completely serve our needs. In planning how to fix this I had two goals:

• Make sure the desired content printed cleanly—in its entirety—without being truncated, cut-off or otherwise mangled.
• Display content in such a way that would be most useful to visitors.

The first issue was primarily addressed by changing the way I used measurements. Pixels were changed to inches for page-size and points for fonts. Additionally, paged media such as printouts must accomodate page-breaks. While I won't walk you through each bit of code, you can view the stylesheet here.

When deciding what content to include I considered known printing issues as well as user-need. The default setting for most browsers is to NOT print background colors and images. This is why you get a blank page when you try to print from a Web site that has white type against a black background. In the case of our templates, this means that the photo in the upper right doesn't print—thus leaving the site title invisible. It also looks a little strange to have the logo on the left with a big chunk of emptiness on the right. To compensate for this problem I adjusted my files so that the only part of the banner to display would be the title, now in black instead of white.

Below that I included the header, the text and any accompanying graphics, but removed the left menus which most users won't need. Having removed the banner, I added to the bottom a signature giving the page address, name, Web site and phone number for our office and the Case logo. This way if someone is handed the printout, they will still be able to ascertain its origins. While some browsers include the url of the page by default, some do not, so I felt it was safer to include it here. I added this information by creating an extra div in the XHTML file and setting it to display only in the print stylesheet.

While I may still finetune this a bit, the overall print look seems to work pretty well for the News Center. Your sites may have different requirements but I hope this has given you a few ideas on issues to consider. Of course it is also important to remember that various browsers and printers will respond differently. No matter how carefully you craft your code, you may find that users experience different results.

Media Type Resources

The resources listed below and in the CSS articles will help you learn how to implement different media stylesheets for your sites.

• Code Style Media Monitor
• CSS Design: Going to Print
• Designing for Context with CSS
• Pocket-Sized Design: Taking Your Website to the Small Screen
• Printing a Book with CSS: Boom!
• Print Different
• W3C Media Types

Don't print this page

I used the News Center for my example instead of this blog because I've been working on the print.css file for this site and it is still a bit wobbly. If you try to print from it today (Nov. 16th 2006) or while I'm experimenting with it, you may discover that it doesn't not print correctly. Once I'm done, it will.

In our first lesson on CSS, I introduced you to the concept, gave you a new homework assignment and showed you an example of a simple site—with and without its accompanying stylesheet. For that example I used the Wolf site I had built as part of our first homework assignment for learning XHTML/HTML. Today I am going to show you how I added the styles to that site.

Incorporating a stylesheet into your site involves two basic steps

1. Create a stylesheet file: Using a plain text editor, such as Notepad or Textedit, open a new file and save it with a .css extension. This will become your external stylesheet. and should be stored in the same directory as the .html files used in your site. The one I used in this project is called wolf.css. Later we will add the styles to this file.
2. Link to the stylesheet: Open each of the .html files in your site and add
   <link rel="stylesheet" href="wolf.css" type="text/css" media="all" />
   after your title—which will be found somewhere between <head> and </head>. Replace wolf.css with the name of your own css file.

While reading about this, you may have learned that one can include a stylesheet via the @import rule or via link, as we have done here. While there are pros and cons to each method, link is suitable for our project.

Adding styles to the sheet

For this project we will be creating styles for each of the elements used in our existing site. Below I will provide a brief explanation of each. To learn more about CSS selectors and structure I recommend perusing Cascading Style Sheets: The Definitive Guide, 2nd Edition, by Eric Meyer. You can view the complete style sheet here. Like HTML and XHTML files, this is a plain text document.

Styling the <body>

body {margin:0px; padding:0px; font-family: Georgia, "Times New Roman", Times, serif; font-size:small; font-style:normal; font-weight:normal; color:#000; background-color: #fff;}

By styling the body we can control the overall content of our pages. In this case we've declared that there should be no margins or borders, the font for any type on the page should be serif—preferably Georgia, the font-size will be small (causing its size to vary somewhat between browsers), the style and weight should be normal (rather than italic or bold), the color should be black and the background should be white (Web colors are specified by a # followed by their 6 digit hecadecimal value, but when all 6 are identical, three will suffice. You can view a hexadecimal color chart here).

Styling paragraphs

p {border: 0; margin: 0px; padding: 0px 60px 14px 30px; line-height : 140%}

We don't have to define a font for paragraphs because that was already set in the body. What I have defined here is that there will be no border or margin, but that there will be 60 pixels of padding on the right, 14 below and 30 to the left of each paragraph (padding is listed in the order of top, right, bottom and left). Additionally I have created a line-height of 140% to create extra space between lines. This increases readability when lines are long. Short lines, such as those found in newspaper columns would require less spacing. I could have skipped the border style, as the default would be 0. However sometimes I will add a border in the development process just to see where the boundaries of an element may be. Once I'm satisfied with the layout I then change it back to 0.

Styling headers

h1, h2, h3, h4, h5, h6 {font-family:Verdana, Arial, sans-serif;}

While all other fonts will be serif, I have defined all headers to use a sans-serif font.

Specifying the look and position of the main header—it's not just about the type

h1 { height:66px; font-size:21px; line-height:66px; font-weight:bold; margin:0px 0px -2px 0px; padding:10px 0px 0px 0px; background-color: #cad5f1; color:#024c20; border-bottom: 1px solid #024c20;}

Here I've specified that the height should be 66 pixels to match the photo of the wolf, and create a large rectangular area. My font-size is 21px. Font sizes can be set in a variety of ways. Normally relative sizes such as small or medium are best, but here I needed an exact size to help determine the position. By setting line-height to the same size as the element and adding 10 pixels of padding to the top, I was able to create approximately centered vertical positioning. Controlling vertical positioning in CSS is complicated, unreliable and often reliant upon a certain amount of duct tape and rubber bands. Feel free to experiment amongst yourselves. The background color of the entire area is light blue, the type color is dark green and the whole expanse has a bottom border that matches the type.

Styling images that fall inside h1 headers—the wolf head

h1 img {float: left; padding: 0px 60px 0px 0px; vertical-align: baseline; margin:0px 0px 0px 0px; background-color: transparent; }

While up to now you have seen me add styles to certain elements, CSS also lets us style elements within a certain context. In this case, the wolf head image that we had placed inside the h1 will have 60 pixels of padding to the right (to add space between the photo and the type), the image is aligned to the bottom of the h1, the background color is transparent so that we can see the blue of the h1 and we have no margin.

Styling all headers

h2 {border: 0; color: #3a024c; background-color: #fff; font-size: 18px; padding: 10px 0px 10px 30px; }

h3 {border: 0; color: #3a024c; background-color: #fff; font-size: 16px; padding: 10px 0px 10px 30px; }

h4 {border: 0; margin: 0; color: #000; background-color: #fff; font-size: 12px; padding: 0px 0px 10px 0px; }

h5 {border: 0; margin: 0; color: #3a024c; font-size: 12px; font-weight: bold; padding: 0px 0px 2px 0px; background-color: #fff;}

h6 {clear:both; position: relative; color: #024c20; background-color: #fff; font-size: 10px; font-weight: normal; margin-left:0px; padding: 5px 5px 5px 30px; width:100%; text-align: left; border-top: 1px solid #024c20; }

Although I used only h1, h3, and h6 headers, I created files for all headers in case the site grew and I had further need of them. In h2-h3 you only see small differences in size, color and positioning, but the h6 which we use for the footer has some added features. "clear-both" ensures that this will be positioned below all other elements on the page. Its position is relative to those elements rather than to the page itself. This is why it floats just below the text rather than stays fixed to the bottom of the page.

The latter is very difficult to do with CSS alone and would require additional code and more duct-tape. I stress this because this issue has frustrated many a Web designer and is particularly annoying to those who found it so easy to accomplish when using tables.

Styling lists—the menu

ul { clear:both; color: #FFFFFF; background-color: transparent; margin: 0; padding: 3px 60px 3px 6px; white-space: nowrap; text-align:right; }

Here we've defined the container of the list to come after the preceding elements, to have no margin, 3 pixels of padding on top and bottom, 60 to the right and 6 to the left. The list elements will all align to the right.

The horizontal list doesn't work
well on the links page.

ul li { color: #024c20; background-color: transparent; font-family:Verdana, Arial, sans-serif; font-size:12px; display: inline; padding : 3px 3px 3px 3px; margin : 0px 16px 0px 0px;

Here we define how the items of the list will behave. In addition to assigning such qualities as font and color we have set the list to display inline. Instead of displaying as a vertical list of elements with bullets, as it did in the unstyled pages, our list is set to display horizontally on one line. Each element in the list will have 3 px of padding and 16 px of margin on the right just to add more space between the items in the menu.

While this is a nice way to handle our menu, it does create a problem. On the links page, we have a list of links to other pages about wolves. This too displays horizontally, although it would be more appropriate for it to be vertical. To make the two lists behave differently from one another we would need to add additional code to both the stylesheet and the .html file. We will discuss this in lesson three.

ul li a:link {background-color: transparent; color: #024c20; text-decoration: none; padding : 3px 3px 3px 3px; }

ul li a:visited {background-color: transparent; color: #3a024c; text-decoration: none; padding : 3px 3px 3px 3px; }

ul li a:hover { padding : 3px 3px 3px 3px; background-color: #024c20; color: #FFFFFF; }

Here we define how our links will act within the menu. In their regular state, they will be dark green, after being visited they will be purple, and when one hovers over the link with one's mouse the background will turn green.

Styling all other links

a:link { color: #02194c; background-color: #fff; text-decoration: underline; } a:visited { color: #3a024c; background-color: #fff; text-decoration: underline; } a:hover { color: #414c02; background-color: #fff; text-decoration: underline; }

Links that appear in other parts of the site will receive more traditional styling. They are always underlined, blue before being visited, purple after being visited and gray during hover. We differentiated these because our existing code allowed us to do so, and because links within paragraphs would look silly when hovering produces green rectangles.

Styling images

img {border: 0;}

Most images require very little styling, but when images are links they will show up with a blue border. I've created this so that if I were to link from an image it would not have a border.

Experiment yourselves

While I did not delve deeply into syntax and structure, I hope this example has given you a bit of an idea of how CSS works. In our next lesson we'll modify our XHTML files to accomodate additional styles that will give us more control over the look and layout of the site and I'll demonstrate how the same site can look entirely different just by changing the stylesheet.

p.s. I will be out of the office from September 1-13th. If you have Web development questions during this time, please contact Kevin.

As a follow-up to the I'm not going to teach you XHTML/HTML and homework review entries, today I'll introduce you to Cascading Style Sheets (CSS).

If you are working on a Case site, you will have noticed that each set of templates comes with its own set of style sheets that determine the color scheme, fonts, etc. In most cases you can just leave these alone, but there may be times when you want to do something special such as adding colored borders to a table, or creating a red (cranberry) alert headline to emphasize something important. To do that it helps to learn a bit of CSS.

What is CSS?

While XHTML and HTML are used to form the structure of a Web document, CSS controls the presentation. Presentational elements that can be controlled by CSS include font, color, position, alignment (with some limitations), and other elements that affect how a page will look to the reader. As an example, the Wolves site on the top right does not use CSS, while the image of the same site on the lower right does use CSS.

The W3C recommendation for CSS Level 1 was released in 1996, the first version of level 2 was released in 1998, and level 3 is currently under development. As each level builds upon the others you do not need to specify which version you are using, however you do need to understand which browsers support which CSS elements as well as the different ways they may interpret them.

In addition to controlling how a page will look in a Web browser, CSS can also be used to determine how content will be presented on a printed page, on tv screens, in braille, and other media types. This is particularly useful to those who are developing content for multiple purposes. Rather than creating 10 versions of the same site, one can specify that different style sheets are used depending on how the page is read.

In addition to the flexibility of multiple formats, CSS—when implemented properly—can be a real time-saver. If you've just built a 50 page site in purple and gray, and your boss suddenly decides it should be cranberry and navy, all you have to do is change the style sheet. In a pre-CSS world you would have had to edit all 50 pages, but with CSS you only need to edit one. While there are many great reasons to use CSS, not limited to the fact that they conform to the web standards, the best way to understand it is to start using it.

Incorporating CSS into the site you built to learn HTML: A homework project

If you completed our XHTML/HTML homework project, as I did with my http://jigsaw.w3.org/css-validator/ to make sure your style sheet is valid, then post your link in the comments field below.

Tools to complete the project

You will be using the same tools for this project that you used to build your site. I find that it is usually helpfully to upload the files repeatedly as I go so that I can check how things are working. CSS is more difficult to learn that HTML, but you don't need to understand everything at once. If it doesn't make sense immediately, just be patient. Also do not worry about vertical alignment. This is not yet well-implemented, and is bound to cause frustration. Instead choose a design that is not dependent upon vertical alignment.

Resources for learning XHTML and HTML

There are a variety of great books and sites that will teach you more about CSS. The ones I am most familiar with are by Case alumnus, Eric Meyer, who is the über-authority on CSS. Eric is also a past Webmaster of http://www.case.edu. Before working at Case, Eric and I both worked at the same law publishing company—proving once again that there are only 2 degrees of separation in Cleveland.

CSS reference books & Videos

Those with links in the title can be read online by Case students, faculty and staff, and by others with Safari ProQuest subscriptions. For other visitors, I've included links to purchase the books from Amazon.com at the end of each description.

Cascading Style Sheets: The Definitive Guide, 2nd Edition by Eric Meyer

Beginning with a thorough description of the what's and why's of CSS, Eric then walks you through each of the CSS elements offering detailed explanations of how they work, how they should be implemented. Additionally the book includes notes pointing out special exceptions such as browser differences. I have this book on my shelf and refer to it whenever I'm trying to understand why a certain style behaves in a certain way. Purchase CSS: The Definitive Guide from Amazon.

Cascading Style Sheets 2.0 Programmer's Reference by Eric Meyer

This one isn't on my shelf because it is usually somewhere on my desk. Less detailed than the definitive guide, it provides a handy way to check on the exact syntax of a given element. I used it extensively when I was teaching myself CSS. Purchase Cascading Style Sheets 2.0 Programmer's Referencefrom Amazon.

More Eric Meyer on CSS by Eric Meyer

Especially handy for those familiar with HTML but new to CSS, this book walks readers through 10 Web projects that readers can build for themselves to learn the code. Purchase More Eric Meyer on CSS (Voices That Matter) from Amazon.

CSS Web Site Design (CD-ROM) by Eric Meyer

In this comprehensive video training course, produced by Lynda.com, Eric Meyer walks users through the process of developing sites with CSS—using sample projects to demonstrate each lesson. If you are thinking of taking a class, but would like to learn on your own pace, this CD may be a good alternative. The CD also includes all the sample files you need to complete the projects. Purchase CSS Web Site Design from Amazon.

The Zen of CSS Design: Visual Enlightenment for the Web By Dave Shea, Molly E. Holzschlag

Geared more towards those with an interest in graphic design, this book uses design examples from http://www.csszengarden.com/ to demonstrate how CSS is implemented. Purchase The Zen of CSS Design: Visual Enlightenment for the Web from Amazon.

Online CSS Resources

Wikipedia

Wikipedia's entry on Cascading Style Sheets provides a fairly clear and in-depth overview of the topic as well as links to a variety of other resources.

W3 Schools

W3 Schools offers tutorials on a variety of Web related topics including this easy to follow tutorial on CSS.

W3C CSS Validation Service

This resource checks your Web page or style sheet to let you know if your CSS is valid, and if it is not, what the errors may be. It also offers warnings about styles that are valid but that might be problematic. Very handy both for ensuring clean code, and for finding errors that may be causing problems in your pages.

Zen Garden

The Zen Garden is a site that can be viewed in almost 1,000 different designs. Since 2001, designers have been submitting new style sheets to the Zen Garden, thus creating a powerful example of how drastically different the same code can appear with different style sheets

CSS—A guide for the unglued

A compendium of resources designed to help you find a quick answer to your CSS questions and issues.

CSS-Discuss Mailing List

Information and archives from the CSS-Discuss mailing list. Geared more towards experienced users, beginners will still find answers to their many questions in the archives. If you join the list and you are new to CSS, don't ask a question until making sure it hasn't been discussed previously.

Next: Lesson 2