Beginning CSS: Cascading Style Sheets for Web Design

Cascading style sheets (CSS) are the modern standard for website presentation. When combined with a structural markup language such as HTML, XHTML, or XML (though not limited to these), cascading style sheets provide Internet browsers with the information that enables them to present all the visual aspects of a web document. Cascading style sheets apply things such as borders, spacing between paragraphs, headings or images, control of font faces or font colors, background colors and images, textual effects such as underlined or strike-through text, layering, positioning, and a number of other presentational effects. CSS controls the presentational aspects of a web page's design, whereas HTML, XHTML, or XML controls the structure of a web page, which means little more than determining that certain text is a heading, other text is a paragraph, still other text is a list of hyperlinks, and so on. CSS provides enhanced and precise visual rendering; markup languages such as HTML provide meaning and structure.

Beginning CSS: Cascading Style Sheets for Web Design, Second Edition covers all the details required to combine CSS with HTML, XHTML, or XML to create rich, aesthetically powerful designs. Throughout the book, you’ll focus on combining CSS with XHTML specifically because XHTML is the standard hailed by Internet standards bodies as the successor to HTML and the present and future of website design. CSS and XHTML allow a web document to be presented with less code, resulting in a significantly smaller file size and greatly increased ease of maintenance. CSS also enables the presentation of a web document to be centralized, which allows for the look and feel of an entire website to be written and centralized in one or a few simple documents, which makes updating a website a breeze. With only a few simple edits to a single document, the look and feel of an entire website can be completely changed.

By using modern standards like CSS and XHTML, you can drastically reduce the cost of building and maintaining a website when compared to legacy HTML-only pages. You can also greatly reduce the amount of physical bandwidth and hard disk space required, resulting in immediate long-term benefits for any website.

This book also discusses how to style XML documents with CSS—XML being a more advanced markup language with multipurpose applications. XML will play an increasingly larger role in the production of XHTML documents in the future.

This second edition of Beginning CSS features a near-complete overhaul of the content from the first edition. Changes based on what readers had to say about the first edition helped to create the most comprehensive introduction on CSS available on the market. Throughout this book, you see CSS broken down into simple examples that focus on a single concept at a time. This allows you to better understand how and why something works, since you aren't presented with a lot of irrelevant code, and you can better see the bits and pieces that come together that make something work. While these examples may not be particularly pretty, they are extremely valuable learning tools that will help you master cascading style sheets.

To enhance the learning experience, most of the source code examples are presented in syntax-colored code, a special feature in this book. Syntax coloring is a feature that you commonly see in fancy development software, such as Zend Studio (used to develop PHP), or Microsoft's Visual Studio (used to develop ASP, C#, and so on), and other software used by professional programmers every day. Syntax coloring is used in these software suites to make programming easier and more intuitive, and it offers tremendous benefits in teaching as well. It allows you to see what the different bits and pieces are in source code, since each of the different bits and pieces has a different coloring to identify its purpose. It helps you to distinguish the building blocks of code more easily, and if you use similar development software to write your CSS and HTML documents, you'll also find that you make fewer mistakes and typos, since syntax coloring also helps you to write code that is more bug free.

Many of the source code examples feature annotations to highlight important, not-to-be-forgotten bits of information, and to visually point out concepts that are discussed in the surrounding text.

This edition also features every screenshot from a browser in color, a first for Wrox. Presenting the browser screenshots in color makes it easier for you to compare your results with what you see in the book.

This book also approaches CSS development from a browser-neutral point of view, and provides all the information that you need to get a good healthy start on professional cross-browser, cross-platform website design with IE 6, IE 7, Firefox 2, Opera 9, and Safari 2, which will allow you to reach over 99 percent of the web browsing public.

You also see comprehensive coverage of bugs, and workarounds for the IE 6 and IE 7 web browsers. Long a thorn in the side of CSS developers, making CSS work in IE 6 can be quite a chore without detailed knowledge of its quirks and shortcomings. This book covers many of the hacks and nonstandard workarounds that you may need to develop compatible CSS content in IE 6. IE 7 features many great improvements to CSS support, and though they are much fewer than its predecessor, you still need a few tricks to make your web page shine in Microsoft's latest browser. It covers the workarounds that you'll need to make your pages work just as well in IE 7 as they do in all the other popular browsers. In addition, you'll find the quick reference in Appendix B updated to reflect all of IE 7's new CSS support.

Along with better coverage of Internet Explorer, there’s greatly improved coverage of Mac OS X browsers, Safari, Firefox, and Opera. You'll see that Mac browsers are equally represented among their Windows brethren.

Whom Is This Book For? This book's primary audience is anyone seeking to learn how to use cascading style sheets to present web documents. Because cascading style sheets are used to control the presentational layout of a web document, people from backgrounds in art, graphic design, or those who prepare print layouts for publishing will feel at home using CSS. Regardless of your background, CSS is a simple and powerful language designed so that anyone can understand and use it.

To get the most out of this book, you need some experience with markup languages like HTML or XHTML. If you are completely new to website design and development, you should begin learning web programming with Jon Duckett's Beginning Web Programming with HTML, XHTML, and CSS. Jon Duckett's book provides a complete overview of website development and design for the complete beginner, whereas Beginning CSS: Cascading Style Sheets for Web Design, Second Edition focuses specifically on the role of CSS in website design.

This book presents all of the material you need to become comfortable with writing CSS from scratch.

What Does This Book Cover? This book covers portions of the CSS Level 1, 2, 2.1, and 3 specifications. These specifications are created by an independent, not-for-profit Internet standards organization called the World Wide Web Consortium (W3C) that plans and defines how Internet documents work. The majority of the book is written using what is defined in the CSS Level 2.1 specification.

This book leads you through how to write CSS so that it is compatible with all of the most popular web browsers, focused on all of the following popular browsers:

* Microsoft Internet Explorer 6 for Windows

* Windows Internet Explorer 7 for Windows XP Service Pack 2, Windows Server 2003, Windows XP Professional 64 bit, and Windows Vista

* Safari 2 for Mac OS X 10.4 (Tiger)

* Mozilla Firefox 2 for Mac OS X, Windows, and Linux

* Opera 9 for Mac OS X, Windows, and Linux

The preceding browsers make up over 99 percent of the web browser market share at the time of this writing. For your convenience, this book also includes an integrated CSS feature reference throughout the book, as well as notes on browser compatibility. A CSS reference is also included in Appendix B.

How This Book Is Structured: This book is divided into three parts. The following explains each of these three parts in detail, and what each chapter covers.

Part I: The Basics: Throughout Chapters 1 through 4 you learn the founding principles of CSS-based web design.

* Chapter 1, "Introducing Cascading Style Sheets": This chapter talks about what CSS is, why it exists, who created it, where it is maintained, and how it has evolved. It also discusses some of the basic differences among the various CSS specifications—CSS Level 1, CSS Level 2, CSS Level 2.1, and CSS Level 3—and how these specifications define what CSS is. You also learn more about each of the most popular browsers in use today, how to obtain them, and write your first CSS-enabled document. It also shows you how to install Internet Explorer 6 and Internet Explorer 7 side-by-side on the same computer for testing.

* Chapter 2, "The Essentials": This chapter introduces the basics of CSS. Now that you have seen an example CSS doc...