Beginning CSS: Cascading Style Sheets for Web Design, Second Edition

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 document, this chapter introduces CSS rules and how selectors and declarations are combined to create rules. It demonstrates the various methods used to include CSS in a document. It explains how keywords are used in CSS to create predefined behavior, and how strings are used in CSS to refer to font names in a style sheet. It presents the various units of measurement that CSS supports. Finally, it talks about the different ways of specifying color.

• Chapter 3, "Selectors": Chapter 2 introduced the concept of selectors. Chapter 3 talks about complex selectors, and how you apply style to a portion of a document based on its context within the document or user-initiated events.

• Chapter 4, "The Cascade and Inheritance": In Chapter 4, you learn about how to override styles, how precedence works in a style sheet, and how some styles can be considered more important than others, concepts that come together to define the cascade in cascading style sheets. You also learn how once you set some styles in a document, those styles can be inherited to other parts of a document depending on the context in which they are applied.

Part II: Properties: Throughout Chapters 5 through 12, you learn about properties that are used to manipulate the presentation of a document.

• Chapter 5, "Text Manipulation": Chapter 5, presents the various properties that CSS provides for text manipulation. These properties provide effects such as controlling the amount of space between the letters of words, controlling the amount of space between the words of a paragraph, controlling text alignment, underlining, overlining, or strike-through text. It also shows how to control the case of text by making text all lowercase, uppercase, or capitalized.

• Chapter 6, "Fonts": After you have seen the properties that CSS provides for text manipulation in Chapter 5, Chapter 6 presents the CSS properties you can use to manipulate the presentation of fonts. These effects include applying bold text, setting a font face, setting the font size, setting an italic font, as well as learning to use a property that enables you to specify all CSS's font effects in one single property.

• Chapter 7, "The Box Model": Chapter 7 elaborates on a design concept fundamental to CSS design: The Box Model. You learn how the box model plays an important role in determining layout dimensions. Using the margin, border, padding, width, and height properties, you can control how much space elements within a document occupy, how much space separates them, whether there are borders around them, whether scroll bars should be included. It also discusses a CSS phenomenon known as margin collapsing, which is what happens when top or bottom margins come into direct contact with other top or bottom margins in a web document.

• Chapter 8, "CSS Buoyancy: Floating and Vertical Alignment": Chapter 8, discusses float and clear, two properties used to control the flow of layout in a web document and often used to flow text beside images. It also discusses the vertical-align property, which is used to create effects like subscript or superscript text, as well as to control vertical alignment in table cells.

• Chapter 9, "List Properties": In this chapter, you'll look at the properties CSS provides to control presentation of ordered and unordered lists. This discussion includes the options CSS provides for predefined list markers, custom list markers, and the position of list markers.

• Chapter 10, "Backgrounds": Chapter 10, presents the properties CSS provides to control backgrounds in a web page. This includes properties that set a background color or background image, as well as those that control the position of a background, the tiling of a background, and whether a background remains fixed in place as a web page is scrolled or remains static. Finally, the chapter shows you how to use a property that combines all these individual effects into a single property.

• Chapter 11, "Positioning": You'll see four different types of positioning: static, relative, absolute, and fixed. You use positioning primarily to layer portions of a document. It also describes some of the practical uses for positioning, such as creating a multicolumn layout.

• Chapter 12, "Tables": Chapter 12, presents the different properties that CSS provides for styling (X)HTML tables. The properties presented in this chapter let you control the spacing between the cells of a table, the placement of the table caption, and whether empty cells are rendered. It also looks in detail at the available tags and options that (X)HTML provides for structuring tabular data.

Part III: Advanced CSS and Alternative Media: Throughout Chapters 13, 14, and 15 you learn about how to use CSS to make documents for printing, and another kind of document altogether, XML.

• Chapter 13, "Styling for Print": This chapter discusses what steps to take to use CSS to provide alternative style sheets to create a printer-friendly version of a web document.

• Chapter 14, "XML": In this chapter, you see how you can use CSS to style XML content. This chapter focuses specifically on the CSS display property and how you use this property to change the behavior of tags in an XML or HTML/XHTML document.

• Chapter 15, "The Cursor Property": Here you see how you can change the user's mouse cursor using CSS, how you can customize the mouse cursor, and what browsers support which cursor features.

• Chapter 16, "Dean Edwards's 'IE7'": This chapter talks about one alternative to many of the hacks and workarounds that you need for IE6. It talks about how to install an HTTP server for your website, and how to install and use Dean Edwards's "IE7" JavaScript, which is a collection of IE6 hacks and workarounds designed to make "IE6" feature compatible with its successor. This chapter is available online only, on the Wrox website at www.wrox.com/go/beginning_css2e.

• Appendixes: Appendix A contains the answers to chapter exercises. Appendix B, "CSS Reference," provides a place for you to look up CSS features and browser compatibility on the fly. Appendix C, "CSS Colors," provides a reference of CSS named colors. Appendix D, "Browser Rendering Modes," provides a reference for the browser rendering modes invoked by the presence or absence of a Document Type Declaration (discussed in Chapter 7).