Why is CSS important?
Despite the fact that it became a standard W3C recommendation in 1999, massive adoption of CSS has only recently began. Many Web developers are simply more used to existing ways of defining style, and do not see any actual benefits in moving their presentational code to CSS. But using CSS, one of the cornerstones of Web standards, not only simplifies your everyday workflow (and makes your page more compatible among devices and browsers), but also allows for effects that are simply not available using plain HTML.
- Separation of content from style
-
Divide and conquer! Developers have used the modularization principle since the dawn of times. When two different aspects of a system are separated, they are not only easier to grasp, but also easier to update; chiefly because less dependency exists between them. By defining style and content in different places, the two tenets of modular system design can be seized: you can change one of the modules without the other ones being affected, and each module becomes easier to understand and modify when isolated.
- Uniform rendering across site
-
If style definitions are scattered around your web site, consistency across pages and sections becomes bothersome. By having presentational information centralized in a set of stylesheets, conflicting page designs vanish by design.
- Easier sitewide style updates
-
Whether you do it manually or using regular expressions, changing font size for every header in a Web site styled using deprecated HTML tags is definitely a daunting and error prone task. By having all presentational definitions in a single place, sitewide style changing become predictable and, above all, fast!
- Faster rendering
-
Complex table-based layout with dozens of nested levels put a lot of strain on a browser's rendering engine. CSS, on the other hand, was designed specifically for the task, and therefore results in much quicker interpretation and thus rendering.
- Accessibility
-
Web developers sometime forget that, while graphic design is a plus for most users, colors, sounds, and animations are actually hurdles for some impaired users. By having content separate from style, impaired users can focus on what matters most for them. Visually impaired users, for instance, use screen readers, which will simply ignore CSS code when present, jumping straight into real content, in order to speak it out loud.
- Faster download times
-
If a single set of stylesheets is used to describe presentation for a series of pages, this information will only need to be downloaded once for the whole site. After having visited the first page of a site, the Web browser will have cached linked stylesheets, considerably reducing the amount of data that need be downloaded when visiting subsequent pages.
- Cross-browser compatibility
-
Despite the fact that some browsers do not yet offer full CSS compliance, all the major browser developing companies have expressed their strong will to fully support CSS as the means of defining style. As future browser versions are released, rendering should become more and more predictable.
- Easier to go mobile
-
Styling web pages for mobile devices is a whole different business. But why should content change when serving sites to these devices? By having style defined using CSS, you can change presentation to suite different rendering engines, while leaving content intact. And don't forget printers are a completely different device, that needs to be catered for!
- Slimmer, more maintable content code
-
By keeping style code in a separate location and using a declarative language that was specifically designed for the task, content can more easily be updated, without having to wade through dozens of cryptic table cells and font definitions.
- Search engine optimization
-
Search engines rank pages based on their content rather than their style. The greater your content-to-markup ratio, the more relevant you become when appearing in search results!
See Also