Separate Presentation from Content
The first and foremost mission was to disconnect the tight stranglehold that HTML style tags brought to a Web page. By isolating the control of a page’s look-and-feel from the content, a clear pathway to building structured pages opens up where you can still get the design you want. Additionally, both content and design benefit in terms of accessibility. Search engines can get at the content easier for indexing, while designers have hands-on control of their presentation. The core concept of separating presentation from content leads to many other benefits of the CSS model. Flexible Design Model
Even with the most basic implementation of text styling, CSS runs rings around HTML. Whereas font tags are limited to seven browser-dependent sizes, CSS offers both absolute, number-based systems in the measurement unit of your choice (points, pixels, ems, percentages, and many others) and relative keyword-based systems (that is, small, medium, large, smaller, larger, and so on). Design considerations common in print publishing (such as line spacing) are impossible in HTML but a snap in CSS. Aside from the specific properties available, the CSS methodology of assigning those properties is wonderfully robust. With CSS, you can re-style existing HTML tags or create custom styles in a variety of ways with classes, IDs, and through selectors. Selectors (whether as common as a descendent selector or as rare as adjacent-sibling selectors) encourage structural Web coding while delivering enhanced design control.
Faster Loading Times
To the casual Internet user, a Web page is completely virtual with no real substance or weight. Web designers, however, are very aware of the weight of their pages; the more code that’s in a page, the heavier it is and the longer it takes to load. For example, here’s the minimum code it takes to place a sentence on the page in the common HTML container, a font tag:
<table> <tr> <td> Welcome to my world. </td> </tr> </table>
Now, here’s the same content in the standard CSS container, a div tag:
<div> Welcome to my world. </div>
Multiply that doubled-difference many, many times for a single page—and then again for an entire Web site—and you have some idea of CSS’s edge in speed. Easy, Instant Maintenance
As noted earlier, it’s a nightmare to change an HTML style across a site because styles are all applied at the lowest level, the tag. Not only must all pages with all the styles be altered one at a time, each page must be re-saved and then re-put to the server.With well-structured CSS, on the other hand, your styles are kept in a separate file where they can be modified in any text editor. Once published, a style change is immediately seen by anyone who views an affected page within the site.
Portability
Although the Internet may at times seem pervasive, it’s just one of many media. For example, many sites strive to have their Web pages available for print as well.With HTML-styled pages, the only viable route is to redesign the page with print in mind—a terrible chore to do it once and a never-ending time-suck if the site is updated frequently. CSS turns the HTML model on its head and allows you to simply specify a different style sheet for print—and, if desired, one for speech synthesizers, rojectors, and hand-held devices, among others—and you’re done.
Advanced Design Possibilities
As defined, CSS is highly interactive and throws open the door to a multitude of design options. Just a few of the advanced text options were mentioned earlier; in addition to advanced sizing and line spacing, CSS also provides more robust alignment and far more specific margin and padding options. Text is not the only element to gain a power surge under CSS. The capability to control the position and tiling of background images (see the below Figure) is reason enough to use CSS in and of itself.
FIGURE -1: With CSS image control, you can place a single, non-tiling image like thiscontrol panel in the background, precisely positioned.
Another key element in the CSS toolchest is the div tag, commonly referred to in Web authoring programs like Macromedia Dreamweaver as layers. Content within a div tag can be placed anywhere on a page or made to flow in the context of a document. A div tag, like span, is a non-semantic tag that is used as a generic container; div tags are nothing more than block elements that enable you to mark up broad sections of a document. From a dynamic point of view, div tags can be programmatically hidden, revealed, change style, and even move across (or off ) the page.
Enhanced User Control
While CSS provides a great deal of design-time flexibility, it also opens up the run-time options for Web page visitors. The entire notion of the cascade in Cascading style Sheets stems from the originators’ desire to blend the designer’s style sheet with the user’s. The end result is a cascade of several style sheets all coming together to render the page optimally. Some CSS-savvy designers have taken this a step further and designed their sites with multiple CSS styles attached to each page. Modern browsers include a style switching command that lists available style sheets.
One of the most commonly adjusted user settings is font size. The smallish text that looks good on the design spec may be too tiny to be read by a particular visitor—and that’s okay, if the page is styled properly with CSS and the text can expand to a readable size, as shown in Figure 1-2.When designed correctly, the text grows and the layout flows: site designer, site visitor, and site owner are all happy.
Accessibility
Adjustable text size is just one aspect of a vital trend in Web design: accessibility. Fueled by the Federal Rehabilitation Act, a U.S. law mandating that all government-run Web sites follow the guidelines established in Section 508 of that act, accessibility is on every designer’s watch list. The very core of Cascading Style Sheets—separating presentation from content—makes the content within the pages more available. This openess, or accessibility, is immediately noticeable when you listen to software screen readers. Screen readers are a crucial assistive technology. If you ever want to demonstrate the benefit of CSS, just point a screen reader–enabled browser to a page in a CSS-based layout—and then visit the same page in a table-based layout, especially those with deeply nested tables. You won’t believe your ears when you hear what a difference CSS makes.
FIGURE-2: Define your font sizes correctly with CSS, and text is easily rescaled with no sacrifice of design integrity.
One CSS 2.1 specification goes to the next level in aiding the visually impaired to browse the Web by carving out a new media type: speech. Speech is a separate media type (just like print or hand-held devices) that allows designers to control how CSS classes and other selectors sound, just like the screen media type controls how CSS selectors look. Support for the speech media type is pretty much nonexistent at this time, but a much fuller implementation already on the table for CSS 3 bodes well for this much-needed functionality.
