CSS Web design

Creating Compelling Designs

CSS allows you to separate presentation from content when building a Web site. Put another way, HTML itself is rather limited in what it can effectively display. It’s fine for holding or describing content (such as a paragraph of text), but the appearance of raw HTML Web pages isn’t very stylish (to put it kindly).

With HTML, you often can’t find an easy way — or any way at all — to display the content so that it looks really good when someone views it in a browser. Using CSS techniques, you can often make your site much more attractive, and at the same time, enforce style rules that help unify the entire site’s appearance across all its pages.

In this book, you find out how to wrap your online content in appealing visual designs using CSS, including special dramatic effects such as animated transi¬tions between images or entire pages. Style sheets can provide striking, well-designed containers into which relatively plain HTML content is poured.

The best Web pages aren’t merely efficient, logical, and stable — they also look really cool. The end result of employing CSS is a more attractive Web site with a more coherent, effective overall design.

Separating Content from Style

CSS also improves efficiency by allowing you to separate content from the styles that control the content’s appearance. You can describe your CSS styles in the header section of a Web page — thereby moving them up and out of

the HTML code. Or you can even put your CSS style rules in entirely separate files. A Web page’s HTML resides in one file. It merely includes a link specify¬ing the location of the independent CSS file that contains the style rules (how a Heading 1 headline or paragraph elements are supposed to look, where they’re positioned, how big they are, what texture underlies them, and so on).

If you’re a designer working on a Web page with a programmer, it’s more efficient for you to separate your code from the programmer’s HTML or script code. A designer can work on an external CSS style sheet, rather than wading through the programmer’s HTML files and trying to manage style attributes embedded within the HTML code. The HTML programmer will appreciate this, and so will you, the CSS designer. No more stepping on each other’s toes.

Of course, many Web sites are designed by a single person wearing many hats: HTML, script, and CSS can all be written by one talented individual. This book doesn’t neglect that audience. Most of the CSS examples in this book are contained within HTML pages, demonstrating how the entire page works in harmony. You can just load the book’s examples into your browser and see the delightful results immediately. An entire chapter is even devoted to scripting, so that you can get your feet wet with interactive dynamic CSS effects as well.

Benefiting from the Cascade

CSS offers various kinds of benefits. For example, a single style sheet can cas¬cade its effects through all the pages in a Web site. One side of effect of this is that if you decide to change your site’s default body font from Arial to Times New Roman, you need make that change only once within the style sheet, rather than hunting down all the attributes throughout the entire set of HTML code files that make up your site. Another benefit of using CSS is that the style sheet only needs to be downloaded once to the user’s computer. Thereafter, it’s called up from a local cache, resulting in smaller HTML pages. Your Web pages load faster into the user’s browser — still a major consideration for the 60 percent or so of online Americans who still don’t have broadband high¬speed Internet connections.

If you’ve already worked with CSS, this book will sharpen your skills and show you lots of new techniques. You’ll take your Web design to the next level. If you’re new to CSS, you’re in the right place: You’ll find just what you need here to build unified, attractive, inviting Web sites.
This book shows you, the CSS designer, how best to exploit, expand, adminis¬ter, and write code for Web pages. The book covers all the essentials of CSS,

with many step-by-step examples showing how to manage the various ele¬ments of CSS, including:

* How to design Web pages without using tables
* Understanding CSS inheritance
* Best coding techniques
* Page elements (spacing, fonts, colors, and so on)
* Practical ways to integrate CSS into new or existing Web sites
* Syntax rules, properties, and values
* How CSS works together with HTML and scripting
* Embedded and external style sheets
* Advanced visual effects such as transitions
* Selectors and declarations
* The latest CSS3 features

End of the Browser Wars

CSS has been available for several years, but, like DHTML (dynamic HTML for Web page animation effects), CSS languished because of the browser wars. Basically, Netscape’s Navigator and Microsoft’s Internet Explorer attempted to enforce different, proprietary standards. Now that Netscape is all but dead in the marketplace and standards have become relatively stable because of the dominance of Internet Explorer, CSS has become a major technology for the creation and design of first-rate Web sites. Some incompatibility issues still exist, but this book deals with them only occasionally. Why? Because often you need not write complex, workaround code to take into account an audi¬ence so small that, practically speaking, many Web pages simply ignore them.

That said, I realize that some designers are forced to deal with browser com¬patibility issues, so I do explore the topic in some depth in Chapter 17. You see how to detect which browser and version the user has and how to take appropriate steps to deal with it in your Web page code. I also tell you where to find the best compatibility charts online; how to see what your page looks like and test its behavior in non-compliant browsers; and how to automati¬cally redirect a browser to a different Web page or Web site if that browser can’t deal with your CSS code.

