The development of any Website begins with its design. Typically, you'll have a statement from your client, or at least a rough idea in your head, of the intended capabilities of the site. If you're a by-the-book sort of developer, this may even take the form of a detailed specification document, which may describe the use cases (i.e. things that visitors can do) the site needs to support, the official specifications and recommendations the site must observe, and the list of browsers and platforms that must be able to access the site.
At this stage, it is customary for the designer to create a series of mock-ups, progressing from paper sketches, to prototype designs in a graphics application, to actual Web pages in HTML. If you have some experience in traditional site design, you probably produce even your very first paper sketches with a mind to the HTML code that will eventually replicate those layouts on screen.
As you move from tables to using CSS as your primary page layout tool, you'll have to learn a whole new set of design principles upon which to base your initial mock-ups. In this and the next few chapters of this book, I'll guide you through those principles so that you can come to grips with the new limitations, and let your imagination run wild with the new possibilities.
It is human nature to resist change. When you encounter things that CSS can't do, you'll be tempted to cling tightly to the heavy handed control offered by table-based design, rather than to brave the new world of CSS layout, where the layout of a hundred pages can hinge on a single rule. In this chapter, I'll endeavour to coax you out of your comfort zone by explaining some of the “big picture” advantages of CSS-based design, and present some success stories of Websites that have taken the plunge and are reaping the rewards of CSS layout.
Advantages of CSS Design
In the past few chapters, I've touched on a number of the powerful features of, and reasons for, using CSS for site layout. In this section, I'll formalize those arguments and present them all in one place. Not only do I hope to convince you of the merits of CSS, but I hope to give you the tools to sell others on the technology.
In the cutthroat world of freelance Web development, you will often be called upon to explain why you will do a better job than other developers bidding on the same project. If CSS layout is one of the tools in your Web design arsenal, the sites you build will benefit from the advantages presented here. Many of these advantages go well beyond ease of development, and translate directly to extra value for your clients. Let them know about this—it just might make the difference between winning the contract and losing out to a designer who lives and breathes table-based design.
Increased Stylistic Control
The prima facie selling point of CSS, and the reason most Web developers first choose to dabble in the technology, is that it lets you control many aspects of the appearance of your site that you simply cannot control with pure HTML. There is, for example, a waning fad of removing the underlines from hyperlinks and indicating them with some other style distinction (such as bold or colored text, or perhaps adding the underline when the mouse hovers over a link) that was sparked by the introduction of CSS. For a complete reference to the style properties that can be controlled with CSS, see Appendix C, CSS Property Reference.
In addition to the sheer number of controllable style properties, CSS lets you apply them more uniformly to the range of HTML page elements that are available. With HTML, for instance, if you want to put a visible border around an area of the page, you need to use a table to do it, because you can add borders only to tables. CSS not only gives you greater control over the look of the border (solid, embossed, dotted, or dashed, thick or thin, red or green, etc.), but also lets you add a border to any page element—not just tables. The design rationale behind CSS is to give the designer as many options as possible, so any style property that exists can usually be applied anywhere that it could potentially make sense to do so.
CSS simply has more style properties, that can be applied to more page elements, than HTML has ever offered. If you had to choose between CSS and HTML as a means for specifying the design of your site, based only on which would afford you the most visual control, CSS would win hands down. Despite this, common practice is to use HTML for design wherever possible, and to resort to CSS whenever an effect is needed that HTML cannot produce. While the visual appearance of sites designed with this rationale is just as good, you miss out on all the other advantages of CSS.
Centralized Design Information
As I've already explained, the best way to use CSS in the design of a Website is to write one or more .css files to house all your style code, and then link it to the appropriate pages with the HTML tag. With this approach, everything to do with the look of your site can be found in one place, and is not jumbled up with the content of your site.
The idea is that you should be able to change the content of your site without affecting its look, and vice versa. In traditional Web design, where HTML tags and attributes are used to specify how things look in the browser, the code for these two aspects of your site is mixed together, so anyone who wants to modify one of these must understand both, or risk breaking one while making changes to the other. The look and the content of the site are said to be coupled.
This principle of keeping code that serves different purposes in different places is known in the programming world as decoupling. If a site's style and content are decoupled, a Web designer can modify the look of the site by editing the .css file(s), while a content editor can add content to the site by editing the .html files.
Comments