• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 1. Using CSS to Position and Sty... > Taking Font and Link Styling to the ...

Taking Font and Link Styling to the Next Level

Time to take a closer look at fonts, links, selectors, and the cascade. Some simple tricks will add a lot of class to your styles with only a little effort on your part. First, you’re going to create a new font list for the nav#header h1 selector. When it’s completed, you’ll apply it to the selector.

Place your cursor at the bottom of the projects1.css page. Select the 03-Fonts CSS snippet and insert it into your document. Save your CSS file.

In your CSS Style panel, highlight the nav#header h1 selector and click the Edit icon. In the Type category, click the drop-down next to Font. At the bottom of the font lists, select Edit Font List.

A dialog opens and gives you the ability to create an entirely new font list. I’ll give you the list of fonts in the next step. Look for them, in order, in the Available Fonts list.

Select the fonts listed below from the Available Fonts list, and click the double left arrow button to add each to the Chosen Fonts list. Be sure to select and add them in the order shown:


Snap ITC

Berlin Sans FB

Beesknees ITC

Marker Felt


Arial Black


If a font is not available in the Available Fonts list, type its exact name in the text box under the list and click the double left arrow button.

Click OK and you’ll be taken back out to the CSS Style definition for the div#header h1 selector.

Please pay close attention to the font declaration on this selector (and the ones to follow). The font cascade is a very overlooked and highly useful item. Everyone has heard of “browser-safe” fonts. And it is important to make sure some of the fonts you’re using are fonts that most browsers have—but they don’t all have to be. Due to the cascade order, the browser starts with the first font. If that font is found, the browser renders it on screen. If not, the browser looks for the second font, and third, and so on until it finds one of the fonts you’ve defined. This is the reason you should always define a generic font as the last font in your declaration. The browser will at least render serif or sans-serif.


What’s the logic behind the list you created? I began with Ravie, a fun, funky font that is installed with Publisher and shows up on many Windows boxes with custom installs. Then I went to Snap ITC, which is fairly similar and much more common on older (and some Mac) systems. This was followed by Berlin Sans FB and Beesknees. They are similar in look but because Beesknees appears to be more common, and I generally like the look of Berlin Sans FB more. I placed the more common one after the less common one. Marker Felt is an OS X for Macintosh font. Impact comes installed on many Windows and Mac machines. It’s not my favorite, but it’s better than something plain like Arial, so I added it toward the end of the cascade as a “catch-all” before Arial Black and the generic sans-serif.


Many times developers do not take advantage of this feature. There are a variety of reasons, including wanting the web to be like the print medium where things are identical—it’s not—not knowing what fonts are available on the various platforms, and maybe simply not realizing the possibilities. If you take a little time one afternoon and dig around in these links, you can develop your own attractive font cascades. Code Style provides an excellent cross-platform font sampler survey with images of the fonts next to the survey results (www.dwmagic.com/go/16). Microsoft’s Typography area has font listings available by product (www.dwmagic.com/go/17).

You can have headers styled with CSS instead of images. Because Windows XP now has Clear Font rendering similar to the Quartz rendering on OS X Macintosh, it won’t be long before you can’t tell a CSS styled header from a graphic—at least not by the ugly pixellation. This saves you download time and makes your page more accessible to all technologies.

Choose the font list you just created. Set the size to 2.5em. Save the CSS and view your index page.

Notice how the words in the black nav area magically seem to appear out of nowhere. This is due to the cascade order. Previously, you had not assigned a color to the h1 selector, so it was inheriting the #000 (black) from the <body> rule. The font was there, but because it was on a black <div>, it was invisible. It’s now a nice light lavender for contrast. I also centered it, gave it a little letter spacing (space between each letter for legibility), and a small top margin to keep it away from the top of the browser because browsers are not consistent in their default margin and padding settings.


The black text on black <div> issue is the reason applying a background color and font color in the same rule is the best practice. If you’re sure your background below has contrast and you don’t want a different background color, you can declare background: transparent. You’ll have to add this to your style sheet by hand.

Create one more font list and apply it to the div#nav li a selector. Use these fonts in order:

Kristen ITC

Marker Felt

Tempus Sans ITC


Arial Black



Apply the font list to the div#nav li a selector, select a font size of 1em, and click OK.


When creating font lists, choose fonts that are similar but a mixture of what’s available on different platforms and browsers for best results. For instance, the cascades I created here were funky due to the site subject/style. On a classy, feminine site, you may want to develop a nice font cascade of script-type fonts.

Look at three more of the selectors from the 03-Fonts CSS snippet: div#content h2, div#content h3, and div#info h4.

There are two ways to define your fonts. Because the cascade starts at the first font and then proceeds down the list, many will use the least common, moving toward the most common. That works great if you really have no preference which font shows up on any given machine. However, if you have a definite preference (like in this project where I wanted the font to be funkified), you can also list them in the order of your most favorite, cascading down to your least favorite. Either way is effective depending on the outcome you’d like.

The remaining styles you added should be fairly self-explanatory. You should be able to discern what most of the styles are doing until you come to the div#content p+h3 and div#info h4+p selectors. For more information on these selectors, please see the Adjacent Sibling Selector Styles sidebar in the next section of this project.

Notice the link styling. Nothing too fancy. You’ll have to preview in a browser to see how the rollovers appear with the background color and black text. Also, make one of the links in your code actually link somewhere (maybe your own web site). Visit the linked page so that your link state, when you return to your index page, will render in the visited style. You’ll see the link you just visited with a strikethrough. I think it’s an easier way to spot where you’ve been and where you haven’t, but it’s a matter of preference. The point is, I didn’t get rid of the underlines that some people feel are so important for usability (except on the button link styles for button-styling purposes) but still styled the links creatively.

Create three more selectors:

Listing 1.2.

  float: left;

div#skip a:link, div#skip a:visited {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;

div#skip a:active, div#skip a:focus {
  position: absolute;
  overflow: visible;
  top: 5px;
  left: 5px;
  width: auto;
  background-color: #92C837;
  color: #000;
  padding: 5px;
  border: 1px solid #000;
  text-decoration: none;
  z-index: 10;


Though it is commonly believed that setting a skip link to display:none; allows screen readers and adaptive technology to take advantage of the link while keeping it from rendering onscreen, in many cases this is false. Some important adaptive technology will also be unable to use it, and persons who tab through web sites will also skip right over it. We’re going to use a method here developed independently by Tom Gilder and Philippe Whittenberg. The trick is in setting the width and height of the div to zero and to hide the overflow. Then, in the link’s active and focus states, the overflow is visible, and the width and height are set to auto and the z-index is moved up to 10. The rest of the code in these selectors is for styling purposes.


Dreamweaver will not show the skip div in Design view because it will render the link state. Also, notice in Listing 1.2 that the “visited” state of the link is set the same as the “link” state. This is to keep the skip link from taking on the overall page style with a strikethrough after it has been visited.

Apply the .fltleft class to the image. In Design view, click on the image of the legs in the content <div>. At the bottom of the window, right-click (Ctrl-click) on img in the tag selector and select Set Class > fltleft from the Context menu.

Save project1.css. View the index page in a browser and notice how the <h3> is now next to the image—the magic of floating.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint