There are an increasing number of CSS resources around, yet you only have to look at a CSS mailing list to see the same questions popping up time and again: How do I center a design? What is the best rounded-corner box technique? How do I create a three-column layout?
If you follow the CSS design community, finding the solution is usually a case of remembering which website a particular article or technique is featured on. However, if you are relatively new to CSS, or don't have the time to read all the blogs, this information can be hard to track down.
Even people who are skilled at CSS run into problems with some of the more obscure aspects of CSS such as the positioning model or specificity. This is because most CSS developers are self-taught, picking up tricks from articles and other people's code without fully understanding the specifications. And is it any wonder, as the CSS specification is complex, often contradictory, and written for browser manufacturers rather than web developers?
Then there are the browsers to contend with. Browser bugs and inconsistencies are one of the biggest problems for the modern CSS developer. Unfortunately, many of these bugs are poorly documented, and their fixes verge on the side of folk law. You know that you have to do something a certain way, or it will break in one browser or another. You just can't remember for which browser or how it breaks.
So the idea for a book formed. A book that brings together the most useful CSS techniques in one place, that focuses on real-world browser issues and that helps plug common gaps in people's CSS knowledge. A book that will help you jump the learning curve and have you coding like a CSS expert in no time flat.
CSS Mastery is aimed at anybody with a basic knowledge of HTML and CSS. If you have just recently dipped your toes into the world of CSS design, or if you've been developing pure CSS sites for years, there will be something in this book for you. However, you will get the most out of this book if you have been using CSS for a while but don't consider yourself an expert just yet. This book is packed full of practical, real-world advice and examples to help you master modern CSS design.
This book eases you in gently, with three chapters on basic CSS concepts and best practices. You will learn how to structure and comment your code, the ins-and-outs of the CSS positioning model, and how floating and clearing really works. You may know a lot of this already, but you will probably find bits you've missed or not understood fully. As such, the first three chapters act as a great CSS primer as well as a recap on what you already know.
With the basics out of the way, the next five chapters cover core CSS techniques such as image, link, and list manipulation; form and data-table design; and pure CSS layout. Each chapter starts simply and then works up to progressively more complicated examples. In these chapters, you will learn how to create rounded-corner boxes, images with transparent drop shadows, tabbed navigation bars, and interactive buttons. With many of these techniques, you will first learn the traditional way of doing them before seeing how you can achieve the same affect using CSS 3. If you want to follow along with the examples in this book, all the code examples can be downloaded from www.cssmastery.com or www.friendsofed.com.
Browser bugs are the bane of many a CSS developer, so all the examples in this book focus on creating techniques that work across browsers. What's more, this book contains a whole chapter devoted to bugs and bug fixing. In this chapter, you will learn all about bug-hunting techniques and how to spot and fix common bugs before they start causing problems. You will even learn what really causes many of Microsoft Internet Explorer's seemingly random CSS bugs.
The last two chapters are the pièce de résistance. Simon Collison and Cameron Moll, two of the best CSS designers around, have combined all of these techniques into two fantastic case studies. So you learn not only how these techniques work but also how to put them into practice on a real-life web project.
This book can be read from cover to cover or kept by your computer as a reference of modern tips, tricks, and techniques. The choice is up to you.
This book uses a couple of conventions that are worth noting. The following terms are used throughout this book:
HTML refers to both the HTML and XHTML languaages.
Unless otherwise stated, CSS relates to the CSS 2.1 specification.
Internet Explorer 6 (IE 6) and below on Windows refers to Internet Explorer 5.0 to 6.0 on Windows.
Modern browsers are considered to be the latest versions of Firefox, Safari, and Opera along with IE 7 and above.
It is assumed that all the HTML examples in this book are nested in the
<body>of a valid document, while the CSS is contained within an external style sheet. Occasionally, HTML and CSS have been placed in the same code example for brevity. However, in a real document, these items need to go in their respective places to function correctly.
Finally, for HTML examples that contain repeating data, rather than writing out every line, the ellipsis character (. . .) is used to denote code continuation:
With the formalities out of the way, let's get started.