Developing with Web Standards: Presentation
- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
In this chapter, we'll look at the core concepts and syntax of CSS. Later on, we'll put this knowledge into practice with focused chapters on page layout (Chapter 9), CSS resets and frameworks (Chapter 10), CSS3 (Chapters 12 and 13), and web typography (Chapter 15).
A Short History of Style for the Web
The idea of separating structured content from information about how that content should be presented has been around since the 1970s. The initial proposal for HTML included the idea that presentation would be the domain of a separate style sheet language, but no such language was developed. In the mid-1990s, browser makers responded to a huge demand for control over presentation by creating such new HTML features as the font element, the bgcolor attribute for the body element, vlink and other attributes for styling links, and so on.
As a result of these changes, HTML devolved from a semantics-focused markup language to one festooned with presentational elements and attributes, few of which were part of any standard. Such HTML was difficult to write and to understand. Worse, web content marked up using these incarnations of HTML was hidden by vast swaths of purely presentational markup, making it difficult for search engines and user agents like screen readers to make sense of the content itself. Complex presentational markup is also extremely difficult to maintain: sites marked up solely with presentational HTML were so difficult to redesign that their markup often had to be abandoned and recoded from scratch.
In 1996, the W3C published the CSS1 specification, based in large part on earlier work by Bert Bos and Håkon Wium Lie. Internet Explorer 3, released in 1996, had experimental support for CSS, and both Internet Explorer 4 and Netscape 4—the "version 4" browsers that ushered in the era of modern web development—offered more complete though painfully buggy support for CSS1. With these browsers, CSS became a real option for basic styling including fonts, colors, and whitespace control. Complex CSS page layout, however, was still some way off.
Internet Explorer 5 for the Mac, released in 2000, was the first browser that could be said to have genuinely usable support for the features of CSS1 and many of the features of CSS2 (which was published in 1998, but never fully supported in any browser). IE 5 for the Mac, whose Tasman rendering engine was developed under the leadership of Tantek Çelik, showed what could be done with CSS, particularly when it came to page layout. It also made developers realize that targeting older, less capable browsers—as well as newer, more sophisticated browsers—would be an increasingly important part of their jobs. (See Chapter 7 for a much longer discussion of this issue.)
The release of Internet Explorer 6 for Windows was another important milestone for CSS-based development; though its CSS support is now seen as buggy and uneven in comparison to later browsers, IE 6 was the first browser that offered reasonably good CSS support for Windows users. Sadly, the demise of Netscape Communicator slowed updates to Netscape 4, which meant that developers had to keep coding for Netscape's version 4 well after Internet Explorer had moved on to more sophisticated (though still buggy) CSS implementations. Through the late 1990s and early 2000s, support for CSS and web standards as a whole grew among web developers. Yet the slow pace of development of CSS support in browsers—and of browser upgrades by users—also made the period one of great frustration for developers. Many experienced developers who had perfected their presentational HTML skills resisted the adoption of CSS, often with the frustrated (and not entirely unreasonable) cry of "CSS doesn't work!"
The introduction of Safari for the Mac in 2003 and Firefox in 2004 shook the world of web browsers out of its complacency. Safari, which was based on the open source KHTML—which Apple themselves later open sourced as the rendering engine WebKit—and Firefox, which was based on the Mozilla open source codebase started by the Netscape team, placed a strong emphasis on standards support. Simultaneously, Opera Software, led by CTO Håkon Wium Lie, continued to support standards in the Opera browser and promote standards-based development to the developer community.
At about this same time, Microsoft announced that they would not release new versions of Internet Explorer for their then-current OS, Windows XP, causing many developers' hearts to sink at the thought of being forced to support IE 6 for all eternity.
The rapid adoption of Firefox and Safari, however, may have prompted a change of heart at Microsoft, which later announced that Internet Explorer 7 would be available on Windows XP as well as the newer Vista operating system—and that it would include improved standards support. With the release of IE 7 and the subsequent introduction of IE 8 (also available for Windows XP), which offered even better standards support, web standards had finally become central to both web developers and all browser makers. As a result, CSS finally became the undisputed technology for controlling the presentation of web content.
Why Separate Content from Appearance?
But why is CSS so important? What are the practical benefits of separating the presentation of a page from its markup?
- When markup is decoupled from presentation, multiple developers can work on different aspects of a site's development independently.
- Site maintenance is far more efficient: a complete redesign can often be achieved with little or no changes to a site's markup.
- When we increase the ratio of content to markup, we're almost certainly improving the visibility of a page's content to search engines, which is as important as any other factor in search engine optimization.
- Clean, well structured markup is usually much easier for assistive devices like screen readers to understand, which makes sites more accessible.
- The file sizes of pages that are marked up semantically and structurally are usually considerably smaller than those marked up presentationally, which results in bandwidth savings and (usually) improved site performance.
But if you've read this far, you're probably already convinced. So let's dive into CSS.