IMHO
December 8, 1997
John Swenson
MSDN Online
If you haven't taken a look at cascading style sheets (CSS) since Internet Explorer 3.0, it's time to reexamine this technology, which has improved with Internet Explorer 4.0. The new CSS support in Internet Explorer 4.0 allows developers even more control over the design and appearance of their Web sites and Web applications.
Internet Explorer 3.0 was Microsoft's first browser to support CSS. Internet Explorer 4.0 goes beyond the World Wide Web Consortium's (W3C) original CSS Level 1 specification by supporting new features proposed in the working draft for CSS Level 2. As one developer put it: "Same story, except now you can do a lot more cool things."
In a nutshell, CSS improvements in Internet Explorer 4.0 make it easier to print Web pages and position elements more precisely on the page.
But does it matter?
Rather than delve into the technical details of CSS in this column, I asked one of Microsoft's CSS experts to explain to Web applications developers why they should care about CSS. (If you're looking for technical details about CSS, see the links at the bottom of this column. Plenty of CSS information is available on the Web from the W3C, Microsoft, and other reliable sources.)
With Dynamic HTML bursting onto the scene this year and gaining a large following among Web application developers trying to make their sites look better, some developers might wonder if CSS even matters anymore. CSS does matter, explains Scott Isaacs, a lead program manager on the Internet Explorer team, because it is one of the technologies that make up Dynamic HTML. (Other parts of Dynamic HTML are HTML 4.0, data binding, and the Document Object Model.)
"Dynamic HTML covers all our client-side standards in Internet Explorer 4.0, including CSS," explains Isaacs, the author of Inside Dynamic HTML, a new book from Microsoft Press. He's worked with the W3C on CSS and other specifications that fall under the Dynamic HTML umbrella.
Separation is the key
CSS is important because it allows developers to separate content from the way that content is presented in a Web site, Isaacs says. The W3C endorsed this separation long ago. By separating presentation from content, developers can save time by making it much easier to update their content. CSS can automatically format all that content so it is displayed properly.
With CSS, it's a lot less work to update a huge Web site or Web application site. "You can define the look of your entire Web site with one file," Isaacs says. CSS lets you describe the attributes of any element on a page, including fonts, indentation, colors, alignment, and spacing.
In this day of political battles over software standards, CSS is refreshing because it's a straightforward and noncontroversial technology. CSS is simply about making your pages look better, and saving developers work, Isaacs says.
The bottom line is that CSS decreases site maintenance work. Whether you just write Web applications for a site or maintain the site yourself, that's an undeniable benefit. "If you have 500 Web pages and you want to change the background color all of on them, you can either change it once (in CSS) or you can change it on 500 pages," Isaacs says. If talk of Style Sheets makes your eye start to glaze over, just think about all the work style sheets can save you in terms of designing and maintaining a Web site.
If you're going to be doing any sort of Web development in the future, it makes sense to learn about CSS, Isaacs adds. Your knowledge of CSS won't become obsolete any time soon, since the W3C has declared that all future presentation extensions are going to be done through CSS, not new HTML tags. There will be more HTML tags added in future, but they'll be context tags, not content tags. These tags will do more than just make a page look different—they'll add meaning to the tags themselves.
CSS is designed to degrade gracefully, which means if a browser doesn't recognize a Style Sheet or Style Sheet attribute, the browser will simply ignore it. No error will occur.
There are tools that let you add CSS to your Web pages without hand coding. As a somewhat loyal Microsoft employee, I have to mention FrontPage 98. Microsoft's new Web-authoring tool has a style button (in the page properties dialog box) that opens a Style dialog box. The Style box lets you assign CSS attributes to any page element, simply by entering page-design information in the dialog box.
A lot of developers write their style sheets in Notepad, but new Web tools are making it easier and more intuitive to author CSS according to Isaacs.
CSS is programmable
Once developers learn the basics of CSS, they can keep going. The Document Object Model (DOM) in Internet Explorer 4.0 makes CSS programmable as an object, Isaacs says, just as it makes HTML programmable in the same way. This programmability is what makes Dynamic HTML dynamic, allowing developers to create Web pages that automatically change and tailor themselves to the user.
As more developers learn to add Dynamic HTML to their Web applications, expect to hear much more about CSS. This component of Dynamic HTML should grow in popularity as Web sites grow ever larger, more sophisticated, and more difficult to maintain.
For more information
For technical details on CSS, the W3C Web site (http://www.w3.org/Style/) has information on CSS Level 1 and Level 2 specifications. Microsoft Site Builder Network columnist Nadja Vol Ochs also has written extensively on CSS (see http://microsoft.com/sitebuilder/columnists/default.asp for appropriate links). Finally, Scott Isaacs has a section devoted to CSS coding on his Inside Dynamic HTML Web site (http://www.insidedhtml.com/css/tutor.htm).
Comments? Send us e-mail.