Web Site Design by David Rutstein from A to Z

CSS has been used to style links for as long as CSS has been available. In fact, along with text styles, link styles are by far the most common use of CSS to date. Of course, as we learn more about CSS and how to use it as a means of managing most, if not all, of our visual presentation, that truth becomes somewhat diluted. At this point, though, styling links with CSS remains one of the most widespread applications of the technology.

With CSS, you can create beautiful effects for links, including hover effects that, before CSS, had to be managed with JavaScript and numerous images or with a Java applet. Using color and images, you can reproduce the effects that demanded so many resources with much greater efficiency and control, and no reliance on anything but clean markup and savvy styling, resulting in beautiful designs that degrade well in older browsers and are completely accessible to those with disabilities.

Lists help you organize your content, and with CSS, you can do a great deal with lists. Along with styling the way list text is managed, you can use CSS to change the way the numbers or bullets are displayed, replace them with an image, or remove the list markers completely.

A very exciting opportunity comes about when you merge lists and links. You end up with a means of navigation. For, after all, what is navigation other than a list of links? Whether managed vertically in a side column or horizontally along the top of the page, using CSS, lists and links can be manipulated to create very richly featured navigation with a minimum of fuss.

In this chapter, you begin by creating simple styles for links and then progress to multiple link styles. You’ll then learn to manage lists with CSS. Finally, you’ll work with lists and links for both vertical and horizontal navigation. Along the way, you’ll be introduced to new CSS properties, as well as a number of selector types you’ve not worked with just yet.

The basic principles for how text is styled in CSS come from traditional typography, although limitations based on both CSS and browser support have prevented certain growth in the area of web-based type.

A warning from the start, though: Working with fonts can be complicated. First, you must understand that, in terms of available fonts for text-based type on the Web, there’s dependence upon a person’s operating system and installed font base. If a specific font is not installed on someone’s machine, that person will not be able to view the font. The same limitation existed for presentational HTML, too, and not much has changed since then. Then there is a major browser flaw in font sizing that makes using font sizes a real pain. Over these concerns you are essentially powerless, except in what you can learn in terms of how to manage them. So bear with me through the details, okay?

The good news is that you do have some choice over fonts, and CSS expands the way you use the fonts by being able to add color, weight, height, spacingall kinds of features that add visual interest to the fonts you do choose. As you become more adept with CSS in general, you’ll learn to combine graphics and text-based type to come up with increasingly sophisticated type designs.

Within the CSS specification, properties for managing typography are found in two primary places. The first is in font-related properties, which are all specific to the way a font is chosen and then displayed. The second is text-related properties, in which text is further managed, usually without some manipulation to the actual font. Some font features come from the more general visual category of styles and can be used with (but are not limited to) text.

Color is one area where CSS has long been our friend. Because color is determined by a combination of the computer’s hardware capabilities, the operating system, and the browser, we’ve been able to use CSS to color backgrounds and text since relatively early in the life of style sheets. Here you’ll learn to apply color to page backgrounds and element backgrounds, and even spice up tables with color.

Color options in CSS are more numerous than what was available to us in HTML. In CSS, you can choose among hexadecimal color, hexadecimal shorthand color, RGB color, color percentages, and the 17 color names supported by CSS 2.1.

CSS provides terrific control for images, too. In fact, the capability to place images into the background of any element is helping today’s web designers create beautiful designs free of the constraints of tables. In this chapter, you’ll learn how to apply images to backgrounds and elements, and you’ll learn about methods of using images for a range of visual techniques.

Image options are numerous in CSS. You can control the way images tile (or don’t tile), fix them to a location within an element’s background, scroll the image or fix the image so text scrolls over itlots of choices. You’ll get to try out all these techniques and really get a feel for how CSS not only enables you to use images in ways never available in HTML, but does so with a range of control you’ll really appreciate.

So far, you’ve been focusing on structuring your content with HTML, adding images and media, and working with tables, frames, and forms. Everything you’ve done so far has been about creating the canvas. Now you’ll get a chance to splash some color and life onto that canvas, making your seemingly bland documents come to life.

If you’re thinking at this point that working with markup and CSS is no play, well, your frustration is well founded. It’s imperative that you get the complexities down, and I assure you that if you’ve made it through thus far, you’re grasping complex ideas.

But no doubt you want to put those ideas to work and really get a feel for how to use CSS to make things look good. After all, that’s what I keep promising, right?

Fortunately, the next chapter sets you up for a little fun: putting your imagination to work.

You’ll be using images and color to spruce up your documents, and exploring the fine control that CSS offers you when it comes to working with imagery and color in your designs.