Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Why Use CSS?

The benefits offer the best reason

Since the launch of Dreamweaver MX 2004, I've had numerous opportunities to demonstrate its new features and power to both new and existing Dreamweaver users. As with any product demonstration, it doesn't take long before I'm singing the praises of Dreamweaver MX 2004's abilities to design and render CSS, or Cascading Style Sheets.

Recently, however, a novice user asked a question, which, quite honestly, startled me. The user simply asked, "Why should I use CSS?" I realized at that moment that while those of us who work with HTML and CSS on a daily basis are intimately familiar with the benefits, many of you are not.

CSS Beginnings
The governing body of the Web, the W3C, recommended the use of CSS in December 1996 with the ratification of the CSS Level 1 specification, which described attributes for use in HTML pages. These attributes replaced the traditional font tag and other "style" markup such as color and margins. In May 1998, the W3C ratified CSS Level 2, which introduced positioning attributes. These attributes replaced the rampant (and incorrect) usage of the table tag to design the presentation of page elements. The most recent revision to the CSS specifications is CSS 2.1, which refines some attributes and removes others that had only limited, if any, usages in current browsers.

Unfortunately, CSS has been slow in reaching broad adoption. One of the key reasons for this was the browsers, and, in turn, the Web designers building sites for these browsers. At the time of CSS ratification, Netscape Navigator was still the dominant browser, and its support for CSS was basically nonexistent. Microsoft added very limited support with version 3 of its browser, but most Web designers at the time (this author included) were still coding their pages with Netscape as their reference platform.

Over the years, with each new version, the browser makers have expanded their support of CSS. Today, Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera, and Safari all fully support CSS. That's not to say that our lives as Web designers and developers are without problems. While the above-mentioned browsers support CSS Level 2, they do so with varying degrees of compliance. In some cases, certain attributes still give you cause for frustration. In other words, you still need to follow the age-old mantra of "test, and test often." However, if you stick to core attributes of the CSS specifications, your pages will render correctly.

But why did the W3C create the CSS specification at all? What does it all mean to me as I create HTML-based Web sites and applications? In my opinion, you can divide up the need for CSS and its resulting benefits into three main areas: flexibility, rendering, and accessibility.

Flexibility
I'm sure that almost every Web designer and developer has experienced that moment of panic when, after meticulously laying out a page - complete with numerous nested tables - the client requests a "small" change. This could be something as simple as "can you move that image a little to the left," or as dramatic as "I'm not happy with those headers, can you make their font larger - and while you're at it, how about changing their color too?" If you're dealing with a limited number of pages, you can take a deep breath and spend the better part of an hour making those irritating changes. But when you're dealing with the larger sites, which have become the norm, a simple change is suddenly anything but simple.

What causes the panic in these situations? The markup, which defines the appearance of our pages, is actually part of the pages themselves. To see an illustration, take any given page from one of your sites and count the number of font and table tags. If only you could remove this markup from the flow, or code, of the actual page - and, even better, if you could externalize it -you could make the changes in a centralized place. Sounds like a job for CSS.

By designing your pages using a single, or even multiple, external style sheets, you can apply those changes to your site by modifying the style sheet and uploading the modified version.

Imagine how difficult it would be to move your site navigation from the left side of the page to the right in a traditional table-based layout. This would take hours of repetitive and very tedious work. If, however, you used the positioning attributes of CSS (more commonly known as CSS-P) to design your pages, a simple change to the "float" attribute in the external style sheet would update the page. There's also an added benefit: you've updated every page that uses that style sheet on the site!

Rendering
Since broadband has become mainstream, many developers have stopped considering how much time it takes to render a page in a browser. However, for many of you it's important to remember that your target audiences still surf the Web on dial-up connections. The traditional table-based layout is one of the primary causes of slow-loading pages. This happens because the browser, upon receiving the page from the server, must first examine and "understand" the complex array of nested tables. It must first locate the most deeply nested piece of content and then meticulously work its way back out of the code until it reaches the uppermost container, the body tag. Only after completing this journey can the browser begin rendering the content on the screen.

When you use CSS, the browser begins the rendering process as soon as it receives the content from the server because there is little, if any, actual presentational markup in the page.

There is also a hidden rendering benefit when using external style sheets. In the traditional table-based approach, the browsers must retrieve, analyze, and render each page individually. In other words, the browser is working just as hard at displaying the 30th page in your site as it was when displaying the first page.

If, however, the site uses external style sheets for its presentation, the first page prompts the browser to cache the linked style sheet files that the page uses. This means that all of the subsequent pages in the site using those style sheets will load even faster, since the browser has already cached the style sheets.