A few years ago, people were moving from Netscape to Internet Explorer, but a large percent of your Web site’s audience was still using Netscape. You had to write CSS (and HTML and scripting) that worked effectively in both browsers.That’s simply no longer true. The migration is over; Netscape is merely a ghost wandering the halls of the computer history museums.

Most CSS books waste lots of space on compatibility issues. I’ve decided to greatly reduce coverage of that topic for precisely the same reason that today’s newspapers infrequently devote space to the Gulf War of 1991. That war’s over. Same with Netscape and the other, minor browsers like Opera that have a small user base. History and popular opinion has elected Internet Explorer (IE) as the standard — who are we to argue? One exception is Mozilla Firefox, which is coming out of left field and could eventually challenge Internet Explorer’s dominance in the browser arena.

Firefox is an “open source” — in other words, “no charge” — piece of software. Of course, Internet Explorer is also sometimes described as free. True, it comes “free” with Windows, but as we all know, that’s not precisely the same as no charge. You do buy Windows, and its browser is a feature of Windows that you get bundled into the operating system.

Another meaning of open source is that the code, the programming underly¬ing the Firefox browser, is available to anyone. Lots of good programmers are writing interesting plug-ins and modifications that you can add to Firefox to give it new features.

Firefox is fast, sleek, and overall pretty stable. In fact, it’s not under constant attack by hackers, as is IE. There are two reasons for this: not too many people are using Firefox (yet), so the payoff of using it to spread viruses is rather poor. Second, virus authors are frequently in sympathy with the ideals of the open source software community, and, shall we say, less inclined to appreciate Microsoft.

So, watch out, IE. Firefox, or something similar, could eventually gain market share and, possibly, eventually become the browser standard. But for now, more than 95 percent of browser users are looking at your Web page through IE, so you can generally ignore the problems that arise when you try to make your CSS code work with all possible browsers and all possible versions of those browsers. IE is likely to continue to dominate for at least the next few years.

Just relax and assume that your Web page visitors are either using IE, or are accustomed to the penalties for sticking with a fringe browser. But if you must face the compatibility issue, take a look at Chapter 17.

Who Should Read This Book

This book is designed to satisfy a broad audience, including both Web pro¬grammers and designers. The book shows how to exploit CSS by developing solutions to common Internet coding and Web-page design problems.

Programmers discover how to more effectively control browser elements in order to build Web clients that are as interactive and efficient as traditional Windows applications. Designers see how to create attractive, coherent Web sites. Beginners will find the book to be an effective tutorial introduction to CSS; experienced users will find it a useful, up-to-date reference.For designers, would-be designers, programmers, and developers alike

The book is written for a broad audience: designers, would-be designers, programmers, developers, and even small office staff or individuals who want their Web pages to come alive. In other words, the book is valuable to everyone who wants to design more effective Web pages and do the work more efficiently.

The book shows how to exploit validators to ferret out errors in your code, and how to solve design problems using utilities, features, hidden shortcuts, and other CSS techniques.

The book is also for would-be designers who want to get involved in creating, customizing, or improving Web page design, but just don’t know how to get started. Whether you want to sell cars, create a good-looking blog, or are interested in creating a great visual impression, you’ll find what you need in this book. The book is filled with useful advice about design (what looks good, what looks bad, and what looks just plain boring). And you get plenty of prac¬tical, real-world CSS examples, including

* Following best design practices
* Managing text effectively
* Using the rule of thirds for effective overall page design
* Creating dynamic, animated effects such as fades and moving shadows

Making do in a shaky economy

No matter what they tell us from the bully pulpit, we know how shaky the econ¬omy is, don’t we? The primary trend in nearly all industries today is toward making do with less: fewer workers, less time to complete tasks, and stretch¬ing resources as much as possible. This trend demands improved productiv¬ity. Some offices respond by letting some of the staff go and heaping additional work on the remaining employees. In many cases, a more successful long-term tactic is to improve the general efficiency of the staff, downsized or not.CSS is loaded with features to improve productivity for Web page design and maintenance, if the designer knows how to exploit them. CSS Web Design For Dummies is the handbook that takes the reader from idea to finished site.

I hope that all my work exploring CSS benefits you, showing you many useful shortcuts and guiding you over the rough spots. I won’t pull any punches: I confess when I had to wrestle with CSS or other code for several hours to accomplish something. But after I’ve put in the time getting it work, I can almost always show you how to do it in a few minutes. The example code is here in this book, ready to do what you need done.

