Comprehensive understanding of CSS_CSS/HTML

Since the release of Dreamweaver MX 2004, I have demonstrated its new features and functionality countless times to new and existing Dreamweaver users. Every time I give a product demo, I'm quick to rave about Dreamweaver MX 2004's new capabilities for designing and rendering CSS (or Cascading Style Sheets). This article provides a detailed and comprehensive understanding of CSS.

However, a new user recently asked a question. To be honest, this question made me speechless. This user simply asked, "Why should I use CSS?" I realized at that point that while those of us who work with HTML and CSS every day are well aware of the benefits of CSS, there are still many people who are not. Or maybe not fully aware of all the benefits CSS has to offer. This article is my written answer to the new user above.

Origins of CSS
Before reviewing the advantages of CSS, I want to introduce its history. The Web management organization W3C recommended the use of CSS in November 1996 and approved the CSS Level 1 specification. The CSS Level 1 specification describes the properties used in HTML pages. These properties replace traditional font tags and other "style" tags such as color and margins. In May 1998, the W3C approved the CSS Level 2 specification, adding some additional functionality to the Level 1 specification and introducing the positioning attribute. These properties replace the common (but incorrect) use of table tags to design the presentation of page elements. The latest version of the CSS specification is CSS 2.1, which improves certain properties and removes properties that have no or little effect in current browsers.

Unfortunately, like many new technologies, CSS took a long time to gain widespread adoption. A big reason for this lies in the browsers, and the web designers who build sites for those browsers. During the CSS ratification period, Netscape Navigator (NN) was still the dominant browser, and CSS was largely unsupported by that browser. Microsoft added very limited support for CSS in version 3 of its browser, but most web designers at the time (myself included) were still coding their pages in NN as the preferred platform.

Over the years, browser makers have expanded support for CSS with each new version. Today, Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera, and Safari all have full support for CSS. But that doesn’t mean our careers as web designers and developers aren’t without their problems. Although all of the above browsers support CSS Level 2, their level of compatibility varies. And in some cases, specific properties can still cause you a lot of trouble. That said, you still need to abide by the old mantra of "test and test."But if you stick to the core properties of the CSS specification, you'll be able to render the page correctly.

But why did the W3C feel the need to create a CSS specification? What does all this mean for me when I create HTML-based Web sites and applications? In my opinion, the reasons why we need to use CSS and the advantages it brings can be divided into the following three main aspects: flexibility, presentation and accessibility

Flexibility
I'm sure almost every web designer and developer has experienced that painful moment: after you've carefully laid out the page and completed all the nested tables, the client asks for a "little" change. This small change may be as simple as "Can you move that graphic a little to the left?" or it may be as dramatic as "I don't like these titles, can they be made larger? When changing the font, by the way How about changing the colors?" If you only have a limited number of pages to work on, you can take a deep breath and spend the better part of an hour making those annoying changes. But when it comes to larger sites (and this is already common), a simple change isn't that simple anyway.

Why is this situation so painful? Because the markup that defines the appearance of the page is itself part of the page. To see an example, just go to any page on any site and count the number of font and table tags. As long as you can remove these tags from the flow (or code) of the actual page, or better yet, externalize them, you can make centralized changes. And that's what CSS can do.

If you use one or more external style sheets, you can apply the changes to your site by modifying the style sheets and then uploading the modified versions.

Imagine how difficult it would be to move site navigation from the left side of the page to the right side of the page in a traditional table-based layout. This required several hours of repetitive and tedious work. However, if you choose to design your page using CSS' positioning properties (often called CSS-P), you can update the page simply by changing the Float or Position properties in the external style sheet. And here's the added benefit: You update all the pages in your site that use that style.

Presentability
Due to the widespread use of broadband, many developers no longer consider the time spent rendering pages in the browser. However, you should keep in mind that many target users still use dial-up connections. Traditional table-based layout is the main reason for slow page download speeds. Because when the browser receives the page from the server, it must first examine and "understand" a series of complex mosaic tables. It must first find the innermost embedded content and then carefully step through the code until it reaches the outermost container, the body tag. After all the above processes are completed, the browser can start rendering content on the screen.

