Uh-oh, it looks like your Internet Explorer is out of date.
For a better shopping experience, please upgrade now.
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.
* 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).
About the Author
Richard York is a web application developer for Trilithic, Inc., a company specializing in test equipment for the telecommunications industry. He wrote his first book, Beginning CSS: Cascading Style Sheets for Web Design (Wrox Press), in 2004.
Richard maintains a personal website at http://www.richard-york.com where you can learn more about his professional and personal interests.
Read an Excerpt
Beginning CSSCascading Style Sheets for Web Design
By Richard York
John Wiley & SonsCopyright © 2007 John Wiley & Sons, Ltd
All right reserved.
Chapter OneIntroducing Cascading Style Sheets
Cascading style sheets is a language intended to simplify website design and development. Put simply, CSS handles the look and feel of a web page. With CSS, you can control the color of text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other visual effects.
HTML and XHTML are very similar languages. In fact, for the majority of documents today, they are prettymuch identical, although XHTML has some strict requirements about the type of syntax used. I discuss the differences between these two languages in detail in Chapter 2, and I also provide a few simple examples of what each language looks like and how CSS comes together with the language to create a web page. In this chapter, however, I discuss the following:
The W3C, an organization that plans and makes recommendations for how the web should function and evolve
How Internet documents work, where they come from, and how the browser displays them
An abridged history of the Internet
Why CSS was a desperately needed solution
The advantages of using CSS
The next section takes a look at the independent organization that makes recommendations about how CSS, as well as a variety of other web-specific languages, should be used and implemented.
Who Creates and Maintains CSS?
Creating the underlying theory and planning how cascading style sheets should function and work in a browser are tasks of an independent organization called the World Wide Web Consortium, or W3C. The W3C is a group that makes recommendations about how the Internet works and how it should evolve. I emphasize should, because the World Wide Web Consortium has no control over the implementation of the standards that it defines. The W3C is comprised of member companies and organizations that come together to create agreed-upon standards for how the web should function. Many prominent companies and organizations are W3C members, including Microsoft, Adobe, The Mozilla Foundation, Apple, Opera Software, and IBM. The W3C oversees the planning of several web languages including CSS, HTML, XHTML, and XML, all of which are mentioned in this book.
CSS is maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by W3C members, it becomes a recommendation. These ratified specifications are called recommendations because the W3C has no control over the actual implementation of the language. Independent companies and organizations create that software.
The specifications created by the W3C are not limited only to web browsers; in fact, the specifications can be used in a variety of software, including word processor and spreadsheet applications, as well as by different types of hardware devices, such as PDAs and cell phones. For that reason, the software implementing a specification is referred to by the W3C as the user agent, which is a generic term that encompasses all the different types of software that implement W3C specifications.
The W3C merely recommends that a language be implemented in a certain way to ensure that the language does what is intended no matter which operating system, browser, or other type of software is being used. The goal of this standardization is to enable someone using the Netscape browser, for example, to have the same Internet experience as someone using Internet Explorer, and likewise, for developers to have a common set of tools to accomplish the task of data presentation. Were it not for web standards, developing documents for the web might require an entirely different document for a given user agent. For example, Internet Explorer would require its own proprietary document format, while Mozilla Firefox would require another. Common community standards provide website developers with the tools they need to reach an audience, regardless of the platform the audience is using.
As I write this, CSS comes in four different versions, each newer version building on the work of the last. The first version is called CSS level 1, and became a W3C recommendation in 1996. The second version, CSS level 2, became a W3C recommendation in 1998. The third version, CSS level 2.1, is currently a working draft, downgraded from a candidate recommendation since I wrote the first edition of this book in 2004. A candidate recommendation is the status the W3C applies to a specification when it feels the specification is complete and ready to be implemented and tested. After the specification has been implemented and tested by at least a few of the member companies, the candidate recommendation is then more likely to become a full recommendation. A working draft is the status the W3C applies to an ongoing work, which is subject to change. The fourth version of CSS is called CSS level 3, and many portions of it are still in development. Although portions of CSS are officially subject to change by the W3C standards body, I may discuss these features anyway if at least one browser maker has implemented the feature in question. I preface any such discussion with the warning that these features are still under development and could be subject to change.
This book discusses the portions of CSS available in browsers at the time of this writing-that includes most of CSS 2 and CSS 2.1, and a little of CSS 3. Some portions of CSS 2.1 contradict CSS 2 and are not yet implemented in any browser. Where appropriate throughout the book and before introducing a new CSS feature, I reference the W3C specification in which that CSS feature is documented by including the phrase Documented in CSS followed by the version number. Later in this chapter, I discuss the browsers that you need to test and build CSS-enabled web documents.
You can find the W3C website at www.w3.org. Go there to find documents that browser makers refer to when they are looking to implement languages such as CSS into a browser or other software. Be advised, these specifications lean heavily toward the technical side. They aren't intended as documentation for people who use CSS; rather, they are aimed at those who write programs that interpret CSS. Despite the heavily technical nature of the W3C specification documents, many web developers refer to the W3C documents as end-user documentation anyway, since it is the most complete resource.
Now that you know a little about who is responsible for planning and outlining the development of CSS, the next section describes how a web document makes its way into your browser.
How the Internet Works
As you probably already know, the Internet is a complex network of computers. Most of what goes on behind the scenes is of little interest to the person developing content for a website, but it is important to understand some of the fundamentals of what happens when you type an Internet address into your browser. Figure 1-1 shows a simple diagram of this process.
At the top of the diagram in Figure 1-1, you see a computer labeled server-side and a computer labeled client-side. The diagram is by no means an exhaustive or complete picture of what happens when you type in an Internet address, but it serves the purpose of illustrating the portions of the process that the aspiring web designer needs to understand. The server-side computer houses the documents and data of the website and is generally always running so that the website's visitors can access the website at any time of day. The client-side computer is, of course, your own computer.
The server-side computer contains HTTP server software that handles all the incoming requests for web pages. When you type an Internet address into a browser, the browser sends out a request that travels through a long network of computers that act as relays for that request until the address of the remote (server-side) computer is found. After the request reaches the HTTP server, the HTTP server sees what it is you are trying to find, searches for the page on the server's hard drive, and responds to the request you've made, sending the web page that you expect. That response travels back through another long chain of computers until your computer is found. Your browser then opens the response and reads what the HTTP server has sent back to it. If that server has sent an HTML document or another type of document that your browser can interpret, it reads the source code of that document and processes it into a displayable web page.
This is where CSS enters the picture. If CSS is present in the document, the CSS describes what the HTML page should look like to the browser. If the browser understands the CSS, it processes the web page into something you can see and interact with. If the browser understands only some of the CSS, it generally ignores what it doesn't understand. If the browser doesn't understand CSS at all, it usually displays a plain-looking version of the HTML document.
How CSS Came to Be
During the mid-1990s, use of the Internet exploded. At that time, HTML was the only option for presenting a web page. As the Internet began to be used by more regular folks (as opposed to government, educational institutions, and researchers, as in the early days), users began demanding more control over the presentation of HTML documents. A great quandary arose-clearly HTML alone was not good enough to make a document presentable. In fact, not only was it not good enough, HTML alone simply wasn't suited for the job. HTML did not have the functionality that professional publishing required and had no way of making magazine- or newspaper-like presentations of an electronic document.
At the time, style sheets were not a new invention. In fact, style sheets were part of the plan from the beginning of HTML in 1990. Unfortunately, however, no standardized method of implementing style sheets was ever outlined, leaving this function up to the various browsers. In 1994, Tim Berners-Lee founded the World Wide Web Consortium, and a few days later, Håkon Wium Lie published his first draft of Cascading HTML Style Sheets. This draft was a proposal for how HTML documents could be styled using simple declarations.
Of those that responded to Håkon's draft of Cascading HTML Style Sheets was Bert Bos, who was working on a style sheet proposal of his own. The two joined forces and came up with cascading style sheets. They dropped HTML from the title, realizing that CSS would be better as a general style sheet language, applicable to more than one type of document. CSS caused some controversy at its inception because part of the underlying fundamentals of the new style sheet language was that it created a balance between the browser's style sheet, the user's style sheet, and the author's style sheet. Some simply didn't like the idea that the user could have control over the presentation of a web document. Ultimately, however, the Internet community accepted CSS.
During the time that CSS was being planned, browsers began allowing HTML features that control presentation of a document into the browser. This change is the primary reason for much of the bloated and chaotic source code in the majority of websites operating today on the Internet. Even though HTML was never supposed to be a presentational language, it grew to become one. Unfortunately, by the time CSS level 1 was made a full W3C recommendation in 1996, the seed had already been planted. Presentational HTML had already taken root in mainstream website design and continues today.
However, all is not lost. Today, the most popular browsers have fantastic support for cascading style sheets. Ironically, the browser exhibiting the least support is Microsoft's Internet Explorer for Windows, which still has plenty of CSS support to do away with most presentational HTML design. More ironic still, among the browsers with the best CSS support is Netscape's browser, and its open source offspring, Mozilla Firefox. This may beg the question: If Microsoft was such an avid supporter of cascading style sheets in the beginning, why is Microsoft's browser the least standards-compliant today? The answer is that Microsoft did indeed follow through with its promise for CSS support, and it was the most compre- hensive and impressive implementation of CSS even up to the release of Internet Explorer 6 in 2001. Even so, CSS implementation in Internet Explorer has declined since the release of Internet Explorer 5. We can only speculate as to why Microsoft's browser declined in its support for CSS.
In the next section, I talk about the different types of browsers that you'll need to work through the examples for this book.
Because CSS is a standard web language, many browsers support it. Therefore, it stands to reason that the aspiring web designer would want to harness that standardization to reach the largest audience possible, regardless of operating system or platform. In this section I provide an overview of each of these browsers, and where you can look to obtain a new version of that browser. Together, the following browsers combined comprise over 99 percent of the browser market share for the majority of websites in operation today:
Internet Explorer 6 and 7 for Windows
Mozilla Firefox for Windows, Mac, and Linux
Opera for Windows, Mac, and Linux
Safari for Mac OS X
In the next section, I discuss Internet Explorer 6 and 7 for Windows.
Internet Explorer is Microsoft's flagship browser that comes preloaded with the Windows operating system. The current stable version, as of this writing, is version 7.
Internet Explorer 7
Late in 2004, after the first edition of this book was published, Microsoft finally began work on a new version of Internet Explorer. IE 7 includes stronger security, tabbed browsing, and other goodies for users, and for developers - improvements to IE's support for CSS!
Excerpted from Beginning CSS by Richard York Copyright © 2007 by John Wiley & Sons, Ltd. Excerpted by permission.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.
Table of Contents
Part I: The Basics.
Chapter 1: Introducing Cascading Style Sheets.
Chapter 2: The Essentials.
Chapter 3: Selectors.
Chapter 4: The Cascade and Inheritance.
Part II: Properties.
Chapter 5: Text Manipulation.
Chapter 6: Fonts.
Chapter 7: The Box Model.
Chapter 8: CSS Buoyancy: Floating and Vertical Alignment.
Chapter 9: List Properties.
Chapter 10: Backgrounds.
Chapter 11: Positioning.
Chapter 12: Tables.
Part III: Advanced CSS and Alternative Media.
Chapter 13: Styling for Print.
Chapter 14: XML 501
Chapter 15: The Cursor Property.
Appendix A: Answers to Exercises.
Appendix B: CSS Reference.
Appendix C: CSS Colors.
Appendix D: Browser Rendering Modes.
Most Helpful Customer Reviews
This book does an excellant job at giving a clear understanding of the basic principles of CSS. I have a solid foundation and am able to clearly understand CSS code. The addition of color helped me as well. I look forward to beginning Professional CSS by Wrox as well!!