Plain, Clear English

Also, unlike some other books about CSS (which must remain nameless — they know who they are!), this book is written in plain, clear English. Novices find many sophisticated tasks made easy: The book is filled with step-by-step examples that beginners can follow, even if they’ve never written a line of CSS or HTML, or designed a single Web page. And if you’re an experienced CSS designer, better still. You’ll find out how to accomplish sophisticated tasks quickly. You also discover how to harness the machinery built into CSS. You also find out how to leverage your current skills to prepare for the future of CSS programming: moving beyond CSS2 to CSS3.

How to Use This Book

This book concentrates on the currently accepted version of Cascading Style Sheets: CSS2. The next version, CSS3, is not scheduled to become official (translation: fully adopted by Internet Explorer) for several years. However, the CSS committees continue to meet, exchange e-mail, and accept sugges¬tions from the likes of us. They also plan to roll out “modules” — parts of the CSS3 recommendation will appear occasionally for the next few years. If you want to experiment with some of the new stuff, download Mozilla Firefox and try some of the CSS3 code examples in Chapter 15. They won’t work in Internet Explorer, as yet.

This book obviously can’t cover every feature in HTML, scripting, and still do a good job with CSS itself. Yet these technologies intimately interact in the better, more dynamic, and engaging Web sites. CSS adds beauty and coherence to a site. HTML contains the content and organizes it into a tree structure. Scripting offers sophisticated interaction with the user, dramatic animated effects, and other benefits.

As you try the many step-by-step examples in this book, you’ll become familiar with the most useful features of CSS and find many shortcuts and time-savingtricks — some that can take years to discover on your own. (Believe me, some of them have taken me years to stumble upon.) You also see how to exploit HTML and scripting in the context of CSS design. As you’ll discover, it’s fasci¬nating to make these technologies stand together and kick high in the air as one, as if they were a single organism. Kinda like the Rockettes.

Many people think that HTML is impossibly difficult and that scripting (pro¬gramming in the classic meaning of the term) is even more difficult. They don’t have to be.

In fact, you find solutions in this book that you can simply copy. Just copy and paste a few lines of code, for example, to be able to automatically change your CSS styles while the user is viewing your page in the browser. In other words, you can, for instance, resize a paragraph if the user clicks on it. The paragraph’s font-size style can change in response to events like a click. Or, you can set up a timer that makes things happen after a period of delay, or on regular intervals. This sort of thing amplifies your CSS designs and is worth adding to your bag of designer tricks.

This book tells you if a particular wheel has already been invented. It also shows you how to save time by using or modifying existing Web pages to fit your needs, instead of building new solutions from scratch. But if you’re doing something totally original (congratulations!), this book also gives you step-by-step recipes for tackling all the CSS tasks from the ground up.

How This Book Is Organized

The overall goal of CSS Web Design For Dummies is to provide an enjoyable and understandable guide for the CSS designer. This book is accessible to people with little or no CSS experience.
The book is divided five parts. But just because the book is organized doesn’t mean you have to be. You don’t have to read the book in sequence from Chapter 1 to the end, just as you don’t have to read a cookbook in sequence.

In fact, if you want to see what’s coming up in CSS3, just go to Chapter 15 right away.

If you want to find out how to create well-designed Web pages without resort¬ing to the traditional HTML tables to hang your elements on, just flip over to Chapter 12, which explains how to build pages using only CSS positioning fea¬tures. You’re not expected to know what’s in Parts I or II to get results in Part III. Similarly, within each chapter, you can often scan the headings and jump right to the section covering the task that you want to accomplish. No need to read each chapter from start to finish. I’ve been careful to make all the examples and CSS code as self-contained as possible. Each of them works, too. They’ve been thoroughly tested.

All of the source code for all the examples in this book is downloadable from this book’s Web site at www.dummies.com/go/csswebdesign. The following sections give you a brief description of the book’s five main parts.

Part I: The ABCs of CSS

This first Part introduces CSS, explaining its purposes and fundamental nature. You see how common tasks are accomplished and find out all about the elements of CSS design. You also discover how CSS improves on HTML and find out how to build practical style sheets for real-world Web site solu¬tions. You figure out how to think beyond HTML — putting together Web pages that have style and grace — all because of the added power that CSS gives a designer. Topics in this part include starting from scratch, migrating from HTML to CSS, understanding the meaning of the cascade, and getting your feet wet with the major building blocks of CSS behavior: selectors and inheritance. You also consider what kind of editor (if any) you might want to use to assist you in building CSS styles.