If you use CSS, the browser can start the rendering process immediately after receiving the content from the server, because there is no or very little display markup in the page.

There is also a potential presentation benefit to using external style sheets. In a traditional table-based approach, the browser must retrieve, parse, and render each page individually. That is, the browser spends just as much work displaying page 30 on your site as it does page 1.

However, if an external style sheet is used for display, the first page of the site will prompt the browser to cache the linked style sheet file used by the page. This means that all subsequent pages in the site that use the above style sheet will download faster because the browser has already cached the style sheet.

The last advantage related to presentation reminds me of the movie "Mozart". In the movie, Mozart asks the king what he thinks of his opera. The king said it was good, but dull. Mozart pressed again and again, and the king explained that the problem lay in "too many notes."Web design can have the same problem, although of course the notes here refer to the actual HTML code. The more code there is, the longer it takes the browser to understand the page.

You may have heard rumors about official apps, they are poorly coded, full of complex information, yet the documentation page fails to render. As a Dreamweaver user, you won't have this problem, but you will be guilty if you write too much code. A classic table-based design is a good example.

When you use CSS in your designs, you will reduce the amount of code your customers need to download. Just reducing the font tags in certain pages can significantly reduce the amount of code. In many cases, the amount of code can be reduced by up to 50% or more if designed entirely using CSS-P. Less code means pages download faster.

Accessibility
I hear people talking about accessibility a lot these days. Most developers know they have to think about building more accessible sites, but to a greater extent, only developers building sites for government or educational institutions are forced to actually do it. When thinking about accessibility issues, most developers think it simply means that the alt attribute needs to be added to graphics. But in reality, there's a lot you can do to improve accessibility, and CSS makes it easy to build an accessible site.

The main issue with accessibility (and one that can be solved using CSS) is how assistive technologies (such as screen readers) "read" the page. In traditional table-based environments, screen readers face a huge challenge in deciding how to read the page. Think about it, how confused a screen reader would be when it encounters a deeply tessellated table. Should it read the content, or skip it? After skipping content, how to return to the content later?

When you click on a page, you will quickly see the content on the page that interests you, ignoring the navigation and other content at the top of the page. People with poor eyesight cannot do this. He has to wait for the screen reader to parse all the complex information between the top of the page and the content that interests him.

Of course, there are techniques that allow screen readers to skip navigation, but this requires adding a link in the image of the navigation bar or other content. The operation of these technologies can be confusing and visible to others who visit the site. Using CSS, you can fully define invisible elements in your page (invisible to other site visitors and your mouse). Screen readers can use these elements to navigate quickly and work with documents efficiently.

Since CSS does not display markup, the only problem screen readers have is with the actual content. Plus, when you design with CSS-P, you focus on the actual “flow” of your content. You start thinking about its logical order on the page.

As you read this document, you understand the "flow" of information. But in the mosaic table example, if you use a multi-column layout, this paragraph will most likely be in the upper right corner of the page. That way, the screen reader has no way of knowing that it's supposed to read this paragraph at the end of the article.

After using CSS-P, the browser may still display this paragraph in the upper right corner of the browser window, but when you view the source code of the document, the paragraph in the html of the document is still what you see now to the location. This makes the page more accessible.

Summary and plan
The above is my answer. I hope I explained the unique advantages of using CSS for web design. Clearly, there is a lot to learn. Therefore, I encourage you to read the other Macromedia Developer Center articles on CSS*, which will help you better understand the benefits of CSS and teach you the entire process of using CSS in your designs. I'll be back with more CSS tutorials in the coming weeks and months. That’s it for writing here, I hope you enjoy using our styles.


About the Author
Greg Rewis is Macromedia's leading evangelist for Web technologies. Greg is Macromedia's public advocate for the Macromedia software suite and Web application development server distributed on the Web, and represents the interests of the company's thousands of customers with product development organizations. Greg knows exactly what Macromedia customers think because he is "on the road" 200 days a year, talking to customers, demonstrating products at trade shows, seminars, and conferences, and organizing advanced training sessions dedicated to the Macromedia product line. Greg is always flying around the world, but when not working he enjoys life in the Arizona desert, golfing, and teaching his two sons the art of "chilling out in the pool."