The final rendering benefit reminds me of the movie Amadeus. In the movie, Mozart asks the emperor what he thought of one of his operas. The emperor responds that it was good, but tedious. When pressed by Mozart, the emperor explains that the problem was simply that there were "too many notes." With Web design, this can also be a problem - the notes are the actual HTML code. The more code there is, the longer it takes the browser to understand and make sense of the page.

When you implement CSS in your designs, you decrease the amount of code the client needs to download. Simply removing all of the font tags from some pages can minimize the amount of code dramatically. If you move to completely CSS-P designs, in many cases you can minimize the amount of code by 50% or more! Less code equals faster-loading pages.

Accessibility
I hear a lot about accessibility these days. Most developers know that they should be thinking about building more accessible sites, but to a large degree only those developers who build sites for government or educational institutions have been forced into actually doing it. When thinking about accessibility, a majority of developers assume this means that they simply need to add things like alt attributes to their images. But there is actually much more to accessibility, and using CSS can make it easier for you to build accessible sites.

One of the primary issues of accessibility - and one where CSS can really make a difference - is in how an assistive technology such as a screen reader "reads" a page. In the traditional table-based world, a screen reader faces an incredible challenge in deciding how to read a page. Think about how confusing it must be for a screen reader as it encounters a deeply nested table - should it read the content, or skip over it? And if it skips over it, how does it get back to the content later?

As you hit a page, you can quickly spot the content that interests you and ignore the navigation or other content at the top of the page. Visually impaired people don't have this luxury. They must wait for the screen reader to parse through all of the extraneous information between the top of the page and the content they are really interested in.

Of course, there are techniques to make the screen reader skip the navigation, but these usually require adding links to images in your navigation bar or other content. While these techniques work, they can also be confusing, and sighted visitors can see them as well. Using CSS, you can define completely invisible elements on the page - elements that are invisible to other site visitors and your mouse. The screen reader can use these elements to navigate quickly and effectively through the document.

With CSS and its lack of presentational markup, the only thing that a screen reader encounters is actual content. Additionally, as you design using CSS-P, you begin to concentrate on the actual "flow" of content and consider its logical order on the page.

As you've been reading this article you followed the "flow" of information. But in that nested table example, this paragraph could just as easily have been in the upper right-hand corner of the page. In that case, the screen reader would have no way of knowing that it should wait until the end of the article to read it.

Using CSS-P, the browser could display this paragraph in the upper right corner of the page, but its position in the actual text or flow of the document would still be right here where you are seeing it. This makes for a much better, more accessible experience.

.  .  .

There you have it. I hope I've explained some of the unique benefits of using CSS in your Web endeavors. Obviously, there's a lot to learn.

More Stories By Greg Rewis

Greg Rewis is chief Web technologies evangelist at Macromedia. It is Greg's responsibility to be a public spokesperson for the Macromedia Web publishing suite of software and Web application development servers - as well as to represent the company's customers in an advocate's role on the product development teams.

Comments (2) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Jon 05/20/04 01:16:44 PM EDT

I started using CSS way back in 98. I have been using and learning more about CSS ever since. One thing I wanted to add to your article, for the beginner, using CSS for text formatting is a great place to start. Creating a simple CSS file with all the selectors formatted, P,A,A:Hover,HR, H1, H2 etc. Even a few styles for tables is also a good starting place.(.myTD,.mainTable, etc.) Then after you have that down you will understand how the whole thing works when you move into CSS-P. I think learning to use CSS is worth the time it takes. My first CSS-P job was a multi-million dollar application GUI that had to be lite, and very flexible. The whole app runs off a handful of CSS files. The developers really liked how easy it was to adjust the pages.
Take care,
Jon

FOTG Design and Film

Jim Rommens 05/20/04 10:12:19 AM EDT

Thanks for the interesting and helpful notes on CSS and its benefits. I see they are more important than just using them for font attributes.