Part II: Looking Good with CSS

Part II begins with some practical exploration of the details of CSS design: how you position the pages various zones, conditional formatting, relative position¬ing, absolute and fixed elements, and stacking flow. You go on to see all about handling text: a refresher course for designers who need to brush up on clas¬sic fonts, weights, special effects, and good text design principles in general. This section also serves as a course in text display techniques for those new to the subject. All the essentials are covered, from simple concepts such as font size, to advanced subjects like the uses of the various font families (and why you should avoid some of them like the plagues that they are). This book also covers the kinds of values you can provide to CSS properties, like color and position. You explore the units of length and measurement, color values, percentages, and related positioning and sizing specs. Part II concludes with a chapter where you play around with some great designer secrets: kerning, leading, custom backgrounds, adding textures, and using graphics applica¬tions to improve the quality of some of your page elements. In general, you find out how to achieve striking, compelling design and how to manage some¬thing equally important: avoiding vulgarity in your designs.

Part III: Adding Artistry: Design and Composition with CSS

Part III picks up and expands the topics that concluded Part II: how to make beautiful Web pages using CSS. You consider the elements of good page com¬position, the secrets of Web design gurus, and the issues involving symmetry. (Is severely symmetrical layout ever a good idea, outside of debutante-ball and wedding invitations?) You also find out how to take a new look at your overall design, abstracting the shapes so that you’re not reading any text or viewing any photos. Instead, you’re looking at the black, white, and gray rec¬tangles (and hopefully other shapes) that compose your page.

In this Part, you go on to manipulate margins, padding, borders, lines, and frames. These elements allow you to build effective zones within your page, cuing the viewer about the nature of each zone and collecting related informa¬tion inside separate zones. For example, a caption and the photo it describes can be considered a logical zone, so you might want to frame them, or use a line beneath them, or add some margins around them.

This Part also explores the best way to display tables and lists and how to get rid of tables that are not displayed. (Traditionally, tables have been used as hooks on which to hang the other elements of a Web page, allowing design¬ers to position things. Now, you can get that job done better with pure CSS.)

Part III concludes with some cool transition effects. You see how to gently fade in some text or graphics. (You’ve seen the effect on the better-designed Web pages: One element gradually grows dim as a second element under¬neath it becomes visible.) You also discover other special effects like those seen in movies and TV. Do you want to add some of these animations and transitions to your own pages? You can.

Part IV: Advanced CSS Techniques

Part IV focuses on various sophisticated techniques for those of you who have mastered the CSS basics, beginning with an exploration of the ways that CSS styles cascade, the tree structure, and inheritance in general. You also discover the latest cutting-edge selectors, pseudo-elements (they’re not as pseudo as they might seem), and how CSS3 will redefine the way CSS behaves.

You find out how to employ scripting, which for many designers is their first exposure to true computer programming. True, any time you communicate with a computer (CSS included), you’re using a computer language and, in a technical sense, programming. But scripting is hard-core programming. You can tell the Web page to do pretty much anything you want it to do with scripts. You learn about dynamic code (changing CSS properties and styles while your page is in the user’s browser), timers, animation techniques, tog¬gling, and other cool effects possible only via scripts.

You need not go on to become a script programmer, however, to put these effects into your Web pages. You can just copy and paste — monkey see, monkey do fashion — and the scripts do their jobs just as well as if you knew what you were doing. Part IV concludes with how to fix ailing CSS and HTML code. Called validating, parsing, or more accurately, debugging, you find out the best way to track down and repair Web pages that misbehave and don’t do what you want them to do.

Part V: The Part of Tens

This is the smallest Part in the book, but it’s moist and succulent. It includes various tips, tricks, techniques, and topics that I wanted to include in the book but didn’t quite find a perfect place for elsewhere.

Sure, it’s a grab-bag — I’m not hiding that fact — but you might find the just tip you’ve been looking for here. The topics include a utility that you can use to understand complex CSS selectors (it translates complicated CSS code into ordinary English); how to avoid common CSS coding errors; a browser-independent way to center headlines, text, or graphics; fixing script problems; some of the best CSS online resources, including a site that offers excellent, understandable tutorials on the more baffling aspects of advanced CSScoding; an explanation of why you should consider using Visual Studio as a CSS editor; an online site that specializes in ways to use CSS to build columns into your pages; and more. Each tip was chosen for its succulence.

Read Comment for more information