Extra Credit

---

So here we'll take Method C and put it to the test with some simple CSS styling. We'll take full advantage of the heading tag's uniqueness, sleeping well at night because we know the underlying structure is solid for whatever browser or device that may read it. Then we'll dress it up and take it out on the town (if you could actually take an HTML tag out anywhere ... and I've tried).

Simple Styling

Using CSS, the simplest and easiest thing we can do is give our heading different font styles. We can create a CSS rule that will apply those styles to all <h1> tags that appear on the page (or an entire site, when using an external style sheet). If later we wanted to change the color, size, or font face of all <h1> elements that appear on an entire site, then all we need to do is change a few CSS rules, and they'll be instantly changed. Sounds pretty enticing, doesn't it?

Let's reacquaint ourselves with our super cool heading:

 <h1>Super Cool Page Title</h1> 

Let's change the color, font face, and size of it with CSS:

 h1 {   font-family: Arial, sans-serif;   font-size: 24px;   color: #369;   } 

We've just said, rather simply, that any <h1> found throughout the page should be treated in Arial (or default sans-serif) typeface at 24 pixels and blue, as demonstrated in Figure 2-2.

Figure 2-2: An example of a styled heading

Next, let's add a 1-pixel gray border underneath the text for added definition (see also Figure 2-3):

 h1 {   font-family: Arial, sans-serif;   font-size: 24px;   color: #369;   padding-bottom: 4px;   border-bottom: 1px solid #999;   } 

Figure 2-3: A styled heading with a gray bottom border

We've added a bit of padding under the text to let the line underneath breathe a little. The border will extend not only under the text, but because a heading is a block-level element, it will stretch across as wide as it can horizontally on the page.

It's also worth pointing out that we're using the shorthand method for creating a border by specifying the three parts in one statement: width, style, color. Play around with these values to see different results.

Adding Backgrounds

Backgrounds can add neat effects to page headings. Add a little padding and a background color, and we'll have image-free, but stylish titles. For example:

 h1 {   font-family: Arial, sans-serif;   font-size: 24px;   color: #fff;   padding: 4px;   background-color: #696;   } 

We've turned the text white, adding 4 pixels of padding all the way around, and changed the background to green. As Figure 2-4 shows, this will create a nice, fat, pool-table green bar that'll extend across the page, dividing the section.

Figure 2-4: A heading example with background color and padding

Backgrounds and Borders

By adding a thin border to the bottom of the heading, coupled with a light background color, you can create a three-dimensional effect without the need for a single image.

The CSS is similar to the previous example, with a few color changes and the addition of a 2-pixel border to the bottom.

 h1 {   font-family: Arial, sans-serif;   font-size: 24px;   color: #666;   padding: 4px;   background-color: #ddd;   border-bottom: 2px solid #ccc;   } 

By playing around with different shades of the same color, the dimensional effect comes to life as shown in Figure 2-5.

Figure 2-5: A heading with background and border bottom

Tiled Backgrounds

The possibilities become far more creative when background images are added to the mix. Let's create a small, 10510 pixel image in Photoshop or your favorite image editor that has a black border on top, with a gray gradient flowing down to the bottom, as shown in Figure 2-6.

Figure 2-6: A 10 10 pixel image created in Photoshop (magnified)

We can take this tiny image and tile it along the bottom of our <h1> using CSS:

 h1 {   font-family: Arial, sans-serif;   font-size: 24px;   color: #369;   padding-bottom: 14px;   background: url(10x10.gif) repeat-x  bottom;   } 

By telling the browser to repeat-x the background image, it will tile only horizontally (repeat-y will tile vertically). We're also setting the image to the bottom of the element, and by adding a little extra padding-bottom, we can adjust the space between the tiled image and the text above (see Figure 2-7).

Figure 2-7: A heading with tiled background image

Swappable Icons

Instead of hard-coding decorative bullets and icons on the page as inline images, we can continue to use the background property to set icons to the left of the text using CSS. This method makes changing the look and feel of a site a snap—with the update of that one CSS file instantly changing all the pages of an entire site.

The code is much like the preceding tiled example:

 h1 {   font-family: Arial, sans-serif;   font-size: 24px;   color: #369;   padding-left: 30px;   background: url(icon.gif) no-repeat 0 50%;   } 

Here we're giving extra space to the left (where we'd like the icon to show through), and we're saying no-repeat so that the background image displays only once (see Figure 2-8). We'd like it to line up 0 pixels from the top and halfway (50%) from the top.

Figure 2-8: A heading with a background image icon

Easy Updates

Think about a scenario where, instead of using the preceding example, we've coded these icons with <img> tags right in the page on a site that contains 100 documents. Perhaps the icon matches a theme that's found throughout the site. Fast forward a few weeks when the site's owner decides to change the site's look and feel. The new icon is a different dimension than the old one. Uh-oh. We'll need to go back into all 100 documents to change each <img> tag and update with the new image path. Yuck. And just imagine what the extra time can do to a project's budget, pushing a deadline further out than would be needed otherwise. Time is money.

Additionally, by keeping those nonessential, decorative images in one CSS file, it's possible to change the background image in a matter of minutes rather than days, while the site will instantly be updated. You can start to see the power of separating your structured markup from the presentation.

The Chameleon Effect

I'm going to go ahead and contradict myself here for a minute, but I think this next trick can be useful in some circumstances. It's a method I used heavily in the standardscompliant redesign of Fast Company magazine's website (www.fastcompany.com) in April of 2003.

We were using small, 13X13 pixel icons within most of the <h3> headings that were used throughout the site like this:

 <h3><img src="/books/2/67/1/html/2/http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" /> FIRST IMPRESSION</h3> 

We had decided on coding them right in the page for two reasons. There were a variety of icons, depending on the topic of the heading (a book for the Book Club, quote marks for the daily quote, etc.). The second reason we coded them in the page was because, at the time, we swapped the color scheme of the entire site each month to coincide with the current issue's magazine cover. This swapping was made possible, of course, by using CSS.

To allow the icons to swap color along with other elements on the page without having to continually create new images for each new color, we created one set using only two colors: white and transparent (where the swapped color would show through). Figure 2-9 shows an example of one of the icons that was used to call out the home page's daily quote.

Figure 2-9: A 13 13 pixel transparent icon (zoomed)

To fill in the transparent portion of the icon, we used the handy CSS background property yet again to specify the color we'd like to shine through. We wanted this color to appear only behind the image and not the associated text in the heading. That was achieved by using a contextual selector to apply rules to the images that are contained only within <h3> tags.

 h3 img {   background: #696;   } 

The preceding code states that all img tags that are contained within <h3> tags should have a background of green. That color shows through in the transparent spots of the image, while the white portions stay white. Each month, we could update this one CSS rule with a different color value to magically change the color of every heading and icon combination that we had throughout the site. Like magic.

Aligning the <img> Tag

To help the icon line up with the text correctly (we want it to be centered vertically), we add the following CSS rule:

 h3 img {   background: #696;   vertical-align: middle;   } 

That ensures the image will align to the middle of the text contained within the <h3>. Figure 2-10 shows the resulting heading.

Figure 2-10: The resulting transparent image with CSS background applied

I bring up this particular solution for another notable reason—that background colors that are specified in CSS show up behind any images that are either coded inline on the page or also specified in CSS as well.

For instance, let's go back to the previous "Swappable Icons" example and add some background color:

 h1 {   font-family: Arial, sans-serif;   font-size: 24px;   color: #fff;   padding-left: 30px;   background: #696 url(transparent_icon.gif) no-repeat 0 50%;   } 

The transparent_icon.gif will sit above the color we specified before it in the same rule (see Figure 2-11)—in this case #696, a lovely shade of pool table green.

Figure 2-11: A heading with background image and color applied

This trick becomes especially handy when placing little rounded corners or decorative images on a page where color is concerned. These nonessential images are then completely contained in the CSS file and are easily swappable if an update happens in the future. Easy work now, less work later.

---