Cascading Style Sheets

By Joy-Lyn Blake

May 14, 2001 12:00 PM ET

Computerworld - Cascading Style Sheets (CSS) will definitely change the way you think about the Web.

CSS in Action

For a truly elegant implementation of CSS, check out the Web site of Büttenpapierfabrik Gmund GmbH & Co. a specialty paper producer in Gmund am Tegernsee, Germany. Although the page source code seems daunting, the results of using style sheets are well worth the time and effort.

The Web site appears to be laid out as an image map, with many overlapping rectangles carefully arranged in a graphics program, each one carefully coded in HTML to link to its page. It could have been done that way, but then changing any single image in the collection would have required reworking the entire graphic. With CSS, however, swapping out any single image layer is quick and easy: Just change the entry in the style sheet, and you’re done.

— Joy-Lyn Blake

With this technology, you can create reusable code that acts as a style sheet to define typographic and color information, position objects and control or change the look of an entire Web site, all from a single file. Style sheets let you control how a Web page is rendered without compromising its structure. You can do that to some extent with the Web protocol HTML, but CSS allows for pixel-precise positioning of elements within a page.

We've gotten used to the premise that page structure - including paragraphs, lists, tables and frames - is dependent upon coding practices. The more intricate the page structure, the more complex the coding required. Many Web pages have become little more than deeply nested layers of tables, font tags and line breaks - a nightmare to troubleshoot, rearrange or redesign.

Style sheets let Web authors accomplish the same result without all that messy HTML coding. Anyone who's ever had to troubleshoot HTML code knows how difficult it can be to track down errors.

Imagine the HTML tagging necessary to create a Level 1 header (H1) that sets the font of a passage of text and also calls for the text to be dark red, italic and underlined on a blue background, with a repeating horizontal image and a border around all. And you want a margin only at the top of the bar, not the bottom. HTML requires a table to accomplish this, along with the requisite tags controlling font color, font face and underlining. But the cell-padding parameters apply equally to the top and bottom of the cell, so there go your margin specifications.

CSS, however, gives you full control, without multiple tags or the need to wrap the entire element in a table. Here's the CSS code for the above example: H1 {color: maroon; font: italic 1em Times, serif; text-decoration: underline; background: blue url (titlebg.png) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px;}.

Recommend Digg Twitter ShareThis

Email Print Send Feedback Reprints

Additional Resources

POLL RESULTS

Leading IT Pros Weigh In on Top IT Issues

Accelerate your knowledge of the IT world you inhabit by viewing the results of a series of polls taken by your IT peers. These polls of 100+ IT professionals each are available for full viewing. They cover key topics such as virtualization, processor performance, green IT, cloud computing and many others. Be a part of the buzz.

WHITE PAPER

For Best Results, Think Beyond the Box

Technology is complex. Keeping it running productively shouldn't be. To that end, you want to minimize the number of solutions needed in-house to simplify operations, maintenance, and support. Kodak offers a best-practices model. One company provides support for both scanner and software, for fast problem resolution without vendor finger-pointing. Download now!

WHITE PAPER

Accelerating the Path to Demand Intelligence with a Demand Signal Repository

Utilizing demand intelligence improves the precision of pricing, product assortments, channel/store placement, and promotion, which are all essential for sustainable revenue management performance. Learn more, download this free whitepaper today.

White Papers & Webcasts

iPhone for the Enterprise
One of the biggest concerns of using the iPhone for the enterprise is the security and manageability issues. Read this white paper to...

Strategic ECM Webinar
Learn what new strategic business benefits can be realized through ECM!...

2009 Gartner Magic Quadrant Report
Truly understand your options for WAN Optimization Controllers...

Managing And Protecting Your Ever Increasing Mobile Assets
Learn best practices for desktop and application virtualization, computer security, and computer life-cycle management....

Tech Horizons: ASG's metaCMDB, The Technology That Rocks
Improved business productivity often requires more efficient IT and more efficient IT cannot be achieved without a better understanding of the way business...

5 Architecture Issues that Impact BES performance
This Live webinar will identify critical log file errors, performance counters, and configurations to pay close attention to when optimizing BES server performance....

The Vector Approach to Data Center Power Planning
This white paper describes an approach that considers the major milestones and thresholds in data center power requirements-and how planners should adjust their...

Usability Is Everything
Learn what sets Workday's HR and Payroll solutions apart from the competition....

Yankee Group Mobile WAN Optimization Report
Mobile work continues to evolve. Learn how to keep up with the demands of your organization's mobile workforce....

The Value of Real SaaS at Workday
Cost savings, speed to value, and innovation brought to the enterprise by Workday's software-as-a-service solutions for HR and Payroll....

All White Papers | All Webcasts