@ThingsExpo Stories
"Cloud Academy is an enterprise training platform for the cloud, specifically public clouds. We offer guided learning experiences on AWS, Azure, Google Cloud and all the surrounding methodologies and technologies that you need to know and your teams need to know in order to leverage the full benefits of the cloud," explained Alex Brower, VP of Marketing at Cloud Academy, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clar...
In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
"IBM is really all in on blockchain. We take a look at sort of the history of blockchain ledger technologies. It started out with bitcoin, Ethereum, and IBM evaluated these particular blockchain technologies and found they were anonymous and permissionless and that many companies were looking for permissioned blockchain," stated René Bostic, Technical VP of the IBM Cloud Unit in North America, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventi...
Gemini is Yahoo’s native and search advertising platform. To ensure the quality of a complex distributed system that spans multiple products and components and across various desktop websites and mobile app and web experiences – both Yahoo owned and operated and third-party syndication (supply), with complex interaction with more than a billion users and numerous advertisers globally (demand) – it becomes imperative to automate a set of end-to-end tests 24x7 to detect bugs and regression. In th...
Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to work together. The number of software platforms, apps, hardware and connectivity standards is creating paralysis among businesses that are afraid of being locked into a solution. EdgeX Foundry is unifying the community around a common IoT edge framework and an ecosystem of interoperable components.
"MobiDev is a software development company and we do complex, custom software development for everybody from entrepreneurs to large enterprises," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Large industrial manufacturing organizations are adopting the agile principles of cloud software companies. The industrial manufacturing development process has not scaled over time. Now that design CAD teams are geographically distributed, centralizing their work is key. With large multi-gigabyte projects, outdated tools have stifled industrial team agility, time-to-market milestones, and impacted P&L stakeholders.
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Coca-Cola’s Google powered digital signage system lays the groundwork for a more valuable connection between Coke and its customers. Digital signs pair software with high-resolution displays so that a message can be changed instantly based on what the operator wants to communicate or sell. In their Day 3 Keynote at 21st Cloud Expo, Greg Chambers, Global Group Director, Digital Innovation, Coca-Cola, and Vidya Nagarajan, a Senior Product Manager at Google, discussed how from store operations and ...
"There's plenty of bandwidth out there but it's never in the right place. So what Cedexis does is uses data to work out the best pathways to get data from the origin to the person who wants to get it," explained Simon Jones, Evangelist and Head of Marketing at Cedexis, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
SYS-CON Events announced today that Telecom Reseller has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5-7, 2018, at the Javits Center in New York, NY. Telecom Reseller reports on Unified Communications, UCaaS, BPaaS for enterprise and SMBs. They report extensively on both customer premises based solutions such as IP-PBX as well as cloud based and hosted platforms.
It is of utmost importance for the future success of WebRTC to ensure that interoperability is operational between web browsers and any WebRTC-compliant client. To be guaranteed as operational and effective, interoperability must be tested extensively by establishing WebRTC data and media connections between different web browsers running on different devices and operating systems. In his session at WebRTC Summit at @ThingsExpo, Dr. Alex Gouaillard, CEO and Founder of CoSMo Software, presented ...
WebRTC is great technology to build your own communication tools. It will be even more exciting experience it with advanced devices, such as a 360 Camera, 360 microphone, and a depth sensor camera. In his session at @ThingsExpo, Masashi Ganeko, a manager at INFOCOM Corporation, introduced two experimental projects from his team and what they learned from them. "Shotoku Tamago" uses the robot audition software HARK to track speakers in 360 video of a remote party. "Virtual Teleport" uses a multip...
A strange thing is happening along the way to the Internet of Things, namely far too many devices to work with and manage. It has become clear that we'll need much higher efficiency user experiences that can allow us to more easily and scalably work with the thousands of devices that will soon be in each of our lives. Enter the conversational interface revolution, combining bots we can literally talk with, gesture to, and even direct with our thoughts, with embedded artificial intelligence, whic...
SYS-CON Events announced today that Evatronix will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Evatronix SA offers comprehensive solutions in the design and implementation of electronic systems, in CAD / CAM deployment, and also is a designer and manufacturer of advanced 3D scanners for professional applications.
Leading companies, from the Global Fortune 500 to the smallest companies, are adopting hybrid cloud as the path to business advantage. Hybrid cloud depends on cloud services and on-premises infrastructure working in unison. Successful implementations require new levels of data mobility, enabled by an automated and seamless flow across on-premises and cloud resources. In his general session at 21st Cloud Expo, Greg Tevis, an IBM Storage Software Technical Strategist and Customer Solution Architec...
To get the most out of their data, successful companies are not focusing on queries and data lakes, they are actively integrating analytics into their operations with a data-first application development approach. Real-time adjustments to improve revenues, reduce costs, or mitigate risk rely on applications that minimize latency on a variety of data sources. In his session at @BigDataExpo, Jack Norris, Senior Vice President, Data and Applications at MapR Technologies, reviewed best practices to ...
An increasing number of companies are creating products that combine data with analytical capabilities. Running interactive queries on Big Data requires complex architectures to store and query data effectively, typically involving data streams, an choosing efficient file format/database and multiple independent systems that are tied together through custom-engineered pipelines. In his session at @BigDataExpo at @ThingsExpo, Tomer Levi, a senior software engineer at Intel’s Advanced Analytics gr...